58、水平导航栏+导航栏跟随+导航栏下划线滑动效果

来源：互联网发布：os系统教程加装windows 编辑：程序博客网时间：2024/06/03 11:23

先放代码：

HTML：

<!doctype html><html><head><meta charset="utf-8"><title>Home</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><link href="css/Home.css" rel="stylesheet" type="text/css" media="screen"><script src="//cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script></head><body>    <div id="logo_bar" class="logo-bar">logo</div>    <ul id="nav_bar" class="nav-bar ">        <li>            <a href="#">首 页</a>        </li>        <li>            <a href="#">商 城</a>        </li>    </ul><script type="text/javascript">    $(function(){        var nav=$("#nav_bar"); //得到导航对象        var win=$(window); //得到窗口对象        var doc=$(document);//得到document文档对象。        win.scroll(function(){          if(doc.scrollTop()>=40){            nav.addClass("nav-bar-fixed");          }else{            nav.removeClass("nav-bar-fixed");          }        })    })</script></body></html>

CSS：

@charset "utf-8";body {    height: 2420px;    background-color: #CDE1FB;    padding: 0;    marging: 0}/*logo条*/.logo-bar {    background-color: #C4B956;    height: 40px;    font-size: large;    vertical-align: middle;    text-align: center;    line-height: 40px;}/*导航条*/.nav-bar {    height: 40px;    background-color: #98E1C9;    text-align: center;    font-size: large;    line-height: 40px;    padding: 0;    marging: 0;    width: 100%;}/*导航条跟随*/.nav-bar-fixed {    position: fixed;    top: 0px;    z-index: 1;    background-color: #FF6668;    opacity: 0.68;    width: 100%;}/*导航条下li*/.nav-bar> li {    display: inline-block;/*让li水平排列*/}/*导航条下a*/.nav-bar> li > a {    display: block;    position: relative;    text-decoration: none;    color: #000000;    -webkit-transition: color .1s ease-in-out;    transition: color .1s ease-in-out;    margin-left: 75px;  /*颜色递进*/    margin-right: 75px;}.nav-bar> li > a:hover {    color: #00ABFF;}/*导航栏下划线效果右进右出，需要设置父元素li：position: relative;*/.nav-bar> li > a:after {    content: " ";    position: absolute;    left: 0;    bottom: 0;    width: 100%;    border-bottom: solid 1px;    transform: scaleX(0);    transform-origin: right;/*改为center就是中间向外延伸*/    -webkit-transition: transform 0.3s ease-in-out;    transition: transform 0.3s ease-in-out;    color: #0023FF;}/*导航栏下划线效果：右进改为左进*/.nav-bar> li > a:hover:after {    transform-origin: left;    transform: scaleX(1);}

ok，开始正题。
首先要清楚导航栏的元素结构，其中<a href="#"></a>里面可以使用<span></span>将文字包围，这里因为制作文字下划线效果的需要，直接添加文字

<ul id="nav_bar" class="nav-bar ">    <li>        <a href="#">首 页</a>    </li>    <li>        <a href="#">商 城</a>    </li></ul>

想让导航栏变成水平，关键是：其中有关display属性的三种不同效果的区别可自行百度

/*导航条下li*/.nav-bar> li {    display: inline-block;/*让li水平排列*/}

顺便给导航条的ul加上效果后，水平导航栏就差不多了。

第二步是导航栏跟随：简单来说就是js读取页面高度并判断，达到一定高度的时候就为导航条加一个类（即一个新的样式，该样式根据浏览器进行绝对定位），小于这个高度就移除这个类。
HTML：

<script type="text/javascript">    $(function(){        var nav=$("#nav_bar"); //得到导航对象        var win=$(window); //得到窗口对象        var doc=$(document);//得到document文档对象。        win.scroll(function(){          if(doc.scrollTop()>=40){            nav.addClass("nav-bar-fixed");          }else{            nav.removeClass("nav-bar-fixed");          }        })    })</script>

CSS：

/*导航条跟随*/.nav-bar-fixed {    position: fixed;    top: 0px;    z-index: 1;    background-color: #FF6668;    opacity: 0.68;    width: 100%;}

第三步，导航栏下划线效果，这个最刺激：
CSS：

/*导航条下a*/.nav-bar> li > a {    display: block;    position: relative;    text-decoration: none;    color: #000000;    -webkit-transition: color .1s ease-in-out;    transition: color .1s ease-in-out;    margin-left: 75px;  /*颜色递进*/    margin-right: 75px;}.nav-bar> li > a:hover {    color: #00ABFF;}

这里分为上下两部分：
上面部分：主要是对a标签的原始效果进行一些修改，去掉本身的下划线什么的，顺便添加一个鼠标滑过时的颜色渐变效果
下面部分：
首先要对父元素li设置position: relative，然后在对a元素后面添加一个空的内容（不懂的去百度:after），并设置position: absolute（absolute是相对除了static外的第一个父元素定位的，如果没有对li设置position: relative，那么这个空内容会跑到body后面去了）。
接下来解释一下transform: scaleX(0);和width: 100%;，transform: scaleX(0);的意思是缩小到原来的0%，就是隐藏了；组合在一起的意思就是原本的宽度是100%，但先设置为隐藏；在:hover时变为transform: scaleX(1);，即出现。
此时的效果是鼠标移入时下划线出现，鼠标移走时下划线消失。
1、2、3处少了几个关键的效果，接下来讲解：
先是2：transition: transform 0.3s ease-in-out;，这句话加上去之后，效果会变成下划线有划入的效果，效果为从中间向两边延伸。
在1处加入：transform-origin: right;，效果会变成从右向左慢慢出现，再原样消失
在3处加入：transform-origin: left;，效果会变成，从左到右慢慢出现，再继续往右逐渐消失

/*导航栏下划线效果右进右出，需要设置父元素li：position: relative;*/.nav-bar> li > a:after {    content: " ";    position: absolute;    left: 0;    bottom: 0;    width: 100%;    border-bottom: solid 1px;    transform: scaleX(0);    1    2    color: #0023FF;}.nav-bar> li > a:hover:after {    3    transform: scaleX(1);}

懒得截图了，也就2个文件复制粘贴一下就完了

ps：a标签的如果没有href属性时，鼠标样式是会变成文本选择而不是手指形状

0 0