整体思路就是写一个动态的导航栏,鼠标划到.onmouseover
每个选项上显示包含的内容(下一级的nav),鼠标离开.onmouseout
0.3秒(300毫秒)后,下一级nav自己消失display:none;
,此处用到延迟setTimeout();
页面布局方面,导航栏使用了雪碧图,给每一部分设置好background-position:
导航栏每一项和下一级nav的每一项有:hover
效果。
Html部分,一级nav是ul和li,每个选项是<a>
。二级nav包含在每一个li内,箭头是<em>
,而二级nav没有再采用ul,而是设置了<p>
和<span>
,每个选项依然是<a>
。
缩进!一定记得缩进!!!
新接触到的:white-space:nowrap;
CSS的white-space属性,规定如何处理元素中的空白符,nowrap是不换行。
script部分,自己写不出来这么完善的。原版:
<script>
//get就是一对象Object,包含以下几个函数,按Id查,按className查,按TagName查
var get = {
byId: function(id) {
return document.getElementById(id)
},
byClass: function(sClass, oParent) {
var aClass = [];
var reClass = new RegExp("(^| )" + sClass + "( |$)");
var aElem = this.byTagName("*", oParent);
for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
return aClass
},//根据className获取元素
byTagName: function(elem, obj) {
return (obj || document).getElementsByTagName(elem)
}
};//建立外部函数,调用
window.onload = function ()
{
var oNav = get.byId("nav");//获取整个导航栏div
var aLi = get.byTagName("li", oNav);//获取nav下的li组
var aSubNav = get.byClass("hidden", oNav);//获取所有hidden类
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("hidden", this)[0];
//获取该项下的指示箭头
oEm = get.byTagName("em", this)[0];
//显示该项下的子菜单
oSubNav.style.display = "block";
//判断显示区域
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)
}
};
//鼠标离开nav 0.3秒后subnav消失
aLi[i].onmouseout = function ()
{
timer = setTimeout(function () {
oSubNav.style.display = "none"
},300)
}
}
};
</script>
动态计算了下一级nav的显示位置(居左/右),和箭头位置:
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。
obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
阻止事件冒泡cancelBubble