PS:以下代码每次只写出有更改的地方，无更改的地方不再赘述。每一部分的格式都是:效果图——思路——代码的顺序书写，目的是希望初学者可以根据效果图，辅以思路试着自己写出代码，最后再与作者的代码作比较，希望能通过这个方法明白，实现效果的方式是多种多样的，不要只局限在作者的思路中，当然最重要的是能锻炼自己编写代码的能力。

任务概述

需要达到的效果

task goal_1

task goal_2

默认首页选中样式；
设置鼠标滑过效果：颜色变化(#f60)，宽度变化,字体变化。

所涉及知识点

布局：float；
css：元素状态切换(display)，盒模型(margin,padding)，圆角边框(border-radius),可见宽(offsetWidth)；3.JavaScript:匿名类，for循环，通过标签获得元素(getElementsByTagName), 方法自动间隔运行(setInterval/clearInterval)。

基本架构

这是一个没有任何css修饰的html代码

无序列表:

,是与导航栏语义比较贴切的标签，然后将标签放到

内部即可实现导航栏html部分。

<ul class="nav" >        <li><a href="#">首    页</a></li>        <li><a href="#">新闻快讯</a></li>        <li><a href="#">产品展示</a></li>        <li><a href="#">售后服务</a></li>        <li><a href="#">联系我们</a></li>    </ul>

登录后复制

这是导航栏默认样式，我们通过css进行初步修改

样式修改

取消默认样式

把浏览器默认的盒模型值，列表样式以及链接样式的默认样式取消，并且把字体颜色改成黑色。

    *{margin: 0;padding: 0;          font-size: 14px;}    li{list-style: none;}    a{text-decoration: none;           color: #000;}

登录后复制

设置骨架

通过将设置成块状标签，即可达到给设置宽高的目的；

通过float：left使导航栏从纵向排列变成横向排列；

通过将line-height属性设置的跟height一样，实现导航栏文字垂直居中；

通过text-aligin将导航栏文本水平居中。

li{list-style: none;float:left;}li a{display:block;width: 100px;     height: 30px;line-height: 30px;     text-aligin:center;    }

登录后复制

颜色以及细节修改

设置导航栏默认颜色，并且通过margin属性是导航标签产生间隔。

将导航栏四个角通过border-radius设置成圆角。

通过给属性设置class=on，以及伪类选择器a:hover将【首页】和【鼠标滑过】的样式颜色设置为#f60，字体颜色设置为白色。

li a{display:block;width: 100px;      height: 30px;line-height: 30px;      background-color: #efefef;      margin-left:1px;}.on,.nav li a:hover{    background-color: #f60;     color: #fff;}

登录后复制

设置导航栏的“脚”

1.通过border-bottom属性制作导航栏的“脚”；

要知道我们已经将
设置成了float，因此它已经脱离了文本档，那么其父元素的默认height值也就为0，需要自己设定；3.通过margin,padding属性移动导航栏主体部分。

ul{height:50px;    border-bottom:5px solid #f60;    padding-left:20px;}li{margin-top:20px;}

登录后复制

鼠标划过改变行高

通过hover设置鼠标划过后的行高2.此时会发现导航栏向下移动了，通过将margin设置为负值，向上移动。

.on,.nav li a:hover{   height: 40px;   line-height: 40px;   margin-top: -10px;}

登录后复制

以上是css部分，下面讲JavaScript。

鼠标划过自动伸缩

分为两部分来写：自动伸和自动缩

鼠标划过自动伸

效果：鼠标划过导航栏自动延伸。

首先要获得标签元素，可以通过getElementsByTag；

要给每一个标签设置，可以通过for循环遍历；

鼠标划过事件通过 onmouseover设置；

在方法里通过var变量获得当前标签元素。

设置自动延伸，可以通过setInterval方法，让方法以固定的时间为间隔，反复执行；

此时导航栏会无限延伸，通过if设置条件，设置导航栏延伸停止时机。

window.onload=function(){    var aA=document.getElementsByTagName("a");    for(var i=0;i<aA.length;i++){        aA[i].onmouseover=function(){            var This=this;            clearInterval(This.time);//初始化            This.time=setInterval(function(){                This.style.width=This.offsetWidth+8+"px";                    if(This.offsetWidth>=150){                    clearInterval(This.time)                    }                },30);            }        }    }

登录后复制

鼠标离开自动缩

最终图片，与文章开头图片相同效果：鼠标离开导航栏自动缩到原始状态。

思路同上，只是数值相反。

aA[i].onmouseout=function(){    var This = this;    clearInterval(This.time);//初始化        This.time=setInterval(function(){        This.style.width=This.offsetWidth-8+"px";            if(This.offsetWidth<=100){                clearInterval(This.time);            }        },30);    }}

登录后复制

最终代码

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">    <title>导航栏v1.0</title>    <style type="text/css">        /*@group general style*/        *{margin: 0;padding: 0;font-size: 14px;}        a{color: #333;text-decoration: none;}        ul{            list-style: none;border-bottom: 5px solid #f60;height: 50px;            padding-left: 30px;        }        li{            margin-top:20px;            float: left;}        /*@group overrides*/        .nav li a{            display: block;            text-align: center;            height: 30px;            line-height:30px;            width: 120px;            background-color: #efefef;                        border-radius: 5px;        }        .nav .on,.nav li a:hover{            color: #fff;            background-color: #f60;            height: 40px;            line-height: 40px;            margin-top: -10px;        }    </style></head><body>    <ul class="nav" >        <li><a class="on" href="#">首    页</a></li>        <li><a href="#">新闻快讯</a></li>        <li><a href="#">产品展示</a></li>        <li><a href="#">售后服务</a></li>        <li><a href="#">联系我们</a></li>    </ul>    <script type="text/javascript">    window.onload=function(){        var aA=document.getElementsByTagName("a");        for(var i=0;i<aA.length;i++){            aA[i].onmouseover=function(){                // 设置方法停止的时机                clearInterval(this.time);                // 此处this为当前a标签                var This=this;                // 设置方法每30毫秒运行一次                // 其中offsetWidth:对象的可见宽度，包括本身width+padding-border                // 当offsetWidth>=120时，程序停止。                This.time=setInterval(function(){                    This.style.width=This.offsetWidth+8+"px";                    if(This.offsetWidth>=160){                    clearInterval(This.time);                }                },30);            }            aA[i].onmouseout=function(){                clearInterval(this.time);//初始清理                var This=this;                This.time=setInterval(function(){                    This.style.width=This.offsetWidth-8+"px";                    if(This.offsetWidth<=120){                        clearInterval(This.time);                    }                },30);            }            }    }    </script></body></html>

登录后复制

注：此项目灵感来自慕课网

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn