`
txf2004
  • 浏览: 7040134 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

可刷新的JS树形菜单特效

.netFirefoxCSSJavaScriptXHTML 
阅读更多

<!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"><a hreF="www.netany.net" target="_blank">www.netany.net</a></a></li>
<li><a href="http://www.netany.net" target="_blank"><a hreF="www.netany.net" target="_blank">www.netany.net</a></a></li>
<li><a href="http://www.netany.net" target="_blank"><a hreF="www.netany.net" target="_blank">www.netany.net</a></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>

</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>

http://www.corange.cn/archives/2008/10/2121.html

分享到：
| [ZZ][RIA]HTML5怎么就成了RIA“杀手”？
评论
发表评论

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

相关推荐

    三级树形下拉菜单，树形菜单javascript特效

    二、JavaScript在树形菜单中的应用 JavaScript是实现动态交互效果的关键，它可以创建三级树形下拉菜单的动画和交互性。通过监听用户的鼠标事件（如悬停、点击），JavaScript可以控制菜单项的展开和收起，以及显示...

    JavaScript特效，倒计时，分页，树形菜单，图片闪烁

    3. **树形菜单**：树形菜单是一种层次结构的展示方式，常用于导航或目录。在JavaScript中，可以通过遍历JSON数据或HTML结构，结合CSS样式来实现。常见方法包括递归函数来展开和折叠节点，以及改变子菜单的显示状态。...

    非常非常漂亮的JS导航菜单

    在提供的压缩包文件中，"JS树形菜单.txt"、"三级导航下拉菜单.txt"和"精致导航下拉菜单.txt"可能包含了一些示例代码或者实现思路，"可刷新的JS树形菜单特效.txt"可能详述了如何实现菜单的刷新功能。通过学习这些文件...

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

    【无限级可刷新Js树型菜单 dTree特效代码】是一种基于JavaScript实现的高效且灵活的树形菜单系统，尤其适用于需要展示多层级结构数据的Web应用。它具有以下几个关键特性： 1. **无限级菜单**：dTree允许开发者创建...

    漂亮的树形导航菜单.rar

    "漂亮的树形导航菜单"就是一个旨在提升用户体验的JS特效。这种菜单以树状结构展示，允许用户通过层级关系快速浏览和访问网站的内容。 树形导航菜单是一种常见的网页设计元素，它模仿了计算机文件系统中的目录结构。...

    jQuery点击展开收缩树形菜单特效代码

    "jQuery点击展开收缩树形菜单特效代码"是利用jQuery实现的一种常见的UI设计模式，它能够使网站的导航菜单更加直观和用户友好。这种树形菜单在点击时可以展开或收缩，通常用于展示层级结构的数据，如网站的分类目录、...

    jQuery自定义编辑的树形菜单特效代码

    本项目“jQuery自定义编辑的树形菜单特效代码”旨在实现一个可编辑、可添加和可删除功能的树形菜单，特别适用于如机房信息管理、课程表展示等场景。下面我们将深入探讨这个项目的相关知识点。 首先，我们要理解...

    较全的JS热门特效基础学习

    1. **JS树**：在网页设计中，树形结构常用于展现层级关系，如目录、组织架构等。JS树可以实现一级、二级甚至无限级节点的展示，通过递归或迭代方法创建节点，同时支持节点的展开与折叠，以及动态加载子节点数据。 2...

    jQuery下拉框树形分类菜单选择代码.zip

    这个"jQuery下拉框树形分类菜单选择代码.zip"压缩包提供了一个功能丰富的解决方案，用于创建交互式的下拉框树形菜单，这在数据分类和筛选时非常有用，比如在网站的导航或表单中。 该压缩包包含以下关键组件： 1. *...

    javascript快速入门+常用js特效源程序

    DOM是一个表示网页的树形结构，JavaScript可以通过DOM API来修改、添加或删除网页元素。例如，通过getElementById、getElementsByClassName、querySelector等方法选取特定元素，然后利用innerHTML、style等属性改变...

    JS+Jquery经典特效

    2. 组件应用：例如数据网格（datagrid）、表单（form）、菜单（menu）和树形视图（tree）的配置与操作。 3. 数据绑定：与后台数据源进行交互，实现数据的增删改查。 4. 行为控制：如按钮（button）、对话框（dialog...

    javascript得个人总结和一些特效实例

    3. **树形菜单**：在网页中组织大量分类信息时，树形菜单是非常有效的展示方式。JavaScript可以实现菜单项的展开与收缩，以及根据用户的交互动态更新结构。这对于导航和数据探索尤其有用。 4. **DOM操作**：...

    ajax,jquery 左侧树形导航效果

    在网页设计中，左侧树形导航是一种常见的布局方式，它能有效地组织大量信息，帮助用户快速定位和浏览网站内容。本知识点将深入探讨如何利用AJAX（Asynchronous JavaScript and XML）和jQuery技术来实现这样的效果，...

    Ajax 四级导航菜单ASP+Access动态版

    Ajax与ASP网页交互动态添加删除数据一例 Asp+Ajax无限级联动下拉框菜单Access版 ASP 树形菜单TreeView 多样式版 Ajax仿iGoogle双击编辑、网页拖动完整实例 ASP+jQuery无刷新读写数据库操作 Ajax提交数据实例_Ajax+...

    77种javascript特效全功略

    21. 树形结构：展示层次关系，如文件目录、组织架构等。 22. 时间线展示：以时间轴的形式呈现事件或历史发展。 23. 滚动监听：监听页面滚动事件，实现特定位置的触发效果。 24. 网页全屏：一键进入全屏模式，提升...

    触屏版HTML5左侧展开导航菜单手机wap网站特效源码

    2. **js**：这是一个包含JavaScript代码的文件夹，可能包含一个或多个.js文件。这些脚本负责实现触屏版导航菜单的动态效果，例如响应用户的触摸事件，实现菜单的动画过渡，以及可能的触控反馈。可能使用了jQuery或者...

    400多个css+javascript网页特效

    1. **拖拽效果**：JavaScript 提供了实现拖拽功能的能力，让用户能够通过鼠标操作页面元素，例如拖动树形列表、布局元素等，这在网页设计中常用于构建可自定义的界面。 2. **模块化编辑**：某些特效允许用户直接在...

    网页视觉特效大全

    2. **组件库**：Ext JS拥有一个庞大的组件库，如Grid（表格）、Tree（树形结构）、Form（表单）、Panel（面板）等，这些组件都具有丰富的样式和交互功能，可以快速构建出功能齐全的页面元素。 3. **数据绑定**：Ext...

    31个网站制作中有用的JS特效代码1

    24. **树形结构展开/收缩**：在展示层级结构数据时，JS可以实现节点的展开和收缩。 25. **全屏模式**：通过`screenfull.js`库，可以让网页进入全屏模式。 26. **粘性元素**：当元素接近屏幕边缘时，它可以固定在...

    jquery插件和特效

    9. **树形结构**：jQuery Treeview或jstree插件可以帮助在网页上呈现层次结构的数据，常见于目录导航或组织结构图。 10. **图片预览**：lightbox或fancybox插件实现了图片预览功能，当用户点击小图时，会在当前页面...

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