关于这样的菜单制作,如图
关于HTML/CSS部分的 运用到了css精灵技术,几个注意点,
左右部分分别用一个标签,然后用绝对定位分别控制,中间部分相对定位平铺
菜单选择项这里,用两个标签来控制,外面的标签背景是右边红色框框部分,里面标签是左边红色框框部分。
二。关于javascript原理
菜单选项有2种状态“normal”,“active”
隐藏项有2种状态"dispaly:none","display:none"
分别定义两个数组,分别存放菜单选项(“首页”,“关于我们”。。。)和隐藏项(鼠标划过菜单选项弹出的部分),还要定义一个计时变量timer,
遍历数组,给每项绑定事件,菜单选项和隐藏项分别鼠标划过,如果有计时变量则清楚,遍历所有,代码如下:
for(var i=0;i<len;i++) { 菜单选项[i].className="normal"; 隐藏项[i].style.display="none"; } 当前菜单选项.className="active"; 当前隐藏项.style.display="block";
鼠标移出,代码如下
timer=setTimeout(function(){ 当前菜单选项.className="normal"; 当前隐藏项.style.display="none"; },1000);
用计时变量的目的是为了不让鼠标选不中弹出的隐藏项 ,因为如果不用的话,鼠标移出,菜单项和隐藏项中间有空隙,会马上隐藏,就永远都选不中