<title> Compact Folding Menu </title>
<script language= "Web Effects" >
<!--begin
var refer=true;
function Combo () {
if (refer) {
document.all.contents.style.visibility= "visible";
Refer=false;
}
else {
Document.all.contents.style.visibility= "hidden";
Refer=true;
}
}</script>
<body>
<table align= "center" >
<tr><td>
<table width= "border=" 1 "cellspacing=" 0 "cellpadding=" 0 "bordercolor=" #d8d8d8 ">
<tr>
<TD bgcolor= "ff9900" >
<font color= #ffffff > Scripting Resource Instances
</td>
<TD align= "right" width= ">"
</td>
</tr>
</table>
<div id= "Contents" style= "position:absolute; LEFT:?PX; TOP:?PX; WIDTH:?PX; HEIGHT:?PX; Z-index:1; Visibility:hidden ">
<table width= "border=" 1 "cellspacing=" 0 "cellpadding=" 0 "bordercolor=" #d8d8d8 ">
<tr>
<TD bgcolor= "ff9900" >
<font face= "Verdana" size= "2" >
<a href= "/search.php tutorial? Keyword=ajax" target= "_blank" onclick= "javascript:window.open (THIS.SRC);" >ajax</a > |
<a href= "/sort/list_11_1.shtml" target= "_blank" onclick= "Javascript:window.open" (THIS.SRC); ">extjs</a> |
<a href= "/sort/list_11_1.shtml" target= "_blank" onclick= "Javascript:window.open" (THIS.SRC); ">jquery</a > |
</td>
</tr>
</table>
</td></tr>
</table>
</body>
Instance Code two
CSS Tutorial +js Vertical Concise folding menu, support level Three classification, red vertical, personal feeling is very good
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/tr/xhtml2/dtd/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>css+js Vertical Compact Folding menu </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:1 25px; 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].onmouseo Tutorial Ver=function () {
this.classname+= "hover";
}
Getels[i].onmouseout=function () {
This.classname=this.classname.replace ("hover", "");
}
}
}
</script><body onload= "clickmenu (' menu ')" >
<div id= "outer" >
<ul id= "Menu" >
<li class= "Sub" >types
<ul>
<li><a href= "#nogo" >indian</a></li>
<li><a href= "#nogo" > Korea </a></li>
<li class= "Fly" ><a href= "#nogo" > USA </a>
<ul>
<li><a href= "#nogo" > Korea </a></li>
<li class= "Fly" ><a href= "#nogo" > South Korea </a>
<ul>
<li><a href= "#nogo" > West street </a></li>
<li><a href= "#nogo" > East Street </a></li>
</ul>
</li>
</ul>
</li>
<li><a href= "#nogo" > Japanese </a></li>
<li><a href= "#nogo" > Simplified Chinese </a></li>
</ul>
</li>
<li class= "Sub" > Area distribution
<ul>
<li class= "Fly" ><a href= "#nogo" > Beijing </a>
<ul>
<li><a href= "#nogo" >hemiphractus</a></li>
<li><a href= "#nogo" >stefania</a></li>
</ul>
</li>
<li class= "Fly" ><a href= "#nogo" > Henan </a>
<ul>
<li><a href= "#nogo" >acris</a></li>
<li><a href= "#nogo" >anotheca</a></li>
<li><a href= "#nogo" >trachycephalus</a></li>
</ul>
</li>
<li class= "Fly" ><a href= "#nogo9" > Wuhan </a>
<ul>
<li><a href= "#nogo" >boophis</a></li>
<li><a href= "#nogo" >callixalus</a></li>
<li><a href= "#nogo" >chiromantis</a></li>
</ul>
</li>
</ul>
</li>
<li class= "Sub" >references
<ul>
<li><a href= "/" >wikipedia</a></li>
<li><a href= "#nogo11" >encyclopedia</a></li>
</ul>
</li>
<li class= "Sub" > Links
<ul>
<li><a href= "#nogo" > Source World </a></li>
<li><a href= "#nogo" > Baidu search </a></li>
</ul>
</li>
</ul>
</div>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
