竖排div+css导航栏菜单【转自懒人图库】

<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {font-family: arial, 宋体, serif;font-size:12px;
}
#nav {width:180px;line-height: 24px; list-style-type: none;text-align:left;/*定义整个ul菜单的行高和背景色*/
}
/*==================一级目录===================*/
#nav a {width: 160px; display: block;padding-left:20px;/*Width(一定要)，否则下面的Li会变形*/
}
#nav li {background:#CCC; /*一级目录的背景色*/border-bottom:#FFF 1px solid; /*下面的一条白边*/float:left;/*float：left,本不应该设置，但由于在Firefox不能正常显示继承Nav的width,限制宽度，li自动向下延伸*/
}
#nav li a:hover{background:#CC0000; /*一级目录onMouseOver显示的背景色*/
}
#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;
}
/*==================二级目录===================*/
#nav li ul {list-style:none;text-align:left;
}
#nav li ul li{ background: #EBEBEB; /*二级目录的背景色*/
}
#nav li ul a{padding-left:20px;width:160px;/* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/
}
/*下面是二级目录的链接样式*/
#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;/* 二级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>
<div id="PARENT">
<ul id="nav">
<li><a href="#Menu=ChildMenu1"  οnclick="DoMenu('ChildMenu1')">我的网站</a><ul id="ChildMenu1" class="collapsed"><li><a href="#">网页教学网</a></li><li><a href="#">管理</a></li><li><a href="#">网页教学网</a></li><li><a href="#">管理</a></li><li><a href="#">网页教学网</a></li><li><a href="#">管理</a></li></ul>
</li>
<li><a href="#Menu=ChildMenu2" οnclick="DoMenu('ChildMenu2')">我的帐务</a><ul id="ChildMenu2" class="collapsed"><a href="#">支付</a></li><li><a href="#">管理</a></li><li><a href="#">网上支付</a></li><li><a href="#">登记汇款</a></li><li><a href="#">在线招领</a></li><li><a href="#">历史帐务</a></li></ul>
</li>
<li><a href="#Menu=ChildMenu3" οnclick="DoMenu('ChildMenu3')">网站管理</a><ul id="ChildMenu3" class="collapsed"><li><a href="#">登录</a></li><a href="#">管理</a></li><li><a href="#">管理</a></li><li><a href="#">管理</a></li></ul>
</li>
<li><a href="#Menu=ChildMenu4" οnclick="DoMenu('ChildMenu4')">网站管理</a><ul id="ChildMenu4" class="collapsed"><li><a href="#">登录</a></li><a href="#">管理</a></li><li><a href="#">管理</a></li><li><a href="#">管理</a></li><li><a href="#">管理</a></li></ul>
</li>
</ul>
</div>
<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].οnmοuseοver=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].οnmοuseοut=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)) //关闭上一个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);}//取所有#后面的，菜单只需用到Menu//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(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
menuFix();
--></script>
<br/>

竖排div+css导航栏菜单【转自懒人图库】相关推荐

div css导航栏设计,CSS+DIV设计实例：超酷的竖排导航栏
HTML: 以下为引用的内容: Item one Subitem one Subitem two Subitem three Subitem four Item two Item three Item ...
css导航栏悬浮在轮播图上面，如何设置半透明悬浮效果
简而言之就是,将导航的ul列表放在一个盒子里,然后导航栏置顶,设置透明度,设置z-index值效果图如下: 页面代码: body: <div clas ...
HTML+CSS 简单的顶部导航栏菜单制作
导航栏的制作: 技术要求: CSS HTML各类标签实现目的: 制作导航栏菜单代码分析: 基本样式清除无序列原点删除下划线删除文字默认居中 a标签设置块级元素伪类选择器对a状态修饰分步实 ...
html右侧浮动菜单,HTML+CSS：css元素浮动详解，使用浮动制作导航栏菜单
原标题:HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单今天这篇文章我们来说一下css的浮动属性(float),给块状元素添加float属性可以使其转变为行内元素,也就是我们所说标签对象 ...
HTML+CSS 完成顶部导航栏菜单制作
导航栏针对一切网址都很重要,文中关键详细介绍了HTML+CSS 完成顶端导航栏菜单制作,具备一定的参考价值,感兴趣的小伙伴们能够参照一下导航栏的制作: 技术要求: CSS HTML各类标签实现目的 ...
css+div实现导航栏
css+div实现导航栏把页面分成两个部分,用div装起来 <body><div class="one1"><h1>SYROS</h1& ...
css导航栏_使用CSS的导航栏
css导航栏 CSS | 导航栏 (CSS | Navigation Bar) Developing websites is great but developing a user-friendly ...
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
绝对定位,相对定位,固定定位和粘性定位的特性及区别,我整理一下放在文章最下面了,不用死记硬背,理解一下就ok,需要的话可以看看. 当导航栏头部没有别的模块时,想要滑动过程中导航栏一直在顶部,有两种写法 ...
html 导航右侧弹出层,CSS导航栏及弹窗示例代码
最近整理了CSS导航栏及弹窗,具体如下: CSS导航先来看下效果: Insert your title body{ font-size:12px; } #discuss{ width:990px; ...

竖排div+css导航栏菜单【转自懒人图库】

竖排div+css导航栏菜单【转自懒人图库】相关推荐

最新文章

热门文章