页面加载时扩展了移动导航菜单

我正在尝试在页面加载时扩展我的移动菜单加载(仅限顶级链接(。我有第二级嵌套链接，我想保持隐藏状态。我确定这是一个超级简单的修复，但我已经花了一个下午摆弄我的代码，我认为是时候问专业人士;)

我的代码：https://jsfiddle.net/ubxsksz2/

<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;
  }
}

实际上我花了一段时间才让它工作......
伙计，你在做一些疯狂的导航栏！+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>

相关内容

最新更新

热门标签：