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

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