一款滑动门效果的导航菜单
效果图：
代码如下：
<br/><br/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd"><br/><html xmlns="http://www.w3.org/1999/xhtml"><br/><head><br/><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br/><title>鼠标悬停块状导航菜单效果（滑动门）</title><br/><style type="text/css"><br/> *{ margin:0;padding:0;}<br/> body{ font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-align:center;}<br/> #warpper{ position:absolute; left:100px; top:100px;}<br/> h5{ float:left;}<br/> a{ text-decoration:underline; cursor:pointer; font-weight:bold;}<br/> dl{ height:18px; line-height:18px; background:#f7f7f7; padding:0 10px;}<br/> dt,.normal{ float:left; padding:0 10px; border-right:1px solid #ccc; text-decoration:none; width:auto; cursor:pointer;}<br/> dt.over{ position:relative;border:1px solid #86e5f0; padding:0 10px 15px 10px; border-bottom:1px solid #caf1f1; margin:-1px 0 0 -1px; z-index:1000; color:#ff6026; text-decoration:underline; background:#caf1f1; height:22px; }<br/> li{ float:left; list-style-type:none; margin:5px 10px; width:120px;}<br/> dl dd{ position:absolute; width:500px; left:0;top:37px!important; border:1px solid #86e5f0; background:#caf1f1; filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#cccccc); padding:10px 0;}<br/> .block{ display:block;}<br/> .none{ display:none;}<br/></style><br/><script language="javascript"><br/> function XMenu(o){<br/> this.$ = function(o){ return document.getElementById(o);}<br/> this.$$ = function(o, str){ return o.getElementsByTagName(str);}<br/> this.obj = o;<br/> this.bind();<br/> }<br/> XMenu.prototype = {<br/> bind : function(){<br/> var xxx = this.$(this.obj); //得到传对的对象。在这里，我没有做容错处理。没有判断这个对象存在不存在，如果需要请自己判断。<br/> var xdt = this.$$(xxx, 'dt');//得到这个对象下的所有的dt<br/> var xdd = this.$$(xxx, 'dd');//得到这个对象下的所有的dd<br/> var xdtl = xdt.length;//取得有几个dt<br/> xxx['obj'] = xdt[0];//给传的对象添加一个属性obj，值为 第一个 dd<br/> for(var i=0; i<xdtl; i++){//循环 该对象下的所有的 dd，并为它添加onmouseover事件。<br/> xdt[i]['dd'] = xdd[i];//给当前对象添加一个属性dd,值为，与它相对应的dd对象，它的作用是在移动到当前对象的时候给与它相对应的dd设置样式用的。<br/> xdt[i]['div'] = xxx;//给当前对象添加一个属性div，值为，调用XMenu时，所传入的参数所对应的对象。<br/> xdt[i].onmouseover = function(){<br/> this['div']['obj'].className = 'normal';<br/> this['div']['obj']['dd'].className = 'none';<br/> this.className = 'over';<br/> this['dd'].className = 'block';<br/> this['div']['obj'] = this;<br/> }<br/> }<br/> xxx.onmouseout = function(){<br/> var d = this;//用来保存当前的xxx对象<br/> this.hide = setTimeout(function(){<br/> d['obj'].className = 'normal';<br/> d['obj']['dd'].className = 'none';<br/> d = null;<br/> },2000); //鼠标移出后几秒隐藏。在这里设置时间[秒数*1000]<br/> }<br/> xxx.onmouseover = function(){<br/> if(this.hide){<br/> clearTimeout(this.hide);<br/> }<br/> }<br/> }<br/> }<br/> window.onload = function (){//在文档onload事件绑定事件处理函数。<br/> new XMenu('warpper'); //传入id。该对象下的所有dt将会被绑定onmouseover事件。<br/> }<br/></script><br/></head><br/><body><br/> <dl id="warpper"><br/> <h5>拼音检索：</h5><br/> <dt>A</dt><br/> <dd class="none"><br/> <ul><br/> <li><a herf="http://www.xunzou.com">Adidas</a></li><br/> <li><a herf="http://www.xunzou.com">Adidas</a></li><br/> <li><a herf="http://www.xunzou.com">Adidas</a></li><br/> <li><a herf="http://www.xunzou.com">Adidas</a></li><br/> <li><a herf="http://www.xunzou.com">Adidas</a></li><br/> <li><a herf="http://www.xunzou.com">Adidas</a></li><br/> <li><a herf="http://www.xunzou.com">Adidas</a></li><br/> <li><a herf="http://www.xunzou.com">Adidas</a></li><br/> <li><a herf="http://www.xunzou.com">Adidas</a></li><br/> <li><a herf="http://www.xunzou.com">Adidas</a></li><br/> </ul><br/> </dd><br/> <dt>B</dt><br/> <dd class="none"><br/> <ul><br/> <li><a herf="http://www.xunzou.com">BAND</a></li><br/> <li><a herf="http://www.xunzou.com">BAND</a></li><br/> </ul><br/> </dd><br/> <dt>C</dt><br/> <dd class="none"><br/> <ul><br/> <li><a herf="http://www.xunzou.com">COOL</a></li><br/> <li><a herf="http://www.xunzou.com">COOL</a></li><br/> <li><a herf="http://www.xunzou.com">COOL</a></li><br/> </ul><br/> </dd><br/> <dt>D</dt><br/> <dd class="none"><br/> <ul><br/> <li><a herf="http://www.xunzou.com">DAY</a></li><br/> <li><a herf="http://www.xunzou.com">DAY</a></li><br/> <li><a herf="http://www.xunzou.com">DAY</a></li><br/> <li><a herf="http://www.xunzou.com">DAY</a></li><br/> </ul><br/> </dd><br/> <dt>E</dt><br/> <dd class="none"><br/> <ul><br/> <li><a herf="http://www.xunzou.com">ENTER</a></li><br/> <li><a herf="http://www.xunzou.com">ENTER</a></li><br/> <li><a herf="http://www.xunzou.com">ENTER</a></li><br/> <li><a herf="http://www.xunzou.com">ENTER</a></li><br/> <li><a herf="http://www.xunzou.com">ENTER</a></li><br/> </ul><br/> </dd><br/> <dt>F</dt><br/> <dd class="none"><br/> <ul><br/> <li><a herf="http://www.xunzou.com">Fancl</a></li><br/> <li><a herf="http://www.xunzou.com">Fancl</a></li><br/> <li><a herf="http://www.xunzou.com">Fancl</a></li><br/> <li><a herf="http://www.xunzou.com">Fancl</a></li><br/> <li><a herf="http://www.xunzou.com">Fancl</a></li><br/> <li><a herf="http://www.xunzou.com">Fancl</a></li><br/> <li><a herf="http://www.xunzou.com">Fancl</a></li><br/> <li><a herf="http://www.xunzou.com">Fancl</a></li><br/> <li><a herf="http://www.xunzou.com">Fancl</a></li><br/> <li><a herf="http://www.xunzou.com">Fancl</a></li><br/> <li><a herf="http://www.xunzou.com">Fancl</a></li><br/> <li><a herf="http://www.xunzou.com">Fancl</a></li><br/> <li><a herf="http://www.xunzou.com">Fancl</a></li><br/> <li><a herf="http://www.xunzou.com">Fancl</a></li><br/> </ul><br/> </dd><br/> </dl><br/></body><br/></html><br/><br/>
0 条留言
我要留言