本文实例讲述了JS+CSS简单树形菜单实现方法。分享给大家供大家参考。具体如下： 这是一款不错的CSS树形菜单，树状列表，当然不全是CSS实现，部分功能还使用了JavaScript代码进行配合，删减了修饰用的菜单图片，大家用的时候自己图片加进去，IMG标签大部分都预留了出来，稍懂Html语法的朋友很容易就看懂的。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-simple-tree-menu-style-codes/ 具体代码如下...
本文实例讲述了基于jquery实现的树形菜单效果代码。分享给大家供大家参考。具体如下： 这是一款基于jquery实现的树形菜单代码，点击菜单项可以向下滑出对应的二级菜单，效果流畅自然。 先来看看运行效果截图：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-tree-style-show-menu-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans...
本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法。分享给大家供大家参考。具体如下： 这里演示在下拉列表框中显示分级的菜单，在很多网站都可以看到的效果，很实用，下拉列表框中的选项是利用JS控制输出，如果你有更好的办法不用JS来显示，那最好了，因为像这种菜单用JS来实现，多多少少有点麻烦。 运行效果截图如下：具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww...
本文实例讲述了javascript实现树形菜单的方法。分享给大家供大家参考。具体如下： var ME={ini:{i:true,d:{},d1:{},h:0,h1:0,h2:0},html:function(da,f){var s=<ul+(f? class="f":)+>;for(var i=0,l=da.length;i<l;i++){if(typeof(da[i].pid)==object){s+=<li><button type="button" class="+(i==0&&this.ini.i?s1:(i+1==l?s5:s3))+" onclick="ME.yc(this)"></button><span><button type="button" class="r1"></button><a href="ja...
通过设置cookie来保存树形菜单的状态，在页面加载时重新读取cookie来设置菜单。 菜单的HTML结构： <div class="treemenu"> <ul> <li> <a href="#" id="treemenu_a_1">一级菜单一</a> <div class="submenu" id="submenu_1"> <ul> <li><a href="subpage/a.html" id="submenu_a_1_1">二级菜单一</a></li> <li><a href="subpage/b.html" id="submenu_a_1_2">二级菜单二</a></li> <li><a href="#" id="submenu_a_1_3">二级菜单三</a></l...
代码如下:<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <hrad> <metahttp-equiv="content-type"content="text/html;charset=utf-8"> <title>可折叠的两级菜单</title> <styletype="text/css"> <!-- body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial; } #navigation > ul { list-style-type:none; margin:0...
我练习一下，以免不时之需。 树形菜单不过就是把普通菜单重新排列一下，看起来像树形而已。上图京东的菜单，给他多几个嵌套，然后添加收缩伸展事件，差不多就行了。 给个例子: 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style...
准备工作： 请从脚本之家//www.gxlcms.com/jiaoben/31974.html下载dtree.zip文件 dtree.zip压缩包介绍： dtree是一个由JavaScript编写成的简单的树形菜单组件，目前免费并且开源。 目前有很多的树形菜单组件(比如ext)，dtree是一种简单易懂的js组件， 不需要复杂的操作即可生产，同时支持动态从数据库引入数据 解压后有以下几部分： img文件夹： 包含树形菜单显示需要的图标 api.html ： 作者写的dtree帮助文档 dtree.css： 树...
Checkbox body{font-size:12px;} .panel {BORDER-RIGHT: #d4d0c8 3px double; OVERFLOW-Y: scroll; PADDING-LEFT: 5px; BORDER-TOP: #d4d0c8 2px ridge; BORDER-LEFT: #808080 2px ridge; BORDER-BOTTOM: #d4d0c8 3px double; HEIGHT: 250px} .parent {PADDING-LEFT: 15px} .child {PADDING-LEFT: 30px} // CheckBoxList 选框 function chkbox(obj) { var chk = obj.all.tags("input"); var count = chk.length; if (event.s...
/* Susy Menu Class, version 2.0.0 * 2007 shaoyu su * * Susy-Menu Class is freely distributable . * * *--------------------------------------------------------------------------*/ var CONTEXT_PATH=''; var NS = (navigator.appName=="Netscape")?true:false; var EXCEPTION_INFO = {EvalError:'eval()use error', RangeError:'num overflow', ReferenceError:'illegal or no can identify num', SyntaxE...
Div+CSS+JS树型菜单，可刷新 ... *{...}{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; ...