DIV+CSS构成的树型菜单

css|菜单

  这是用DIV+CSS+JS构成的树型菜单,采用列表,符合WEB标准,在大多数WIN浏览器下,兼容性不错,xhtml见效果页,我现在做的是二个菜单,如果需要添加,可把<ul class="collapsed" id="submenuid2">......</ul>之间的内容加上去,"submenuid"加1,查看效果。

CSS代码

body { margin: 0px; padding: 0; font: 12px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; background: #FFFFFF; text-align: center;}ul{ margin: 0; padding: 0; list-style: none;}#treenav { margin: 10px; text-align: left;}#treenav ul li { margin: 1px 0; padding: 0; font-size: 11px;}#treenav ul.expanded { display: block;}#treenav ul.expanded,#treenav ul.collapsed { margin: 5px 10px;}#treenav ul.collapsed { display: none;}.expanded li,.collapsed li{ border-bottom: 1px dashed #CCCCCC; width: 100px;}.listhead { font-weight: bold; display: block; font-size: 12px; color: #333333; background: #F1F1F1; padding: 3px; width: 120px; margin: 1px 0;}#treenav a { text-decoration: none; color: #666666;}#treenav a:hover { color: #990000;}
JS代码

function toggleMenu(id){
element = document.getElementById(id);
element.className = (element.className.toLowerCase() == 'expanded'?'collapsed':'expanded');
}
onload = function() {
toggleMenu('submenuid');
}

时间: 2016-07-07

DIV+CSS构成的树型菜单的相关文章

Div+CSS+JS树型菜单,可刷新

css|js|菜单|刷新 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

可刷新的Div+CSS+JS树型菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

JS+CSS实现类似QQ好友及黑名单效果的树型菜单_javascript技巧

本文实例讲述了JS+CSS实现类似QQ好友及黑名单效果的树型菜单.分享给大家供大家参考.具体如下: 今天介绍的这个菜单堪称极品啊,不过里面的有些图标丢失了,路径还留在那,真想使用的朋友自己制作两个折叠菜单的图标按路径传上去就行了,这个菜单是模仿QQ面板的菜单功能,很多朋友还是很喜欢这种功能的,没想到用这么少的JS代码也可实现 ,值得代签哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-qq-hy-hmd-style-menu-c

javascript dtree: javascript树型菜单 dtree

js代码很简洁,但是实现了所有树形菜单应有的功能,安装和使用都很简单,特别是从数据库恢复成一棵树变得非常容易.下载包里自带一些常用图标,只需简单的操作,就可以实现看起来相当专业的树形菜单. 详细介绍应用dtree构建一个javascript树型菜单及其中参数配置说明 这几天写了个网站,用了一个javascript写的树型菜单,有网友问我要这个代码,很奇怪,了解一下,原来网上很多文章都在讨论js树型菜单,看了几个实例,发现确实没有我用的这个好,因此baidu了一下,略作整理,希望大家不要浪费无用功

使用函数递归实现基于php和MySQL的动态树型菜单

mysql|菜单|递归|动态|函数 树型菜单在很多桌面应用系统中都有非常广泛的应用,其主要优点是结构清晰,利于使用者非常清楚的知道目前自己所在的位置.但在web上树型菜单的应用因 为没有理想的现成组件可以拿过来直接使用,所以一般的情况下,程序员主要是通过JavaScript来实现一些简单的树型结构菜单,但这些菜单往往都是事先定 好各菜单项目,以及各菜单项目之间的层次关系,不利于扩充,一旦需要另一个菜单结构时,往往还需要重新编写,因此使用起来不是很方便. 经过对函数递归的研究,我发现这种树型菜单可

跟我学做树型菜单(二)

菜单 续上篇 上一篇我们已经确定了树型菜单的功能,数据库结构,以及所要用到的一些函数.现在可以开始程序的设计了.由于树型菜单要在网页上实现动态展开子树的效果,所以需要用到DHTML.我们先来分析一下如何在客户端实现这样的动态效果. 一.实现动态菜单的客户端 在这里,我们先不管ASP的程序,仅来分析一下如何在客户端的网页中实现展开菜单的动态效果.首先,要展开一个子菜单,可以把子菜单放在一个图层或者一个表格里,用CSS样式里的dsiplay属性来控制它.如果把display属性设为none,则隐藏这

实现基于php和MySQL的动态树型菜单

树型菜单在很多桌面应用系统中都有非常广泛的应用,其主要优点是结构清晰,利于使用者非常清楚的知道目前自己所在的位置.但在web上树型菜单的应用因为没有理想的现成组件可以拿过来直接使用,所以一般的情况下,程序员主要是通过JavaScript来实现一些简单的树型结构菜单,但这些菜单往往都是事先定好各菜单项目,以及各菜单项目之间的层次关系,不利于扩充,一旦需要另一个菜单结构时,往往还需要重新编写,因此使用起来不是很方便.   经过对函数递归的研究,我发现这种树型菜单可以通过递归函数,使树型菜单的显示实现

使用函数递归实现基于php和MySQL的动态树型菜单_php基础

    树型菜单在很多桌面应用系统中都有非常广泛的应用,其主要优点是结构清晰,利于使用者非常清楚的知道目前自己所在的位置.但在web上树型菜单的应用因为没有理想的现成组件可以拿过来直接使用,所以一般的情况下,程序员主要是通过JavaScript来实现一些简单的树型结构菜单,但这些菜单往往都是事先定好各菜单项目,以及各菜单项目之间的层次关系,不利于扩充,一旦需要另一个菜单结构时,往往还需要重新编写,因此使用起来不是很方便.     经过对函数递归的研究,我发现这种树型菜单可以通过递归函数,使树型菜

用PHP实现windows资源管理器风格的树型菜单

window|菜单 以下是一个风格类似windows资源管理器的树型菜单 将下面的脚本包含到你的页面中 另外需要从资源管理器中截取一些gif图片,祥见脚本中的注释 菜单结构文件的格式为: tree level|item text|item link|link target|last item in subtree 例如 .<b>Demo menu</b>|javascript: alert('This is the demo menu for TreeMenu 1.0'); ..&