3款蓝色简洁实用的下拉菜单和网页右键菜单特效代码免费下载导航菜单网站代码-简洁设计网

当前位置：简洁设计网 > 网站代码 > 网页特效 > 导航菜单 > 代码信息: 3款蓝色简洁实用的下拉菜单和网页右键菜单特效代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>3款蓝色简洁实用的下拉菜单和<a class="channel_keylink" href="http://www.baidu.com/s?tn=designba&bs=%D4%AA%B5%A9&f=8&wd=网页+site%3Ajianjie8.com" target="_blank">网页</a>右键菜单特效代码，dede之家整理收集。</title> <style type="text/css"> #ss,#sss{ width:430px; height:28px; background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_1254192730G9x9.gif); font-size:13px; color:#FFFFFF; } .c{ width:140px; height:auto; border:1px solid #9C9A9C; position:absolute; background-color:#FFFFFF; background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923146wVz.gif); background-repeat:repeat-y; padding:2px; z-index:10; } .hr{ display:block; overflow:hidden; height:1px; width:110px; background-color:#666666; margin:2px; margin-left:26px; } #ss div,#sss div{ color:#FFFFFF; height:28px; width:80px; float:left; line-height:28px; vertical-align:middle; text-align:center; } #ss div.title,#sss div.title{ color:#1f3a87; } #ss div img,#sss div img{ vertical-align:text-bottom; border:0px; margin-right:5px; padding-top:6px; } .l{ display:block; height:26px; width:99%; color:#1f3a87; font-size:12px; line-height:26px; vertical-align:middle; margin:0 auto; } .disabled{ color:#999999; } .list{ *background-color:#FFFFFF; border:1px solid transparent; *border-color:white; filter:chroma(color=white); } .bg{ *background-color:#FFFFFF; border:1px solid transparent; *border-color:white; filter:chroma(color=white); background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132yyW.gif); background-repeat:no-repeat; background-position: 110px 4px; } .bg img,.list img,.disabled img{ vertical-align:text-bottom; border:0px; margin-right:10px; padding-top:4px; } .listover{ border:1px solid #ADCFF7; background-color:#EFF3FF; } .bgover{ border:1px solid #ADCFF7; background-color:#EFF3FF; background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132yyW.gif); background-repeat:no-repeat; background-position: 110px 4px; } .bgover img, .listover img{ vertical-align:text-bottom; border:0px; margin-right:10px; padding-top:4px; } </style> </head> <body style=" padding:30px; margin:0px;"> <div id='ss'> <div><img src='/uploads/allimg/091203/0RF23C3-0.gif'>人族</div> <div><img src='/uploads/allimg/091203/0RF23153-1.gif'>兽族</div> <div><img src='/uploads/allimg/091203/0RF25034-2.gif'>不死族</div> <div><img src='/uploads/allimg/091203/0RF23C3-0.gif'>精灵族</div> </div> <br><br><br><br> <div style="float:right">自动判断方向: <div id='sss'> <div><img src='/uploads/allimg/091203/0RF23C3-0.gif'>人族</div> <div><img src='/uploads/allimg/091203/0RF23153-1.gif'>兽族</div> <div><img src='/uploads/allimg/091203/0RF25034-2.gif'>不死族</div> <div><img src='/uploads/allimg/091203/0RF23C3-0.gif'>精灵族</div> </div> </div> <br><br><br> <style type="text/css"> #tt{ height:auto; width:144px; border:1px solid #9C9A9C; } #tt div{ height:25px; width:135px; margin:2px; font-size:12px; line-height:25px; vertical-align:middle; padding-left:5px; background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132KUt.png); } #tt div.title{ background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923138NPD.png); color:#FFFFFF; } .tc{ width:144px; height:auto; border:1px solid #9C9A9C; position:absolute; background-color:#FFFFFF; z-index:10; } .tl{ display:block; height:25px; width:135px; font-size:12px; line-height:25px; vertical-align:middle; margin:0 auto; margin-top:2px; margin-bottom:2px; padding-left:5px; } .tlist{ color:#000000; background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_1254192313Jzrd.png); } .tlistover{ background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_1254192314VvN6.png); color:#FFFFFF; } .tbg{ color:#000000; background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132KUt.png); } .tbgover{ background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923138NPD.png); color:#FFFFFF; } </style> <div id='tt'> <div>人族</div> <div>兽族</div> <div>不死族</div> <div>精灵族</div> </div> <br><br><br><br><br><br><br> 右键菜单::: <br> <style type="text/css"> #yy{ height:300px; width:750px; border:1px solid #FF0000; } #right{ width:144px; height:auto; border: 1px solid #999999; display:none; position:absolute; background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923146wVz.gif); background-color:#FFFFFF; background-repeat:repeat-y; } #right div{ font-size:12px; height:28px; width:135px; line-height:28px; vertical-align:middle; padding-left:5px; color:#1f3a87; *background-color:#FFFFFF; border:1px solid transparent; *border-color:white; filter:chroma(color=white); margin:0 auto; margin-top:2px; margin-bottom:2px; } #right div img{ vertical-align:text-bottom; border:0px; margin-right:5px; padding-top:6px; } #right div.title{ border:1px solid #ADCFF7; background-color:#EFF3FF; } </style> <div id='yy'> </div> <div id='right'> <div><img src="/uploads/allimg/091203/0RF23153-1.gif">人族</div> <div><img src="/uploads/allimg/091203/0RF25034-2.gif">兽族</div> <div><img src="/uploads/allimg/091203/0RF23C3-0.gif">不死族</div> <div><img src="/uploads/allimg/091203/0RF23153-1.gif">精灵族</div> </div> <script language="javascript"> document.all&&document.execCommand("BackgroundImageCache", false, true); var Sys = { IE : navigator.userAgent.toLowerCase().match(/msie ([\d.]+)/), Firefox : navigator.userAgent.toLowerCase().match(/firefox\/([\d.]+)/), Chrome : navigator.userAgent.toLowerCase().match(/chrome\/([\d.]+)/), IE6 : navigator.userAgent.toLowerCase().match(/msie ([\d.]+)/) && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6) } function $(Id){return document.getElementById(Id)}; function $$(p,e){return p.getElementsByTagName(e)}; function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)}; function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)}; function create(elm,parent,fn){var element = document.createElement(elm);parent.appendChild(element);if(fn)fn(element);return element}; function getTarget(e){return e.srcElement||e.target;}; function getNext(e){ return e.relatedTarget||e.toElement;}; function getobjpos(el,left){ var val = 0; while (el !=null) { val += el["offset" + (left? "Left": "Top")]; el = el.offsetParent; } return val; }; function fixEvent(event) { if (event) return event; //从cloudgamer中的代码中看到的觉得停好就拿来用了 //event = ((this.ownerDocument || this.document || this).parentWindow || window).event; //var scrolldoc = isChrome || isSafari ? document.body : document.documentElement; event = window.event; event.pageX = event.clientX + document.documentElement.scrollLeft; event.pageY = event.clientY + document.documentElement.scrollTop; event.target = event.srcElement; event.stopPropagation = fixEvent.stopPropagation; event.preventDefault = fixEvent.preventDefault; if(event.type == "mouseout") { event.relatedTarget = event.toElement; }else if(event.type == "mouseover") { event.relatedTarget = event.fromElement; } return event; }; fixEvent.preventDefault = function() { this.returnValue = false; }; fixEvent.stopPropagation = function() { this.cancelBubble = true; }; var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);}; var Bind = function(object, fun,args) { return function() { return fun.apply(object,args||[]); } } var BindAsEventListener = function(object, fun,arg) { return function(event) { return fun.apply(object, [(event || window.event)].concat(arg||[])); } }; var Extend = function() { var args = arguments; if(!args[1])args = [this,args[0]]; for(var property in args[1])args[0][property] = args[1][property]; return args[0]; }; var Class = function(properties){ var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; _class.prototype = properties; return _class; }; var Menu = new Class({ options:{ h_style : "title", c_style : "c", //列表容器样式 l_style : "l list", //列表样式 l_style1 : "l listover", //鼠标放上去后的列表样式 l_bg_style : "l bg", //有子菜单时候的背景 l_bg_style1 : "l bgover", //有子菜单时鼠标放上去的样式 l_disabled : "l disabled", //设置不能选中时的样式 l_hr : "hr", //分行符的样式 direction : "X" }, initialize : function(container,data,elm,options){ this.container = container; //设置容器 this.data = data; //数据 this.elm = elm; //设置list是什么元素可以是div 也可以是a 也可以是其他 this.stack = []; //元素堆栈看哪些元素已经存在了 this.obj = null; //记录哪一项被选种过 this.lists = []; //为查找元素而记录元素 Extend(this.options,options||{}); Extend(this,this.options); var elm = this.container.getElementsByTagName(this.elm); for(var i=0,l=elm.length;i<l;i++) { if(this.data[i].txt == i) { addListener(elm[i],'mouseover',BindAsEventListener(this,this.Title,[this.data[i],elm[i]])); addListener(elm[i],'mouseout',BindAsEventListener(this,this.Hide)); } } }, Title : function(e,d,obj){ this.obj = obj; obj.className = this.h_style; if(!d.menu)return; var container = this.Makebody(d,obj); if(this.direction=="X") { container.style.left = getobjpos(obj,1) + "px"; container.style.top = obj.offsetHeight + getobjpos(obj,0) + "px"; } else { container.style.left = getobjpos(obj,1)+obj.offsetWidth + "px" container.style.top = getobjpos(obj,0) + "px"; } }, Makemenu : function(e,d,obj){ this.mouseover(obj); if(!d.menu)return; var container = this.Makebody(d,obj); container.style.left = this.pos(obj,container,"X")?(getobjpos(obj,1)+ obj.offsetWidth+ "px"):(getobjpos(obj,1) - container.offsetWidth + 2 + "px"); container.style.top = this.pos(obj,container,"Y")?(getobjpos(obj,0) + "px"):(getobjpos(obj,0) - container.offsetHeight+2+20+"px"); }, Makebody : function(d,obj){ if(!obj.getAttribute('container')){ var _self = this; var container = create('div',document.body,function(o){o.className = _self.c_style;}); container.onmouseup = function(e){fixEvent(e).stopPropagation();fixEvent(e).preventDefault();} } else { var container = this.lists[parseInt(obj.getAttribute('container'))-1]; container.style.display = "block"; this.resetstyle(container,d); } this.stack.push(container); if(!obj.getAttribute('container')) { addListener(container,"mouseout",BindAsEventListener(this,this.Hide)); this.lists.push(container) obj.setAttribute("container",this.lists.length); var Item = null, _self = this; for(var i = 0,l = d.menu.length;i<l;i++) { (function(i){Item = create("div",container,function(o){ if(d.menu[i].ico){o.innerHTML = "<img src = '"+d.menu[i].ico+"'>";} with(o){innerHTML = innerHTML+d.menu[i].txt; setAttribute("menu",d.menu[i].menu?"true":"false"); className = d.menu[i].menu?_self.l_bg_style:_self.l_style; } })})(i); if(d.menu[i].group)create("span",container,function(o){o.className = _self.l_hr}); if(!d.menu[i].exist){Item.className = _self.l_disabled;continue;}; addListener(Item,"mouseover",BindAsEventListener(this,this.Makemenu,[d.menu[i],Item])); addListener(Item,"mouseout",BindAsEventListener(this,this.Hide,[Item])); Item.oncontextmenu = function(e){fixEvent(e).stopPropagation();fixEvent(e).preventDefault();} Item.onmouseup = function(e){fixEvent(e).stopPropagation();fixEvent(e).preventDefault();} } } else { this.lists[parseInt(obj.getAttribute('container'))-1].style.display = "block"; } return container; }, Hide : function(e,o){ o&&this.contains(o.parentNode,getNext(e))&&this.mouseout(e,o); var exist = false; for(var index = 0,l = this.stack.length;index<l;index++) { if(this.contains(this.stack[index],getNext(e))){exist = true;break;} }; if(exist) { for(var i = index + 1;i<this.stack.length;i++) {this.stack[i].style.display = "none";} this.stack.length = index + 1; } else { for(var i = 0;i<this.stack.length;i++) {this.stack[i].style.display = "none";} this.stack.length = 0; } if(this.stack.length == 0)this.obj.className = ""; }, mouseover : function(obj){ for(var i=0,l=$$(obj.parentNode,this.elm).length;i<l;i++) { if($$(obj.parentNode,this.elm)[i].className ==this.l_disabled)continue; $$(obj.parentNode,this.elm)[i].className = $$(obj.parentNode,this.elm)[i].getAttribute("menu")=="true"?this.l_bg_style:this.l_style; } if(obj.className == this.l_disabled)return; obj.className = obj.getAttribute("menu")=="true"?this.l_bg_style1:this.l_style1 }, mouseout : function(e,obj){ if(obj.className == this.l_disabled)return; obj.className = obj.getAttribute("menu")=="true"?this.l_bg_style:this.l_style; }, contains: function(parent,child){ if(!parent||!child)return false; if(parent == child) return true; return Sys.IE?parent.contains(child):(parent.compareDocumentPosition(child)==20)?true:false; return false; }, Bubble : function(e){ fixEvent(e).stopPropagation(); }, Stopdefault : function(e){ fixEvent(e).preventDefault(); }, pos : function(o,w,arg){ //判断位置的计算方式 if(arg=="X") { var xx = Sys.Chrome?document.body.clientWidth:document.documentElement.clientWidth; return (xx -getobjpos(o,1)-o.offsetWidth-5)>w.offsetWidth; } else { var xx = Sys.Chrome?document.body:document.documentElement; return (xx.clientHeight -getobjpos(o,0)+xx.scrollTop+o.offsetHeight-5)>w.offsetHeight; } }, resetstyle : function(c,d){ for(var i=0,l=$$(c,this.elm).length;i<l;i++) { $$(c,this.elm)[i].className = this.l_style; if(d.menu[i].menu)$$(c,this.elm)[i].className = this.l_bg_style; if(!d.menu[i].exist)$$(c,this.elm)[i].className = this.l_disabled; } } }); var bg = null; var img = ["/uploads/allimg/091203/0RF23C3-0.gif","/uploads/allimg/091203/0RF23153-1.gif","/uploads/allimg/091203/0RF25034-2.gif"] window.onload = function(){ var data = [ {txt:0,menu:[ {ico:img[0],group:true,exist:true,txt:"大法师",menu:[ {ico:img[1],group:false,exist:true,txt:"召唤水元素",menu:[ {ico:img[2],group:false,exist:true,txt:"穿刺攻击"},{ico:img[0],group:false,exist:true,txt:"很强肉盾"},{ico:img[1],group:false,exist:true,txt:"对空对第"} ]},{ico:img[2],group:false,exist:true,txt:"强大暴风雪"},{ico:img[0],group:false,exist:true,txt:"辉煌光环"},{ico:img[1],group:false,exist:true,txt:"群体瞬间移动"} ]}, {ico:img[2],group:false,exist:true,txt:"山丘之王",menu:[ {ico:img[0],group:false,exist:true,txt:"风暴之锤"},{ico:img[1],group:false,exist:true,txt:"大铁锤敲地"},{ico:img[2],group:false,exist:true,txt:"35%几率锥晕"},{ico:img[0],group:false,exist:true,txt:"超级天神下凡"} ]}, {ico:img[1],group:false,exist:true,txt:"圣骑士",menu:[ {ico:img[2],group:false,exist:true,txt:"一束大光线"},{ico:img[0],group:false,exist:true,txt:"无敌就是无敌"},{ico:img[1],group:false,exist:true,txt:"专注光环啊"},{ico:img[2],group:false,exist:true,txt:"复活6个单位"} ]}, {ico:img[0],group:false,exist:true,txt:"血法师",menu:[ {ico:img[1],group:false,exist:true,txt:"一个燃烧蛋"},{ico:img[2],group:false,exist:true,txt:"吸蓝啊"},{ico:img[0],group:false,exist:true,txt:"虚无魔法加成"},{ico:img[1],group:false,exist:true,txt:"神鸟凤凰"} ]} ]}, {txt:1,menu:[ {ico:img[2],group:false,exist:false,txt:"剑圣"}, {ico:img[0],group:false,exist:false,txt:"先知"}, {ico:img[1],group:false,exist:true,txt:"牛头人酋长"}, {ico:img[2],group:false,exist:true,txt:"小YY"} ]}, {txt:2,menu:[ {ico:img[1],group:false,exist:true,txt:"死亡骑士"}, {ico:img[0],group:false,exist:true,txt:"巫妖"}, {ico:img[2],group:false,exist:false,txt:"恐惧魔王"}, {ico:img[1],group:false,exist:false,txt:"小强王子"} ]}, {txt:3,menu:[ {ico:img[1],group:false,exist:true,txt:"丛林守护者"}, {ico:img[0],group:false,exist:true,txt:"女祭祀(虎MM)"}, {ico:img[2],group:false,exist:true,txt:"守望者(SM女王)"}, {ico:img[1],group:false,exist:true,txt:"恶魔猎手",menu:[{ico:img[0],group:false,exist:true,txt:"燃烧法力"}, {ico:img[2],group:false,exist:true,txt:"禁祭火焰羽衣"}, {ico:img[1],group:false,exist:true,txt:"一定的几率躲避"}, {ico:img[0],group:false,exist:true,txt:"变身强大恶魔",menu:[{ico:img[0],group:false,exist:true,txt:"远程攻击"},{ico:img[0],group:false,exist:true,txt:"多500点血"},{ico:img[0],group:false,exist:true,txt:"变的高大帅气"},{ico:img[0],group:false,exist:true,txt:"混乱攻击模式",menu:[{ico:img[0],group:false,exist:true,txt:"无视对方防御"},{ico:img[0],group:false,exist:true,txt:"无视各种护甲"}]}]}]} ]}, ]; var data1 = [ {exist:true,txt:0,menu:[ {exist:true,txt:"大法师",menu:[ {exist:true,txt:"召唤水元素",menu:[ {exist:true,txt:"穿刺攻击"},{exist:true,txt:"很强肉盾"},{exist:true,txt:"对空对第"} ]},{exist:true,txt:"强大暴风雪"},{exist:true,txt:"辉煌光环"},{exist:true,txt:"群体瞬间移动"} ]}, {exist:true,txt:"山丘之王",menu:[ {exist:true,txt:"风暴之锤"},{exist:true,txt:"大铁锤敲地"},{exist:true,txt:"35%几率锥晕"},{exist:true,txt:"超级天神下凡"} ]}, {exist:true,txt:"圣骑士",menu:[ {exist:true,txt:"水元素"},{exist:true,txt:"暴风雪"},{exist:true,txt:"辉煌光环"},{exist:true,txt:"瞬间移动"} ]}, {exist:true,txt:"血法师",menu:[ {exist:true,txt:"水元素"},{exist:true,txt:"暴风雪"},{exist:true,txt:"辉煌光环"},{exist:true,txt:"瞬间移动"} ]} ]}, {exist:true,txt:1,menu:[ {exist:true,txt:"剑圣"}, {exist:true,txt:"先知"}, {exist:true,txt:"牛头人酋长"}, {exist:true,txt:"小YY"} ]}, {exist:true,txt:2,menu:[ {exist:true,txt:"死亡骑士"}, {exist:true,txt:"巫妖"}, {exist:true,txt:"恐惧魔王"}, {exist:true,txt:"小强王子"} ]}, {exist:true,txt:3,menu:[ {exist:true,txt:"恶魔猎手"}, {exist:true,txt:"丛林守护者"}, {exist:true,txt:"女祭祀(虎MM)"}, {exist:true,txt:"守望者(SM女王)"} ]}, ]; new Menu($('right'),data,"div",{direction:"Y"}); new Menu($('ss'),data,"div",{direction:"X"}); new Menu($('sss'),data,"div"); new Menu($('tt'),data1,"div",{direction:"Y",c_style:"tc",l_style:"tl tlist",l_style1:"tl tlistover",l_bg_style:"tl tbg",l_bg_style1 : "tl tbgover"}); /*=======================================================================================================================*/ $('yy').oncontextmenu = $('right').oncontextmenu = function(e){fixEvent(e).preventDefault();}; $('yy').onselectstart = $('right').onselectstart = function(){return false;}; $('yy').onmouseup = function(e){$('right').style.display = "none";var e = fixEvent(e);e.stopPropagation();show(e)}; document.onmouseup = function(){$('right').style.display = "none"}; function show(e){ if(e.button==1){$('right').style.display = "none";return;} if(e.button==2) { $('right').style.display = "block"; $('right').style.top = e.pageY + "px"; $('right').style.left = e.pageX + "px"; } } } </script> </body> </html>
提示：您可以先修改部分代码再运行

相关网站代码

当前位置： 简洁设计网 > 网站代码 > 网页特效 > 导航菜单 > 代码信息

相关网站代码

当前位置：简洁设计网 > 网站代码 > 网页特效 > 导航菜单 > 代码信息