导航特效:纯CSS实现始终显示在页面顶部的导航条

今天给大家分享的导航特效是始终显示在页面顶部的导航条,随着页面滚动,导航条始终显示的屏幕上方。

该导航条跟随页面滚动,始终在屏幕上方显示,使用纯CSS代码实现,精简高效。

导航特效:纯CSS实现始终固定在顶部的导航条

始终显示在页面顶部的导航条的HTML代码:

<div id="xin126zhijia">
  <ul class="jd_menu" id="xin126_nav">
    <li><a href='http://www.125jz.com/'>首页</a></li>
    <li><a href='http://www.125jz.com/operate' >网站运营</a></li>
    <li><a href='http://www.125jz.com/course/webdevelopment' >网页制作</a></li>
    <li><a href='http://www.125jz.com/resources' >建站素材</a></li>  
    <li><a href='#' >jquery特效</a></li>
    <li><a href='#' >在线客服</a></li>
    <li><a href='#' >图片特效</a></li>
  </ul>
</div>

把以上代码复制到<body></body>之间

始终显示在页面顶部的导航条CSS代码:

* {
  margin: 0px;
  padding: 0px;
}
ul, li {
  list-style:none;
}
#xin126zhijia {
  width: 980px;
  text-align: left;
  height: 50px;
  margin: 0px auto;
  z-index:100;
  _position: relative;
  _top:0px;
}
#xin126_nav {
  width: 980px;
  float: left;
  display: block;
  z-index: 100;
  overflow: visible;
  position: fixed;
  top: 0px; /* position fixed for IE6 */
  _position: absolute;
 _top: expression(documentElement.scrollTop + "px");
  background:#2571B7;
  height: 50px;
}
#xin126_nav li {
  width:auto;
  height:50px;
  line-height:50px;
  padding:0px 15px;
  float:left;
  text-align:center;
}
#xin126_nav li:hover {
  background:#C00;
}
#xin126_nav li a {
  color:#fff;
  font-size:14px;
  text-decoration:none;
}
#xin126_nav li a:hover {
  text-decoration:none;
  color:#fff;
}

以上代码可以保存到单独的CSS文件,然后在导航页面引用:

<link href="css/xin126zhijia.css" type="text/css" rel="stylesheet" />

以上就是《纯CSS实现的始终显示在页面顶部的导航条》全部内容,希望对网页制作的朋友有所帮助。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1234.html

(2)
江山如画的头像江山如画管理团队
上一篇 2018年2月12日 上午11:05
下一篇 2018年2月12日 下午12:59

99%的人还看了以下文章

  • 网页右侧可隐藏的浮动QQ在线客服源码下载

    在线客服是企业网站必不可少的在线交流渠道,本站分享的在网页右侧可隐藏的浮动QQ在线客服使用jquery编写,固定在网站右侧不随滚动条滚动,点击展开,再次点击收缩,蓝色风格,调用方便。 网页右侧可隐藏的浮动QQ在线客服效果 HTML代码: <div id=floatTools class=jz125> <div class=floatL&gt…

    2018年8月2日
    2.2K0
  • 鼠标指向图片实现放大效果-CSS3特效

    鼠标指向图片实现放大效果,多用于产品展示,可以通过Js,jquery来实现。为更好的优化网站,最好的方法还是纯css来实现。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>纯css实现鼠标指向图片放大效果|…

    2018年7月14日
    5.0K0
  • 导航特效:纯css制作三级下拉导航菜单

    一个纯CSS制作的三级导航菜单,代码非常精简,兼容各主流浏览器,是学习CSS,制作网站导航非常好的实例。

    2018年2月9日
    6.7K0
  • ScrollPicLeft.js实现的图片前后切换效果-源码下载

    ScrollPicLeft.js实现的图片的前后切换效果,适用于网页中的证书展示、推荐商品之类的栏目。 功能:可以手动点击前后切换箭头按钮,进行图片的翻页,浏览上一张,下一张的效果。 特点:代码精简,不需要使用JQuery,功能强大,使用非常的简单,便利。! 在网页引入ScrollPicLeft.js <script type=”text/javasc…

    2019年11月1日
    4.6K0
  • 带左右箭头控制的网站幻灯片轮播切换效果

    一款比较实用的带左右箭头按钮控制的jquery slider图片插件,网站幻灯片焦点图片轮播切换代码下载。 页面代码非常简洁,适合调用更改。 <div class=”slider”> <div class=”slider-img”> <ul class=”slider-img-ul”> <li><img …

    2019年4月10日
    11.5K0
  • 精美的滑出式水平导航特效

    一个精美的滑出式水平导航特效,打开页面只能看到文本链接,用户将鼠标悬停于标签上时,该导航菜单项目会滑出。 预览     下载源码 1、HTML结构 导航实现仅用一个简单的无序列表 <ul id=”navigation”> <li class=”home”><a href=””><span>Home</sp…

    2018年2月6日
    2.9K0

发表回复

登录后才能评论