jquery - 如何获得这个特定的响应式导航？

Question

我正在做一个元素，我正在努力实现这种响应式导航 从 http://www.rvamedia.com/wordpress/

我希望 Logo 位于响应式导航图标的顶部，下拉菜单也像这样(平滑或不平滑)。 我还想知道在缩小到移动版本时让导航显示的基本方式

然而，我试图实现的不同之处在于，我的桌面导航将是一个居中的导航，中间有一个 Logo ，我想知道如何从它转到我上面提到的移动版本

我希望我是具体的，感谢您查看我的问题!

我的桌面导航如下

       <nav class="nav">
        <ul>
                <li>Home </li>
                <li>About </li>
                <li>Portfolio </li>
                <li>Contact </li>
        </ul>
       </nav>
    <a class="logo" href="http://www.website.com"></a>

和 CSS

  nav li{
  display: inline-block;
  padding: 40px 30px 40px 0;
  }

  nav li:nth-child(2) {
  padding-right: 80px;
  }

  nav li:nth-child(3) {
  padding-left: 80px;
  }

  .logo {
  background: url(logo.png) 50% 0 no-repeat;
  background-size: 32px 59px;
  width: 32px;
  height: 59px;
  position: absolute;
  top: 20px;
  left: 460px;
  }

(如果有更好的方法来做中心我洗耳恭听!)

再次感谢!

Answer 1

我会做类似 this 的事情上半年。然后对于下半部分，我会使用某种媒体查询来隐藏导航，然后使用 this插入。我以前用过它，它很容易使用。您只需要很好地处理媒体查询和一点点 jQuery，您应该能够毫无问题地实现导航。

<header>
<a class="logo" href="http://www.website.com">Logo</a>
<nav class="nav">
  <ul>
    <li>Home </li>
    <li>About </li>
    <li>Portfolio </li>
    <li>Contact </li>
  </ul>
 </nav>
</header>

header {
  width: 100%;
  background: #f2f2f2;
  display: block;
}

header:before, header:after {
  content: ' ';
  display: table;
}

header:after {
  clear: both;
}

nav.nav {
  width: 75%;
  display: inline-block;
  float: right;
}

ul {
  text-align: right;
  list-style: none;
}

li {
  display: inline-block;
  margin-right: 1em;
}

a.logo {
  display: block;
  float: left;
  width: 25%;
}

@media (max-width: 768px) {
  a.logo, nav.nav {
    display: block;
    float: none;
    width: 100%;
    margin: 0 auto;
    margin-top: 1em;
    text-align: center;
  }
  ul {
    text-align: center;
  }
}