Question

我试图在页面加载时扩展我的移动菜单（仅限顶级链接）。我有第二级嵌套链接，我想保持隐藏状态。我确定这是一个非常简单的解决方案，但我已经花了一个下午摆弄我的代码，我认为现在是时候问专业人员了;）

Some
    /build
    /Some-ejb
        /build
        /dist
        /nbproject
        /src
            /conf
                /META-INF
                   MANIFEST.MF
            /java
                log4j.properties
        /test
    /dist
    /lib
       /log4j.jar
    /nbproject
    /src

Answer 1

实际上我需要一段时间才能完成这项工作...... 伙计，你正在做一些疯狂的导航栏！ +1
我希望这可以帮助你！
继续编码！

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: