首页 文章

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

提问于
浏览 次
0

到目前为止，我只是成功地使导航栏固定，并且链接仅在设备上有些兼容 . 我想要这个效果，媒体查询强制菜单进入图像中包含的导航 . http://getbootstrap.com/examples/navbar-fixed-top/ . 我不喜欢bootstrap，我希望将来能够自己做这件事 . 有小费吗？

这是我的代码：

玉：

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

里

a（href =“/”）主页

a（href =“/ about”）关于

a（href =“/ contact”）联系方式

和

减：

nav {width：100％;高度：3EM;顶：0像素;左：0像素;位置是：固定;背景色：＃000; ul li a {身高：100％;

文本对齐：中心;

margin-top：-3.5em;

文字修饰：无;

padding-right：9％;

padding-left：9％;

＆：hover {

颜色：＃7f8c8d;

}
}}

html css pug

1 回答

  • 0

    我会重新考虑头部的 fixed 定位并改为使用 absolute 方法 . 我个人不喜欢不断地按照我的方式使用 Headers ，但是 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/

    回复于

相关问题