`

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

CSSFirefox.netXHTML工作 
阅读更多 
<!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-Type" content="text/html; charset=gb2312"> 
<title>Div+CSS+JS树型菜单，可刷新</title> 
<meta name="description" content="http://www.livepo.com"> 
<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> 
</head> 

<body> 
<div id="PARENT"> 
<ul id="nav"> 
<li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">我的网站</a> 
    <ul id="ChildMenu1" class="collapsed"> 
    <li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li> 
    <li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li> 
    <li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li> 
    </ul> 
</li> 
<li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帐务</a> 
    <ul id="ChildMenu2" class="collapsed"> 
    <a href="http://www.netany.net" target="_blank">支付</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" onclick="DoMenu('ChildMenu3')">网站管理</a> 
    <ul id="ChildMenu3" class="collapsed"> 
    <li><a href="#">登录</a></li> 
    <a href="http://www.netany.net" target="_blank">管理</a></li> 
    <li><a href="#">管理</a></li> 
    <li><a href="#">管理</a></li> 
    </ul> 
</li> 
<li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">网站管理</a> 
    <ul id="ChildMenu4" class="collapsed"> 
    <li><a href="#">登录</a></li> 
    <a href="http://www.netany.net" target="_blank">管理</a></li> 
    <li><a href="#">管理</a></li> 
    <li><a href="#">管理</a></li> 
    </ul> 
</li> 
</ul> 
</div> 

<div style="width:300;padding-left:30px;"> 
</br></br> 
工作需要搞了一个菜单，分享给大家，大家一齐学习 
</br></br> 
<p>请大家支持:<a href="http://www.netany.net" target="_blank">[url]http://www.netany.net[/url]</a></p> 
</div> 
</body> 
</html> 
<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].onmouseover=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].onmouseout=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>
分享到：
| 測試代碼真方便
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Div+CSS+JS树型菜单

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

    DIV+CSS+JS二级树型菜单

    DIV+CSS+JS二级树型菜单，二级菜单展开后刷新无影响

    DIV+CSS+JS二级树型菜单，ul li展开后刷新无影响

    本资源是一篇关于使用 DIV、CSS 和 JS 实现二级树型菜单的教程。菜单可以展开多个栏目，刷新后不受影响。作者已经修正了原作中的错误，即#nav li的背景色和背景图片分开写了，造成背景色不生效。现在，菜单的背景色...

    DIV+CSS+JS二级树型结构，主要用于网站信息说明，展开后刷新无影响

    DIV+CSS+JS二级树型菜单，展开后刷新无影响，可自定义颜色，大小等

    Div+CSS+JS树型菜单，可刷新.html

    工作需要，搞了一个树形菜单，大家一起学习

    无限级可刷新Js树型菜单代码

    根据给定的信息，本文将详细解释“无限级可刷新Js树型菜单代码”的知识点，包括其功能、实现原理以及应用场景。 ### 一、无限级可刷新Js树型菜单概述 在网页开发中，树型菜单是一种非常常见的导航结构，它能够帮助...

    无限级可刷新Js树型菜单

    无限级可刷新Js树型菜单是一种常见的前端交互设计，它基于HTML、CSS和JavaScript技术实现，主要用于展现层次结构数据，如目录、组织架构或者多级分类等。在网页中，这种菜单通常以折叠和展开的形式展示，用户可以...

    网页特效收藏收藏收藏

    7. **Div+CSS+JS树型菜单，可刷新**：树型菜单适用于层级结构的内容展示，通过CSS样式控制其布局，而JavaScript负责展开/折叠节点以及刷新数据，确保用户能轻松地浏览多级分类信息。 8. **不用js实现的css下拉菜单...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    JsWeb 传统的JavaScript模式实现刷新 IframeWeb 基于框架的不刷新模式 AjaxWeb 基于Ajax的Web 2.0模式的刷新模式 AsyncAjaxSample Ajax异步调用的完整示例 第2章（/C02/） 2.1.htm 3...

    程序天下:JavaScript实例自学手册

    11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的方法 12.6 关闭窗口时的提示 12.7 定时弹...

    《程序天下：JavaScript实例自学手册》光盘源码

    11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的方法 12.6 关闭窗口时的提示 12.7 定时弹...

    javascript代码常用大全

    - 通过 JavaScript 和 CSS 实现交互式的下拉菜单。 - **5.5 两层或多层次的下拉菜单** - 更加复杂的菜单结构，支持多级展开。 - **5.6 仿IE菜单的按钮** - 模仿 IE 浏览器菜单的设计风格。 - **5.7 状态栏，title...

    jstree1.0

    **jstree1.0** 是一个用于创建交互式树型结构的JavaScript库，它允许开发者在网页上构建可操作的、丰富的树形组件。这个库特别适合于展示层次结构的数据，例如文件系统、组织结构或者导航菜单。由于其开源且具有高度...

    javascript常用函数代码大全.docx

    - **下拉菜单**: 创建可扩展的菜单。 - **多层次下拉菜单**: 仿照IE的多级导航菜单。 - **状态栏和标题栏动态效果**: 提供动态更新信息的界面元素。 **三、其他类别** 包括树型结构、无边框效果、联动下拉框、...

    Ajax框架——jquery树

    在IT领域，Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下更新部分网页内容的技术，极大地提升了用户体验。在本话题中，我们将探讨一种基于Ajax的jQuery框架，用于实现树形结构，即...

Magicbox
Global site tag (gtag.js) - Google Analytics