欢迎使用CSDN-markdown编辑器

利用TimeOut制作导航

html部分

• 首先用Emmet写出html文件的结构

  div#nav>ul>(li>a[href=”javascript::”]+div.subnav>em.arrow+p>span>(a[href=”javascript”])*8)*8

  好处：

  ​ 用Emmet写html速度很快，而且结构一目了然，在sublime中的快捷键是ctrl + alt + enter。

• 然后补充相应的导航内容

<div id="nav">        <ul>            <li>                <a href="javascript::">站长直接</a>            </li>            <li>                <a href="javascript::">行业资讯</a>                <div class="subnav">                    <em class="arrow"></em>                    <p>                        <span>                            <a href="javascript:;">业界动态</a>|                            <a href="javascript:;">收购融资</a>|                            <a href="javascript:;">门户动态</a>|                            <a href="javascript:;">搜索引擎</a>|                            <a href="javascript:;">网络游戏</a>|                            <a href="javascript:;">电子商务</a>|                            <a href="javascript:;">广告传媒</a>|                            <a href="javascript:;">厂商开发</a>                        </span>                    </p>                </div>            </li>            <li>                <a href="javascript::">站长在线</a>                <div class="subnav">                    <em class="arrow"></em>                    <p><span>                        <a href="javascript:;">站长报道</a>|                        <a href="javascript:;">好站推荐</a>|                        <a href="javascript:;">站长聚会</a>|                        <a href="javascript:;">站长访谈</a>|                        <a href="javascript:;">站长茶馆</a>|                        <a href="javascript:;">网站排行</a>                    </span></p>                </div>            </li>            <li>                <a href="javascript::">网站运营</a>                <div class="subnav">                    <em class="arrow"></em>                    <p><span>                        <a href="javascript:;">建站经验</a>|                        <a href="javascript:;">策划盈利</a>|                        <a href="javascript:;">搜索优化</a>|                        <a href="javascript:;">网站推广</a>|                        <a href="javascript:;">免费资源</a>                    </span></p>                </div>            </li>            <li>                <a href="javascript::">设计在线</a>                <div class="subnav">                    <em class="arrow"></em>                    <p><span>                        <a href="javascript:;">酷站推荐</a>|                        <a href="javascript:;">网页设计</a>|                        <a href="javascript:;">WEB标准</a>|                        <a href="javascript:;">视频处理</a>|                        <a href="javascript:;">设计活动</a>                    </span></p>                </div>            </li>            <li>                <a href="javascript::">网络编程</a>                <div class="subnav">                    <em class="arrow"></em>                    <p><span>                        <a href="javascript:;">Asp编程</a>|                        <a href="javascript:;">Php编程</a>|                        <a href="javascript:;">.Net编程</a>|                        <a href="javascript:;">Xml编程</a>|                        <a href="javascript:;">Access</a>|                        <a href="javascript:;">Mssql</a>|                        <a href="javascript:;">Mysql</a>                    </span></p>                </div>            </li>            <li>                <a href="javascript::">联盟资讯</a>                <div class="subnav">                    <em class="arrow"></em>                    <p><span>                        <a href="javascript:;">联盟动态</a>|                        <a href="javascript:;">联盟介绍</a>|                        <a href="javascript:;">联盟点评</a>|                        <a href="javascript:;">网赚技巧</a>                    </span></p>                </div>            </li>            <li>                <a href="javascript::">服务器</a>                <div class="subnav">                    <em class="arrow"></em>                    <p><span>                        <a href="javascript:;">Web服务器</a>|                        <a href="javascript:;">Ftp服务器</a>|                        <a href="javascript:;">Mail服务器</a>|                        <a href="javascript:;">Dns服务器</a>|                        <a href="javascript:;">Win服务器</a>|                        <a href="javascript:;">Linux服务器</a>|                        <a href="javascript:;">安全防护</a>|                        <a href="javascript:;">虚拟主机</a>                    </span></p>                </div>            </li>        </ul>    </div>

css部分

我这是看着代码想的写css应该的每部分的作用，同时也有利于设计html的层次结构

• 首先设置一般的所有默认属性

body,div,ul,li,p{  margin:0;  padding:0;}body{  font:12px/1.5 Arial;}ul{  list-style-type:none;}

• 这个导 航栏的背景主要用的是一个图片

#nav,#nav ul,#nav ul li,#nav ul li a:hover,#nav .subnav,#nav .subnav p,#nav .subnav p span,#nav .subnav .arrow{background:url(http://fgm.cc/learn/lesson4/img/nav_bg.png) no-repeat;}

