网站用户体验整合设计-标准树状导航菜单

标准树状导航菜单

Post by 张美工, 2009-7-24, Views:

<!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>无标题文档</title>
</head>
　<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>

<div id="PARENT">
<ul id="nav">
<li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">我的网站</a>
   <ul id="ChildMenu1" class="collapsed">
   <li><a href="3.html">网页陶吧</a></li>
   <li><a href="#">管理</a></li>
   <li><a href="http://www.zhangmeigong.cn" target="_blank">网页陶吧</a></li>
   <li><a href="#">管理</a></li>
   <li><a href="http://www.zhangmeigong.cn" target="_blank">网页陶吧</a></li>
   <li><a href="#">管理</a></li>
   </ul>
</li>
<li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帐务</a>
   <ul id="ChildMenu2" class="collapsed">
   <a href="http://www.zhangmeigong.cn" target="_blank">支付</a></li>
   <li><a href="#">管理</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.zhangmeigong.cn" 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.zhangmeigong.cn" target="_blank">管理</a></li>
   <li><a href="#">管理</a></li>
   <li><a href="#">管理</a></li>
   <li><a href="#">管理</a></li>
   </ul>
</li>
</ul>
</div>

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

DIV+CSS 内容目录总 　为了方便喜欢网站UE设计的各位朋友讨论和学习,特地将DIV+CSS全部内容的目录罗列出来　　　　　　　　　　　　　　　　　　

# 标准树状导航菜单
# 纯div+css实现下拉菜单
# 纯div+css实现简洁型圆角矩形
# CSS无图片无锯齿完美圆角边框
# 纯CSS实现圆角框
# 体验div+css 之圆角框(CSS3.0)
# 体验css+div 之圆角框
# 体验css+div 之层叠和特殊性

#  css之自动换行
# 鼠标事件大全
# CSS控制连续英文字母或数字强制换行
# 让css使网页图片半透明
# 体验css+div 之背景透明内容不透明的写法
# 体验css+div 之给整个页面添加渐变背景
# 用css样式控制做成的按钮,取代图片按钮
# 体验css+div 之鼠标经过按钮发生变化效果
# 体验css+div 之文本框自适应窗口宽度
# 体验css+div 老问题重新讲“怎样使页面整体居中”
# 体验css+div 之使用自动空白边让设计居中
# 体验css+div之图像替换 1.徽标图像替换

# Dreamweaver的超级技巧汇总(6)
# Dreamweaver的超级技巧汇总(5)
# Dreamweaver的超级技巧汇总(4)
# Dreamweaver的超级技巧汇总(３)
# Dreamweaver的超级技巧汇总(2)
#  Dreamweaver的超级技巧汇总(1)
#  在线QQ MSN TEL交谈工具代码
#  方便使用的一些小简短input\form代码
#  VSS使用手册
#  JS表单判断函数代码大全 (三)
#  JS表单判断函数代码大全 (二)
#  JS表单判断函数代码大全

# I E和火狐的css兼容性问题归总
# 体验css+div 之　CSS hack:区分IE6，IE7，firefox
# 体验css+div 之兼容标准XHTML的浮动层特效实现
# 因为编码差异导致IE6不能正常解析CSS文件
# 商业网站响应用户需求重视与Firefox兼容

# frameset 的属性
# frameset元素属性详解、浮动框架的制作、超链接与框架的制作

# 体验css+div 之 SEO

# 40个网页常用小代码

# div+css样式几个小精华

# 网站用户体验--CSS常用小技巧

# 体验css+div 之 css技巧-经典中的经典

# 体验css+div 之 CSS样式表设计的十条技巧

# 体验css+div 之网页切图过程中div+css命名规则

# 网站用户体验--根据项目需求定义常用CSS2基本定义例子
# 体验css+div 之三种使网站背景图片自动适应浏览器大小的方法

# 创建锚链接

# 如何让单行文本框input与多行文本框textarea背景透明

# 用EditPlus转化文件格式到UTF-8
# 让长字符URL/Email自动换行

# HTML特殊字符显示

# 体验css+div定位与table定位代码的差异
# 体验css+div 之 TBody是什么意思?有什么作用?<TBODY>和<BODY>有和区别？

# 体验css+div 简单的滑动门效果代码

# 体验css+div 超实用的滑动门效果代码（css和代码都包含在内）

# 彻底弄懂CSS盒子模式(DIV布局快速入门)

# 如何把握网页布局
# 实例详解CSS网页布局原理

# 体验CSS+DIV 之基本布局

#  体验css+div 之解决流体布局的问题
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜弹性布局＞
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜流体布局＞
# 体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜固定宽度布局＞

# 体验css+div 之为什么css+div 会盛行
# 体验css+div中id和class各自的用法及区别

# 体验css+div 之规划、组织和维护样式表

# 体验css+div 之基本列表样式

# 体验css+div 之为样式找到目标

+

Tags: divcss 树状导航导航菜单

分类:css+div | 评论:0 | 引用:0

上一篇：纯div+css实现简洁型圆角矩形
下一篇：纯div+css实现下拉菜单

或许你还对下面的文章感兴趣

Comments

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章

最新评论

Guest