简易实用，CSS+Js滑动门菜单

2024-09-05 12:20:44

字体：大中小

来源：转载

供稿：网友

一个简洁实用的CSS+JavaScript滑动门导航菜单，写时候，我尽量用最少的代码写出兼容性好的代码，希望这款滑动门大家能够喜欢，也希望研究JS的达人一同切磋，共同提高。

<html><head><title>简易实用，滑动门</title><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><style type="text/css">*{margin:0;padding:0;}a:link,a:visited{text-decoration:none;}a:hover{text-decoration:none;}ul{list-style:none;}.subMenu{background:#333;float:left;padding-top:2px;width:100%;}.subMenu li{float:left;}.subMenu li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;}.subMenu .thisStyle a {background:#fff;color:#000;}.subContent{clear:both;border:2px solid #000;border-top:none;background:#fff;}.subContent ul{display:none;padding:15px;line-height:180%;}</style></head><body>       <ul class="subMenu">            <li class="thisStyle">目录</li>            <li>列表</li>            <li>产品</li>            <li>新网</li>        </ul>        <div class="subContent">        	<ul style="display:block;">                <li>111111</li>                <li>111111</li>                <li>111111</li>                <li>111111</li>            </ul>            <ul>                <li>222222</li>                <li>222222</li>                <li>222222</li>                <li>222222</li>            </ul>            <ul>                <li>333333</li>                <li>333333</li>                <li>333333</li>                <li>333333</li>            </ul>            <ul>                <li>444444</li>                <li>444444</li>                <li>444444</li>                <li>444444</li>            </ul>        </div><script>function $_class(name){	var elements = document.getElementsByTagName("*");	for(s=0;s<elements.length;s++){		if(elements[s].className==name){			return 	elements[s];		}		}}//tab effectsvar tabList = $_class("subMenu").getElementsByTagName("li")	tabCon = $_class("subContent").getElementsByTagName("ul");for(i=0;i<tabList.length;i++){	(function(){		var t = i;	  		tabList[t].onclick = function(){			for(o=0;o<tabCon.length;o++){				tabCon[o].style.display = "none";				tabList[o].className = "";				if(t==o){					this.className = "thisStyle";					tabCon[o].style.display = "block";					}			}		}		})()	}</script></bdoy></html>

上一篇：隐藏在左侧的弹性弹出菜单

下一篇：JavaScript模拟IE右键菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注