简洁的多级树形导航菜单
<ul id="menuList">
<li class="menubar">
<a href="#" id="productsActuator" class="actuator">我的收藏夹</a>
<ul id="productsMenu" class="menu">
<li>
<a href="#" id="newPhonesActuator" class="actuator">个人网站</a>
<ul id="newPhonesMenu" class="submenu">
<li><a href="http://www.butong.net/">网页代码库</a></li>
<li><a href="http://www.w3cn.org/">网页设计师</a></li>
<li><a href="http://www.junchenwu.com/">JunChen博客</a></li>
<li><a href="http://www.andymao.com/andy/">毅博客</a></li>
</ul>
</li>
<li>
<a href="#" id="compareActuator" class="actuator">国外网站</a>
<ul id="compareMenu" class="submenu">
<li><a href="http://www.alistapart.com/">A List Apart</a></li>
<li><a href="http://www.csszengarden.com/">CSS禅意花园</a></li>
<li><a href="http://www.456bereastreet.com/">456 Berea Street</a></li>
<li><a href="http://www.w3.org/">W3C网站</a></li>
</ul>
</li>
</ul>
</li>
</ul>
#menuList {
margin: 0px;
padding: 10px 0px 10px 15px;
border: 1px solid #CCC;
width: 203px;
background-color: #EEE;
color: #000;
font-family: verdana, helvetica, arial, sans-serif;
}
li.menubar {
font-size: 12px;
line-height: 1.8em;
list-style: none;
}
.menu, .submenu {
display: none;
margin-left: 15px;
padding: 0px;
}
.menu li, .submenu li {
list-style: none;
}
#menuList a {
background-color: transparent;
color: #000;
font-size: 12px;
margin-left: 15px;
text-decoration: none;
}
#menuList a:hover {
text-decoration: underline;
}
if (!document.getElementById) {
document.getElementById = function() { return null; }
}
function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);
if (menu == null || actuator == null) return;
actuator.onclick = function() {
var display = menu.style.display;
menu.style.display = (display == "block") ? "none" : "block";
return false;
}
}
window.onload = function() {
initializeMenu("productsMenu", "productsActuator");
initializeMenu("newPhonesMenu", "newPhonesActuator");
initializeMenu("compareMenu", "compareActuator");
}
分享到:
相关推荐
jQuery多级折叠展开树形菜单代码是一款简单实用的树形结构菜单插件,数据封装在data.js里面,直接修改调用即可。
树形菜单
js+css制作折叠展开的多级树形导航菜单,带多选框效果,经典实用。已经用在程序里了。资源来自:http://www.zzjs.net/html/2105.html
Android多级树形列表实现
Android Recyclerview实现多级树形列表
在android设置上实现多级树形列表菜单,支持无限极列表,完美实现多级联动
jQuery多级树形分类折叠菜单基于jquery-1.7.2.min.js制作,json树形菜单。
Bootstrap多级树形分类折叠菜单基于Bootstrap2.2.1制作,多级分类树形菜单。
改进的多级树形菜单dtree,eclipse开发。mysql数据库,S2SH架构,有源码和jar包。 共两部分。这是第一部分
菜单树形结构,支持三级、多级树形结构代码,纯手写代码,简单易懂,适合各个阶段试用,支持jquery调用。
jquery树形导航菜单插件制作一个类似树形展示的slider滑动多级二级下拉菜单目录,支持无限嵌套。jquery插件,jquery下载。
js树形导航菜单制作一个垂直纵向js导航条只设置导航二级菜单分类,点击显示隐藏二级菜单目录。内含js代码下载。
使用 css、jquery 、fontawesome字体图标写的多级简单树形菜单
可刷新的无限多级树形菜单,完美兼容各大浏览器,添加新的节点也十分方便。代码中有很详细的注释。
NULL 博文链接:https://haiyang08101.iteye.com/blog/1559388
实用的多级树形展开菜单效果代码。
功能强大,使用简单,强烈推荐这个树形插件;内附有简单实例,并有树形构造函数的参数的详细说明。
多级树形选择列表,最近项目需求做一个android 多级树形选择列表,网上发现比较好的项目,分享一下
Android listview多级树形列表菜单,支持全选/反选功能,根据ID和组ID添加分支或叶节点