Question

我的导航栏中有不同的子链接。我想在移动视图中折叠导航栏（已经有了）但它没有显示所有链接

HTML

<nav class= "clearfix">
  <ul class="clearfix navigation">
    <li>
      <a href="bewerbung.html">Bewerbung</a>
      <ul class="sub-menu" id="push">
        <li><a href="motivation.html">Motivation</a></li>
        <li><a href="lebenslauf.html">Lebenslauf</a></li>
        <li><a href="download.html">Downloads</a></li>
      </ul>
    </li>
    <li>
      <a href="index.html" id="push" style="height: 60px;">home</a>
      <ul class="sub-menu" id="push">
        <li><a href="kontakt.html">Kontakt</a></li>
      </ul>
    </li>
    <li>
      <a href="design.html">Projekte</a>
      <ul class="sub-menu" id="push">
        <li><a href="#">Photographie</a></li>
        <li><a href="#">3D Animation</a></li>
      </ul>
    </li>
  </ul>
  <a href="#" id="pull">Menu</a>
</nav>

CSS

nav a {
  transition:all linear 0.15s;
  color: #fff;
  display: table;
  width: 250px;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
}
nav a:hover, nav a:active {
  background-color: #ffffff;
  color: #1D424A;
}
nav a#pull {
  display: none;
}
nav a#mobile {
  display: none;
}
.sub-menu{
  display:none;
}
nav li:hover .sub-menu {
  display: inline-block;
  z-index:1;
  opacity:1;
}
.sub-menu {
  width:250px;
  padding:0px 0px;
  position: absolute;
  top:100%;
  z-index:-1;
  opacity:0;
  transition:opacity linear 0.15s;
  background:#1D424A;
}
.sub-menu li {
  display:block;
  font-size:16px;
  color: #363636;
}
.sub-menu li a {
  padding:0px 0px;
  display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
  background:#fff;
}

移动视图中的CSS

nav {
  height: auto;
  border-bottom: 0;
}
nav ul {
  display: none;
  height: auto;
}
nav a#pull {
  display: block;
  background-color: #6A6A6A;
  width: 100%;
  position: relative;
  margin-top: 0px;
  color: #ffffff;
}
nav a#pull:after {
  content:"";
  width: 30px;
  height: 20px;
  display: inline-block;
  position: relative;
  right: 15px;
  top: 10px;
  margin-top: 0px;
}
nav li {
  width: 100%;
  float: left;
  position: relative;
}
nav li a {
  border-bottom: 1px solid #FFF;
}
nav a {
  text-align: left;
  width: 100%;
  text-indent: 25px;
  margin-top: 0px;
}
.sub-menu{
  display: block;
}

JAVASCRIPT

$(function() {
  var pull  = $('#pull'),
      menu = $('nav ul'),
      menuHeight = menu.height();

  $(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
  });
});

$(window).resize(function() {
  var w = $(window).width();
  if(w > 320 && menu.is(':hidden')) {
    menu.removeAttr('style');
  }
});

http://ti-sign.ch/navbar/

Answer 1

这是因为height上固定的.navigation 50px：

.navigation {
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0 auto;
    width: 750px;
    height: 50px; /* remove that line and it works */
}

在移动视图中显示子链接

1 个答案: