如何制作固定在屏幕顶部的响应式导航栏

Question

我正在尝试创建一个固定在页面顶部的响应式导航栏，并且链接全高（100％），以便它们的背景颜色可以更改。到目前为止，我只是成功地修复了导航栏，并且链接只是在设备上有些兼容。我想要这个效果，媒体查询强制菜单进入图像中包含的导航。 http://getbootstrap.com/examples/navbar-fixed-top/。我不喜欢bootstrap，我希望将来能够自己做这件事。有什么提示吗？

这是我的代码：

玉：

  

头

     

link（rel =“stylesheet”，href =“/ main.css”）

     

NAV

ul

   li

       a(href="/") Home

       a(href="/about") About

       a(href="/contact") Contact

和

LESS：

  

nav {

     

宽度：100％;

     

高度：3EM;

     

顶部：0像素;

     

左：0像素;

     

位置是：固定;

     

背景色：＃000;

     

ul li a {

   height:100%;

   text-align:center;

   margin-top: -3.5em;

   text-decoration:none;

   padding-right: 9%;

   padding-left: 9%;

   &:hover {

       color:#7f8c8d;

   }

     

}

     

}

Answer 1

我会重新考虑标题的fixed位置，并使用absolute方法。我个人不喜欢不断使用标题，但absolute可以使用以下代码轻松更改为fixed。

以下是我通常采用的方法，以确保一切都能保持最佳状态。

<强> HTML

<div id="wrapper">
<ul id="navBar">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
</div>

<强> CSS

html, body {
    margin:0;
    padding:0;
    min-width:100%;
    min-height:100%;
}
#wrapper {
    background:#AAA;
    width:100%;
    position:absolute;
    left:0;
    top:0;
}
ul {
    padding:0;
    margin:0;
}
li {
    float:left;
    min-width:50px;
    background:#CCC;
    list-style:none;
    vertical-align:middle;
    padding:15px;
}
li a {  
    color:#000;
}

或者摆弄自己：

JS FIDDLE：http://jsfiddle.net/SinisterSystems/d83H3/1/

---

编辑：

尝试使用此媒体查询争吵。您可以调整小提琴窗口的大小。尝试将右下角预览窗口缩小到300px或更低。

JS FIDDLE：http://jsfiddle.net/SinisterSystems/d83H3/2/