找到一种更好的方法来实现具有子类别的导航栏

时间：2018-03-01 08:34:31

标签： javascript html css responsive-design navigation

我正在构建一个导航栏。以下链接是我刚刚完成的内容。
https://jsfiddle.net/dsdzyp23/2/ 

<div class="navbar-01">
  <div class="navbar-01-container">
    <div class="main-container">
      <div class="logo-center">
        <img style="width: 240px;" src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg">
      </div>
      <button class="nav-toggle-btn">
					<img style="width: 50px;" src="https://cdn2.iconfinder.com/data/icons/ui-icon-part-2/128/navigation-512.png">
				</button>
      <ul class="nav-categories">
        <li><a href="#runway" data-sub-nav="runway">RUNWAY</a></li>
        <li><a href="#women" data-sub-nav="women">WOMEN</a></li>
        <li><a href="#men" data-sub-nav="men">MEN</a></li>
        <li><a href="#children" data-sub-nav="children">CHILDREN</a></li>
      </ul>
    </div>
  </div>
  <div id="runway" class="navbar-sub">
    <div class="main-container">
      <div class="nav-sub-list">
        <ul class="nav-sub-categories">
          <a href="#women">WOMEN</a>
          <li><a href="#Cruise-2018">Cruise 2018</a></li>
          <li><a href="#Fall-Winter-2017-Runway">Fall Winter 2017 Runway</a></li>
          <li><a href="#Pre-Fall-2017">Pre-Fall 2017</a></li>
        </ul>
        <!-- 
					-->
        <ul class="nav-sub-categories">
          <a href="#men">MEN</a>
          <li><a href="#Cruise-2018">Cruise 2018</a></li>
          <li><a href="#Fall-Winter-2017-Runway">Fall Winter 2017 Runway</a></li>
          <li><a href="#Pre-Fall-2017">Pre-Fall 2017</a></li>
        </ul>
        <!-- 
					 -->
        <ul class="nav-sub-categories">
          <a href="#unskilled-worker">UNSKILLED WORKER</a>
        </ul>
      </div>
    </div>
  </div>
</div>

因为我的子类别没有用锚点包装，当我的鼠标离开锚点时，子类别div关闭，因此我无法访问包含在子类别div中的内容。
我想知道用锚定包装子类是否是实现导航栏的最佳方式？ （考虑到响应式网页设计，它似乎是最简单的实现方式？）

1 个答案:

答案 0 :(得分：0)

这是制作菜单的标准方式。它也取决于要求。

＆＃13;
＆＃13; 
ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.nav-list {
  text-align: center;
}
.nav-list-item {
  display: inline-block;
  position: relative;
  margin-left: 5px;
  margin-right: 5px;
}
.nav-list-item:hover .subnav-list {
  display: block;
}

.subnav-list {
  display: none;
  width: 100px;
  transform: translateX(-50%);
  position: absolute;
  top: 100%;
  left: 50%;
}
＆＃13; 
<nav class="nav">
  <ul class="nav-list">
    <li class="nav-list-item">
      <a href="" class="subnav-link">Nav 1</a>
      <ul class="subnav-list">
        <li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
      </ul>
    </li>
    <li class="nav-list-item">
      <a href="" class="subnav-link">Nav 2</a>
      <ul class="subnav-list">
        <li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
      </ul>
    </li>
    <li class="nav-list-item">
      <a href="" class="subnav-link">Nav 3</a>
      <ul class="subnav-list">
        <li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
      </ul>
    </li>
    <li class="nav-list-item">
      <a href="" class="subnav-link">Nav 4</a>
      <ul class="subnav-list">
        <li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
      </ul>
    </li>
    <li class="nav-list-item">
      <a href="" class="subnav-link">Nav 5</a>
      <ul class="subnav-list">
        <li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
      </ul>
    </li>
    <li class="nav-list-item">
      <a href="" class="subnav-link">Nav 6</a>
      <ul class="subnav-list">
        <li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
      </ul>
    </li>
    <li class="nav-list-item">
      <a href="" class="subnav-link">Nav 7</a>
      <ul class="subnav-list">
        <li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
      </ul>
    </li>
    <li class="nav-list-item">
      <a href="" class="subnav-link">Nav 8</a>
      <ul class="subnav-list">
        <li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
      </ul>
    </li>
    <li class="nav-list-item">
      <a href="" class="subnav-link">Nav 9</a>
      <ul class="subnav-list">
        <li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
      </ul>
    </li>
    <li class="nav-list-item">
      <a href="" class="subnav-link">Nav 10</a>
      <ul class="subnav-list">
        <li class="subnav-list-item"><a href="">Sub Nav 1</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 2</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 3</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 4</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 5</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 6</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 7</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 8</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 9</a></li>
        <li class="subnav-list-item"><a href="">Sub Nav 10</a></li>
      </ul>
    </li>
  </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题