Question

我正在开发一个项目，我正在努力实现这种响应式导航从 http://www.rvamedia.com/wordpress/

我希望徽标位于响应式导航图标的顶部，然后下拉就像这样（平滑而不是）。我还想知道按比例缩小到移动版本时导航显示方式的基本方法

我试图实现的差异是我的桌面导航将是一个居中的导航，中间有一个徽标，我想知道如何从那里转到我上面提到的移动版

我希望我具体而且感谢您查看我的问题！

我的桌面导航如下

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

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

1 个答案: