053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

网站设计中如何创建一个固定的导航菜单栏

时间:2016-10-18

网站设计中如何创建一个固定的导航菜单栏
一般导航菜单,随着滚动条的下移,就看不到导航菜单,如何才可以让导航菜单始终显示呢。先看一下演示效果

演示地址
d

下面看看制作过程:

1  html代码

<nav class="fixed-nav-bar">
  <!-- 导航内容 -->
</nav>

我们给我们的HTML元素的class属性fixed-nav-bar这样我们可以应用上面的样式规则。
 

2.css代码
.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  background-color: #00a087;
}
我们分析一下css规则

最后的三个属性(宽度、高度和background-color)变量,改变它们的值根据您的需要。

让我们来谈谈四个关键CSS属性。
 
position: fixed;
给 position 属性值的固定位置相对于视窗。这个属性声明让导航栏div固定不动,即使用户滚动文档。
 
  top: 0;
  left: 0;
right:0;
设置上 左右的属性值为0 不让导航栏出现页边距和填充。
 
提示:如果你想长期固定导航在窗口的底部的,这是另一种常见的设计模式,很简单就是把 top: 0 改成 bottom: 0。
  z-index: 9999;
 
设置z-index的属性 让导航栏div 始终在层的最上方 ,不至于滚动滚动条时覆盖掉导航栏

这样最简单的固定导航栏就制作好了。不明白之处留言 或者加qq


相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP