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

Question

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

这是我的代码:

Jade :

head

link(rel="stylesheet", href="/main.css")

nav

ul

   li

       a(href="/") Home

       a(href="/about") About

       a(href="/contact") Contact

和

减少:

nav {

width:100%;

height:3em;

top:0px;

left:0px;

position:fixed;

background-color:#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 方法。我个人不喜欢在我的方式中不断使用 header ，但是可以使用以下代码轻松地将 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/

---

编辑:

为您的媒体查询争吵试试这个。您可以调整 fiddle 窗口的大小。尝试将右下角的预览窗口缩小到 300 像素或更小。

JS fiddle :http://jsfiddle.net/SinisterSystems/d83H3/2/