导航特效:纯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%的人还看了以下文章

  • 3种纯CSS/jquery实现的表格隔行变色,鼠标悬停:hover变色效果

    表格隔行显示不同背景颜色,表格奇数行和偶数行交替显示不同的背景颜色。 一、纯CSS3实现表格隔行变色 关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…

    2018年9月5日
    4.1K0
  • 纯CSS3制作的垂直手风琴效果,点击标题展开详细介绍

    纯CSS3制作的垂直手风琴效果 CSS代码: @import url(“css/font-awesome.css”); * { margin: 0; padding: 0; } *, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; font: 16px/1 ‘O…

    2018年12月26日
    2.5K0
  • JS+CSS实现点击弹出窗口,带关闭按钮(非常简单)

    最近做网页设计项目,要求点击图片后弹出窗口,在新弹出窗口中播放视频。从网上找了很多代码,要么非常复杂,要么兼容性有问题,反复对比多种实现方法,最后确定代码如下: <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″/> <title>JS+CSS实现…

    2018年5月9日
    5.4K0
  • 中国省、市区二级联动下拉选择框-JS源码

    中国省、市区二级联动下拉选择框,包含所有省份及市县信息。 当选择省份下拉选择框时,市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”,市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里(js/common.js),中国网页设计在js文件里定义了两个数组,分别存放省份和对应的市区。 //省份 var pr…

    2019年6月5日
    3.9K0
  • CSS+JS制作纵向点击展开的二级导航菜单

    网页制作时,如产品分类目录、导航等,需要制作纵向二级导航菜单,点击展开分类显示子目录,再点击收缩起目录。 中国网页设计分享的二级导航菜单使用CSS+JS制作,调用简单方便,可移植、可修改。 网页HTML代码(放在body区域): <div id=”my_menu” class=”sdmenu”> <div> <span>教…

    2018年9月19日
    3.2K0
  • 如何去除导航栏最后一个不需要的分隔线

    网页导航栏制作时,菜单项之间常用1像素细线做分隔,如上图。 给菜单栏菜单项添加分隔线代码如下: /* 给菜单栏菜单项添加分隔线 */ .nav li { border-right: 1px solid #666; } 最后一个菜单项右边就不需要这个边框线了,如何处理呢? 去除最后一个菜单项右边的分隔线,代码 /* 移除分隔线 */ .nav li:last-…

    2018年7月26日
    3.4K0

发表回复

登录后才能评论