使用css+js构造的无限级菜单(寻梦的稻草人)
2006-09-08 17:22
706 查看
先看看效果:
html代码:
<html>
<head>
<style>
ul#menu, ul#menu ul{
list-style:none;
margin:0;
border-bottom:1px solid #DDD;
border-right:1px solid #DDD;
border-left:1px solid #DDD;
width:150px;
padding:0;
font-size:14px;
}
ul#menu li{
border-top:1px solid #DDD;
position:relative;
padding:4px;
}
ul#menu li ul{
position:absolute;
left:150px;
_left:144px;
top:0;
display:none;
}
ul#menu li.over{
background:#EEE;
}
ul#menu li.out{
background:#fff;
}
ul#menu a{
display:block;
text-decoration:none;
color:#000;
_height:0;
}
</style>
<script type="text/javascript">
function initMenu(event,ul){
if(!ul) ul = document.getElementById("menu");
li = ul.getElementsByTagName("li");
for(i=0;i<li.length;i++)
{
li[i].onmouseover = function(){
try{
this.className='over';
this.getElementsByTagName("ul")[0].style.display="block";
}catch(e){};
}
li[i].onmouseout = function(){
try{
this.className='out';
this.getElementsByTagName("ul")[0].style.display="none";
}catch(e){};
}
}
}
window.onload = initMenu;
</script>
</head>
<body>
<ul id="menu">
<li>
这是菜单1
<ul>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单</a></li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单</a></li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
</ul>
</li>
<li><a href="#">这是子菜单</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">这是子菜单</a></li>
</ul>
</li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
</ul>
</li>
<li><a href="#">这是子菜单</a></li>
</ul>
</li>
<li>
这是菜单2
<ul>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
</ul>
</li>
<li>
这是菜单3
<ul>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
</ul>
</li>
</ul>
</body>
</html>
html代码:
<html>
<head>
<style>
ul#menu, ul#menu ul{
list-style:none;
margin:0;
border-bottom:1px solid #DDD;
border-right:1px solid #DDD;
border-left:1px solid #DDD;
width:150px;
padding:0;
font-size:14px;
}
ul#menu li{
border-top:1px solid #DDD;
position:relative;
padding:4px;
}
ul#menu li ul{
position:absolute;
left:150px;
_left:144px;
top:0;
display:none;
}
ul#menu li.over{
background:#EEE;
}
ul#menu li.out{
background:#fff;
}
ul#menu a{
display:block;
text-decoration:none;
color:#000;
_height:0;
}
</style>
<script type="text/javascript">
function initMenu(event,ul){
if(!ul) ul = document.getElementById("menu");
li = ul.getElementsByTagName("li");
for(i=0;i<li.length;i++)
{
li[i].onmouseover = function(){
try{
this.className='over';
this.getElementsByTagName("ul")[0].style.display="block";
}catch(e){};
}
li[i].onmouseout = function(){
try{
this.className='out';
this.getElementsByTagName("ul")[0].style.display="none";
}catch(e){};
}
}
}
window.onload = initMenu;
</script>
</head>
<body>
<ul id="menu">
<li>
这是菜单1
<ul>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单</a></li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单</a></li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
</ul>
</li>
<li><a href="#">这是子菜单</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">这是子菜单</a></li>
</ul>
</li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
</ul>
</li>
<li><a href="#">这是子菜单</a></li>
</ul>
</li>
<li>
这是菜单2
<ul>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
</ul>
</li>
<li>
这是菜单3
<ul>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
<li><a href="#">这是子菜单</a></li>
</ul>
</li>
</ul>
</body>
</html>
相关文章推荐
- 使用css+js构造的无限级菜单(寻梦的稻草人)
- 使用css+js构造的无限级菜单(寻梦的稻草人)
- 使用css+js构造的无限级菜单
- 转贴:JavaScript:使用JS和CSS构造圆角DIV广告框技术解析
- 使用css+js制作水平菜单
- 使用HTML+CSS+JS制作简单的网页菜单界面
- JavaScript:使用JS和CSS构造圆角DIV广告框技术解析
- Angular.JS实现无限级的联动菜单(使用demo)
- JS无限级菜单代码,与CSS结合实现
- 使用html,js,css开发鼠标右键菜单
- js+css实现带缓冲效果右键弹出菜单
- 怎样使用自定义标签简化 js、css 引入?
- 封装的一些 js, css使用小方法
- 在ASP.NET MVC中,使用Bundle来打包压缩js和css
- php使用gzip压缩传输js和css文件的方法
- RunJS推荐用于个人使用(使用方便JS、css实时预览、编辑、管理等功能)
- 使用yuicompressor-maven-plugin压缩js及css文件
- js css html和DOM的关系和使用场景
- JS+CSS打造简约的多级横向导航菜单
- vs2005的treeview简单使用之无限级别菜单建立