* 导航的css的用法解释

/*最外层设置宽度，位置*/#nav{position:relative;/*对二级标题的位置设置有用*/width:910px;background-position:0 -36px;/*这是设置最左边的背景，属性值是相对于原来的位置偏移多少*/margin:10px auto;}/*ul设置高度还有整体的导航栏的左右宽度,多余的部分都隐藏起来*/#nav ul{height:36px;line-height:36px;margin-left:10px;padding-right:10px;overflow:hidden;background-position:right -72px;/*设置最右边的背景*/}/*ul的li需要全部靠左浮动，浮动后元素就可以设置宽高*/#nav ul li{float:left;width:110px;margin-left:-2px;background-position:0 -108px;}/*主要是设置字大小，颜色，居中显示，去掉<a>原来的修饰*/#nav ul li a{font-size:14px;color:#fff;width:102px;display:block;text-align:center;text-decoration:none;margin:0 2px 0 4px;}/*设置hover后的变化*/#nav ul li a:hover{font-weight:700;background-position:-3px -144px;}/*下面是设置二级标题，类似于一级标题*/#nav .subnav{display:none;position:absolute;top:41px;width:auto!important;min-width:110px;height:27px;line-height:27px;white-space:nowrap;/*规定段落中的文本不进行换行*/background-position:0 -180px;}#nav .subnav p{margin-left:10px;padding-right:10px;background-position:right -234px;}#nav .subnav p span{display:block;color:#235e99;background-repeat:repeat-x;/*沿着x轴的方向重复*/background-position:0 -207px;}#nav .subnav p a{font-size:12px;display:inline;/*a标签会继承父元素的display*/color:#235e99;text-decoration:none;margin:0 5px;padding:0 2px;}#nav .subnav p a:hover{font-weight:400;background-image:none;border-bottom:2px solid;}#nav .subnav .arrow{position:absolute;top:-4px;display:block;width:11px;height:5px;background-position:0 -261px;}

JavaScript部分

• 首先是一个方法集合，容易得到元素

var get={    //通过id得到元素    byId:function(id){        return document.getElementById(id);    },    //得到oParent里包含的所有带有sClass的元素    byClass:function(sClass, oParent){        var aClass = [];        var reClass = new RegExp("(^|)"+sClass+"(|$)");        //oParent子代中所有元素        var aElem = this.byTagName("*",oParent);        for(var i=0; i < aElem.length; i++){            //包含sClass            reClass.test(aElem[i].className)&&aClass.push(aElem[i]);        }        return aClass;    },    //在obj里得到标签是elem的元素组    byTagName:function(elem,obj){        return (obj||doocument).getElementsByTagName(elem)    }};

• 元素的动态变化

window.onload=function(){    var oNav = get.byId("nav");    var aLi = get.byTagName("li",oNav);    var aSubNav = get.byClass("subnav",oNav);    var oSubNav = oEm = timer = null;    var i = 0;    for(i=1;i<aLi.length;i++){        aLi[i].onmouseover = function(){            //隐藏所有的子菜单            for(i=0;i<aSubNav.length;i++){                aSubNav[i].style.display = "none";            }            //获得该项下的子菜单            oSubNav = get.byClass("subnav",this)[0];            //获取该项下的指示箭头            oEm = get.byTagName("em",this)[0];            //显示该项下的菜单            oSubNav.style.display = "block";            //判断显示区域，与nav的position属性设置为relative对应            oNav.offsetWidth - this.offsetLeft > oSubNav.offsetWidth?oSubNav.style.left = this.offsetLeft + "px":oSubNav.style.right=0;            //计算指标箭头显示位置            oEm.style.left = this.offsetLeft - oSubNav.offsetLeft + 50+ "px";            clearTimeout(timer);            //阻止事件冒泡，后面有解释原因            oSubNav.onmouseover = function(event){                (event||window.event).cancelBubble = true;                clearTimeout(timer);            }        };        aLi[i].onmouseout = function(){            //300毫秒后display为none            timer = setTimeout(function(){                oSubNav.style.display = "none";            },300)        }    }};

为什么js要阻止事件冒泡
某个DOM节点绑定了某事件监听器，本来是想当该DOM节点触发事件，才会执行回调函数。结果是该节点的某后代节点触发某事件，由于事件冒泡，该DOM节点事件也会触发，执行了回调函数，这样就违背了最初的本意了。
在这个例子中，二级元素的鼠标放上去，会触发一级标题的onmouseover函数，而这个就是调用就会形成无限循环，一直调用，所以此处阻止冒泡，就触发不了父元素的onmouseover事件了。