CSS+Js豎向簡潔的折疊菜單

2024-09-05 12:20:13

字體：大中小

來源：轉載

供稿：網友

CSS+Js豎向簡潔的折疊菜單，支持三級分類，紅色垂直型，個人感覺非常棒，希望大家喜歡。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>CSS+Js豎向簡潔的折疊菜單</title><style>#outer {width:504px; height:510px; position:relative; background:url(/jscss/demoimg/200907/red_frog.jpg) no-repeat 0px 160px;}#outer #content {clear:left; position:absolute; left:230px; top:10px; width:250px; z-index:10;}#menu {list-style-type:none; padding:0; margin:0; width:125px; position:absolute; top:70px; left:0; border:1px solid #fff; border-width:0 1px 1px; z-index:100;}#menu ul {list-style-type:none; padding:0; margin:0; width:125px;}#menu li {float:left; background:#657; position:relative; border-top:1px solid #fff;}#menu li.sub {background:#d30;}#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none;  cursor:pointer; font-weight:bold; text-indent:5px;}#menu ul,#menu li.click ul ul,#menu li.click ul li.hover ul ul {display:none;}#menu li.hover {color:#ff0; z-index:500;}#menu li.click {color:#ff0;}#menu li.click ul {display:block;}#menu li.click ul li.hover ul, #menu li.click ul li.hover ul li.hover ul {display:block; position:absolute; left:110px; top:-1px; border:1px solid #fff; border-width:0 1px 1px;}#menu li.click ul li.fly {background: #657 url(/jscss/demoimg/200907/frog_arrow.gif) no-repeat top right;}#menu li.click ul li.hover {background:#98a;}#menu li.click ul li.hover ul li {background:#c60;}#menu li.click ul li.hover ul li.hover ul li {background:#780; z-index:500;}#menu li.click ul li.hover ul li.fly {background: #c60 url(/jscss/demoimg/200907/frog_arrow.gif) no-repeat top right;}#menu li.click ul li.hover ul li.hover {z-index:500; background:#fa4;}#menu li.click ul li.hover ul li.hover a {color:#000;}#menu li.click ul li.hover ul li.hover ul li.hover {background:#aa0;}#menu li.click ul li.hover ul li.hover ul li.hover a {color:#fff;}#outer img {display:block; float:right;}#outer p {margin:0px; padding:17px 0 0 0; color:#000; font-size:12px; font-family:arial, sans-serif; text-align:justify;}</style><script type="text/javascript">clickMenu = function(menu) {	var getEls = document.getElementById(menu).getElementsByTagName("LI");	var getAgn = getEls;	for (var i=0; i<getEls.length; i++) {			getEls[i].onclick=function() {				for (var x=0; x<getAgn.length; x++) {				getAgn[x].className=getAgn[x].className.replace("unclick", "");				getAgn[x].className=getAgn[x].className.replace("click", "unclick");				}			if ((this.className.indexOf('unclick'))!=-1) {				this.className=this.className.replace("unclick", "");;				}				else {				this.className+=" click";				}			}			getEls[i].onmouseover=function() {				this.className+=" hover";			}			getEls[i].onmouseout=function() {				this.className=this.className.replace("hover", "");			}		}	}</script></head><body onload="clickMenu('menu')"><div   class="70qarhlowxag"   id="outer"><ul id="menu">	<li id="70qarhlowxag"    class="sub">Types		<ul>			<li>Indian</li>			<li>韓國</li>			<li id="70qarhlowxag"    class="fly">美國				<ul>					<li>朝鮮</li>					<li id="70qarhlowxag"    class="fly">南朝鮮						<ul>							<li>西大街</li>							<li>東大街</li>						</ul>					</li>				</ul>			</li>			<li>日本語</li>			<li>簡體中文</li>		</ul>	</li>	<li id="70qarhlowxag"    class="sub">地區分布		<ul>			<li id="70qarhlowxag"    class="fly">北京				<ul>					<li>Hemiphractus</li>					<li>Stefania</li>				</ul>			</li>			<li id="70qarhlowxag"    class="fly">河南				<ul>					<li>Acris</li>					<li>Anotheca</li>					<li>Trachycephalus</li>				</ul>			</li>			<li id="70qarhlowxag"    class="fly">武漢				<ul>					<li>Boophis</li>					<li>Callixalus</li>					<li>Chiromantis</li>				</ul>			</li>		</ul>	</li>	<li id="70qarhlowxag"    class="sub">References		<ul>			<li>Wikipedia</li>			<li>Encyclopedia</li>		</ul>	</li>	<li id="70qarhlowxag"    class="sub">鏈接		<ul>			<li>源碼天地</li>			<li>百度搜索</li>		</ul>	</li></ul></div></body></html>

上一篇：像滑動門一樣的CSs菜單

下一篇：不使用圖片仿Windows右鍵菜單