Question

看来我的侧边栏导航并不希望正常工作，我希望它能够像棍子导航一样留在侧面，但它似乎不想移动。任何帮助或指向我正确方向的东西都会受到赞赏。

HTML

<nav class="nav">
  <ul class="menu-nav" id="menu"> 
    <li data-menuanchor="firstPage" class="menu_item-home active"><a href="#home"><span class="navtext">Environment</span></a></li>
    <li data-menuanchor="secondPage" class="menu_item-about"><a href="#about"><span class="navtext">Econimic</span></a></li>
    <li data-menuanchor="3rdPage" class="menu_item-team"><a href="#team"><span class="navtext">LEED Certification</span></a></li>
    <li data-menuanchor="4thPage" class="menu_item-process"><a href="#process"><span class="navtext">NAHB</span></a></li>
    <li data-menuanchor="5thPage" class="menu_item-progress"><a href="#progress"><span class="navtext">FAQs</span></a></li>
  </ul>
</nav>

CSS

/*nav
*/
.nav {
  position:fixed;
  top: 268px;
  left: 0;
  height: 800px;
  z-index: 1;
  width: 75px;
  padding: 0;
  margin:0;
  /* text-align: center; */
/*  background-color: rgba(0,0,0,.25);
*/  list-style: none;
}
.menu-nav {
  list-style: none;
      margin: 0 0 10px 0px !important;
}
.menu-nav li,
.menu-nav li a {
  display:block;
}
.menu-nav li {
  margin: 0;
  position: relative;
  z-index: 1;
}
.menu-nav li a {
  text-decoration:none;
  position: relative;
  z-index: 2; 
  /* color: #ff4d00; */
  color: transparent;
  /* background-image: url(../img/bg/icons-sprite_551x75.png); */
  background-image: url(https://lh5.googleusercontent.com/-TbabxOjBKLI/UzoN5XcpN1I/AAAAAAAAA48/YCGyUXwLj5Y/s800/icons-sprite_551x75.png);
  background-repeat: no-repeat;
  width: 75px;
  height: 68px;
  transition: all 1s;
}
.menu-nav li a,
.menu-nav li.active a {
  padding: 9px 2px;
  display:block;
}
.menu-nav li.active a {
  color: #fff;
  background-color: rgba(0,0,0,.5);
}
 .menu-nav li a:hover {
  /* background-color: rgba(0,0,0,.5); */
  background-color: rgba(255,255,255,.95);
}
/* visually hide the navigation text */
.navtext {
  height: 68px;
  width: 200px;
  margin: 0;
  overflow: hidden;
  padding: 1em .5em 1em 6em;
  overflow: hidden;
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  display: inline-block;
  transform: translateX(-200px);
  /* transition: transform .4s; */
  transition: all .4s;
  z-index:-1;
}
/* reveal the navigation text on hover */
.menu-nav li a:hover .navtext {
  overflow: visible;
  transform: translateX(0);
  color: #fff;
  /* background-color: rgba(0,0,0,.5); */
  background: linear-gradient(to right, transparent, transparent 75px, rgba(0,0,0,.5) 75px, rgba(0,0,0,.5));
}
.menu-nav li a:hover,
.menu-nav li.active a:hover,
.menu-nav li a:hover .navtext {
  /* color: #ffdbcc; */
  /* background-color: rgba(0,0,0,.5); */
}
.menu_item-home a { background-position: 0 0; }
.menu_item-about a { background-position: 0 -69px; }
.menu_item-team a { background-position: 0 -138px; }
.menu_item-process a { background-position: 0 -207px; }
.menu_item-progress a { background-position: 0 -276px; }
.menu_item-extras a { background-position: 0 -345px; }
.menu_item-sponsorus a { background-position: 0 -414px; }
.menu_item-sponsors a { background-position: 0 -483px; }

/*nav*/

Answer 1

如果你想要它，它会发挥作用。看看这个小提琴：https://jsfiddle.net/sde6rcsu/

我改变了你的导航类，没有顶级属性。

.nav {
  position:fixed;
 /*  top: 268px; */
  left: 0;
  height: 800px;
  z-index: 1;
  width: 75px;
  padding: 0;
  margin:0;
  /* text-align: center; */
/*  background-color: rgba(0,0,0,.25);
*/  list-style: none;
}

粘性侧导航

1 个答案: