页面加载时扩展的移动导航菜单答案

【问题标题】：Expanded mobile navigation menu on page load页面加载时扩展的移动导航菜单
【发布时间】：2017-11-11 20:53:28
【问题描述】：

我正在尝试在页面加载时扩展我的移动菜单加载（仅限顶级链接）。我有第二层嵌套链接，我想隐藏起来。我确信这是一个超级简单的修复，但我已经花了一个下午的时间来摆弄我的代码，我认为是时候问问专业人士了；）

<nav id="nav" role="navigation">
  <a href="#nav" title="Show navigation"><font size="+2">MENU</font></a>
  <a href="#" title="Hide navigation"><font size="+2">HIDE MENU</font></a>
  <ul>
    <li><a href="index.html#quicknav"><b><font color="#CC9933">HOME:</font></b></a></li>

    <li>
      <a href="firstlevellink.html" title="I want to be seen on page load">FIRST LEVEL <img src="ddlevelsfiles/arrow-down.gif"></a>
      <ul>
        <li><a href="secondlevellink.html" title="I want to be hidden on page load">SECOND LEVEL LINK</a></li>
      </ul>
    </li>
  </ul>
</nav>

/* New Responsive Menu CSS */

#crumbs {
  width: 97%;
  overflow: hidden;
}

#nav {
  /* container */
  background: #333;
}

#nav > a {
  display: none;
}

#nav a {
  color: #FFF;
}

#nav li {
  position: relative;
  background: #CC9;
  color: #000;
  padding: 15px 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #333;
}


/* first level */

#nav > ul {
  font: bold 14px Verdana;
}

#nav li ul li a {
  color: black;
}

#nav > ul > li {
  height: 100%;
  float: left;
  padding: 15px 10px;
  background: #333;
}


/* second level */

#nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%;
}

#nav li:hover ul {
  display: block;
}

@media only screen and ( max-width: 640px)
/* 640 */

{
  #sticky-element {}
  .nav-container {}
  .f-nav {
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
  }
  #nav {
    position: relative;
  }
  #nav > a {}
  #nav:not(:target) > a:first-of-type,
  #nav:target > a:last-of-type {
    display: block;
  }
  /* first level */
  #nav > ul {
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
  }
  #nav:target > ul {
    display: block;
  }
  #nav > ul > li {
    width: 93%;
    float: none;
  }
  /* second level */
  #nav li ul {
    position: static;
  }
}

【问题讨论】：

标签： html css mobile menu navigation

【解决方案1】：

实际上我花了一段时间才开始工作......
伙计，你正在制作一些疯狂的导航栏！ +1
我希望这可以帮助你！
继续编码！

/* New Responsive Menu CSS */

#crumbs {
  width: 97%;
  overflow: hidden;
}

#nav {
  /* container */
  background: #333;
}

#nav > a {
  display: none;
}

#nav a {
  color: #FFF;
}

#nav li {
  position: relative;
  background: #CC9;
  color: #000;
  padding: 15px 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #333;
}


/* first level */

#nav > ul {
  font: bold 14px Verdana;
}

#nav li ul li a {
  color: black;
}

#nav > ul > li {
  height: 100%;
  float: left;
  padding: 15px 10px;
  background: #333;
}


/* second level */

#nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%;
}

#nav li:hover ul {
  display: block;
}

@media only screen and ( max-width: 640px)
/* 640 */

{
  #sticky-element {}
  .nav-container {}
  .f-nav {
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
  }
  #nav {
    position: relative;
  }
  #nav > a {}
  #nav:not(:target) > a:first-of-type,
  #nav:target > a:last-of-type {
    display: block;
  }
  /* first level */
  #nav > ul {
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
  }
  #nav:target > ul {
    display: block;
  }
  #nav > ul > li {
    width: 93%;
    float: none;
  }
  /* second level */
  #nav li ul {
    position: static;
  }
}

<body onload="window.location.href+='#nav';">
  <nav id="nav" role="navigation">
    <a href="#nav" title="Show navigation"><font size="+2">MENU</font></a>
    <a href="#" title="Hide navigation"><font size="+2">HIDE MENU</font></a>
    <ul>
      <li><a href="index.html#quicknav"><b><font color="#CC9933">HOME:</font></b></a></li>

      <li>
        <a href="firstlevellink.html" title="I want to be seen on page load">FIRST LEVEL <img src="ddlevelsfiles/arrow-down.gif"></a>
        <ul>
          <li><a href="secondlevellink.html" title="I want to be hidden on page load">SECOND LEVEL LINK</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>

【讨论】：