Nice vertical menu with cache JavaScript

Source: Internet
Author: User

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<title></title>
<style type= "Text/css" >
*{margin:0;padding:0;border:0;}
Body
{
Font-family:arial, song body, serif;
font-size:12px;
}
#nav {
width:180px;
line-height:24px;
List-style-type:none;
Text-align:left;
/* Define the line height and background color of the entire UL menu */
}
/*================== level directory ===================*/
#nav a {
width:160px;
Display:block;
padding-left:20px;
}
#nav Li {
Background: #CCC; /* Background color for first-level directories */
Border-bottom: #FFF 1px solid; /* A white edge on the bottom */
Float:left;
}
#nav Li a:hover{
Background: #CC0000; /* First table of contents onmouseover Display background color */
}
#nav A:link {
Color: #666; Text-decoration:none;
}
#nav a:visited {
Color: #666; text-decoration:none;
}
#nav A:hover {
Color: #FFF; text-decoration:none;font-weight:bold;
}
/*================== Level Two directory ===================*/
#nav Li ul {
List-style:none;
Text-align:left;
}
#nav Li ul li{
Background: #EBEBEB; /* Background color for level two directories */
}
#nav Li ul a{
padding-left:20px;
width:160px;
/* Padding-left The text moves to the right in the level two directory, but width must be reset = (total width-padding-left) */
}
/* Below is the link style for level two directories */
#nav Li ul a:link {
Color: #666; Text-decoration:none;
}
#nav Li ul a:visited {
Color: #666; text-decoration:none;
}
#nav Li ul a:hover {
Color: #F3F3F3;
Text-decoration:none;
Font-weight:normal;
Background: #CC0000;
/* font color, background color of level two onmouseover */
}
/*==============================*/
#nav Li:hover ul {
Left:auto;
}
#nav Li.sfhover ul {
Left:auto;
}
#content {
Clear:left;
}
#nav ul.collapsed {
Display:none;
}
#PARENT {
width:300px;
padding-left:20px;
}
</style>

<script type= "Text/javascript" >
var lastleftid = "";
function Menufix () {
var obj = document.getElementById ("Nav"). getElementsByTagName ("Li");
for (var i = 0; i < obj.length; i++) {
Obj[i].onmouseover = function () {
This.classname + = (this.className.length > 0?) "": "") + "Sfhover";
}
Obj[i].onmousedown = function () {
This.classname + = (this.className.length > 0?) "": "") + "Sfhover";
}
Obj[i].onmouseup = function () {
This.classname + = (this.className.length > 0?) "": "") + "Sfhover";
}
Obj[i].onmouseout = function () {
This.classname = This.className.replace (new RegExp (? | ^) (sfhover\\b ")," ");
}
}
}
function Domenu (emid) {
var obj = document.getElementById (emid);
Obj.classname = (obj.className.toLowerCase () = = "Expanded"? "Collapsed": "expanded");
if (Lastleftid! = "") && (emid! = Lastleftid))//Close Previous menu
{
document.getElementById (lastleftid). ClassName = "collapsed";
}
Lastleftid = Emid;
}
function Getmenuid () {
var MenuID = "";
var _paramstr = new String (window.location.href);
var _sharppos = _paramstr.indexof ("#");

if (_sharppos >= 0 && _sharppos < _paramstr.length-1) {
_paramstr = _paramstr.substring (_sharppos + 1, _paramstr.length);
}
else {
_paramstr = "";
}
if (_paramstr.length > 0) {
var _paramarr = _paramstr.split ("&");
if (_paramarr.length > 0) {
var _paramkeyval = _paramarr[0].split ("=");
if (_paramkeyval.length > 0) {
MenuID = _paramkeyval[1];
}
}
/*
if (_paramarr.length>0)
{
var _arr = new Array (_paramarr.length);
}

Take all the # back, menu only
for (var i = 0; i < _paramarr.length; i++)
{
var _paramkeyval = _paramarr[i].split (' = ');

if (_paramkeyval.length>0)
{
_arr[_paramkeyval[0]] = _paramkeyval[1];
}
}
*/
}
if (MenuID! = "") {
Domenu (MenuID)
}
}
Getmenuid (); * These two function order to pay attention to, otherwise in Firefox getmenuid () does not have the effect
Menufix ();
</script>
<body>

<div id= "PARENT" >
<ul id= "NAV" >
<li><a href= "#Menu =childmenu1" onmouseover= "Domenu (' ChildMenu1 ')" onclick= "Domenu (' ChildMenu1 ')" > Lazy people Build Station </a>
<ul id= "ChildMenu1" class= "collapsed" >
<li><a href= "#" > Lazy people Build station </a></li>
<li><a href= "#" &GT;JS code </a></li>
<li><a href= "#" > Lazy people Build station </a></li>
<li><a href= "#" &GT;JS code </a></li>
<li><a href= "#" > Lazy people Build station </a></li>
<li><a href= "#" > Lazy people Build station </a></li>
</ul>
</li>
<li><a href= "#Menu =childmenu2" onmouseover= "Domenu (' ChildMenu2 ')" onclick= "Domenu (' ChildMenu2 ')" > Lazy people Build Station </a>
<ul id= "ChildMenu2" class= "collapsed" >
<li><a href= "#" > Lazy people Build station </a></li>
<li><a href= "#" > Lazy people Build station </a></li>
<li><a href= "#" > Lazy people Build station </a></li>
<li><a href= "#" > Lazy people Build station </a></li>
<li><a href= "#" > Lazy people Build station </a></li>
<li><a href= "#" > Lazy people Build station </a></li>
</ul>
</li>
<li><a href= "#Menu =childmenu3" onmouseover= "Domenu (' ChildMenu3 ')" onclick= "Domenu (' ChildMenu3 ')" > Lazy people Build Station </a>
<ul id= "ChildMenu3" class= "collapsed" >
<li><a href= "#" > Lazy people Build station </a></li>
<li><a href= "#" > Lazy people Build station </a></li>
<li><a href= "#" > Lazy people Build station </a></li>
<li><a href= "#" > Lazy people Build station </a></li>
</ul>
</li>
<li><a href= "#Menu =childmenu4" onmouseover= "Domenu (' ChildMenu4 ')" onclick= "Domenu (' ChildMenu4 ')" > Lazy people Build Station </a>
<ul id= "ChildMenu4" class= "collapsed" >
<li><a href= "#" > Lazy people Build station </a></li>
<li><a href= "#" > Lazy people Build station </a></li>
<li><a href= "#" > Lazy people Build station </a></li>
<li><a href= "#" > Lazy people Build station </a></li>
<li><a href= "#" > Lazy people Build station </a></li>
</ul>
</li>
</ul>
</div>
</body>

Nice vertical menu with cache JavaScript

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.