`
ice-cream
  • 浏览: 329122 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

二级菜单效果（2）

JavaScriptXHTMLCSSHTML 
阅读更多 

<!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=utf-8" />
<title>nav</title>
<script type=text/javascript>
<!--
var LastLeftID = "";

function DoMenu(emid){
	var obj = document.getElementById(emid); 
	obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
	if((LastLeftID!="")&&(emid!=LastLeftID)){
		document.getElementById(LastLeftID).className = "collapsed";
	}
		LastLeftID = emid;
}
-->
</script>

<style type="text/css">
<!--
ul,li,a{margin:0;padding:0;}

body {
 font-family: Arial,Verdana,Helvetica,sans-serif;
 font-size:12px;
}

#nav {
 width:180px;
 list-style-type: none;
 text-align:left;
 margin:10px 0 0 10px;
}

#nav a {
 width: 180px; 
 display: block;
 padding:5px 0 5px 20px;
}

#nav li {
 background:#cccccc;
 border-bottom:#ffffff 1px solid;
 float:left;
}

#nav li a:hover{
 background:#cc0000;
}

#nav a:link  {
 color:#666;
 text-decoration:none;
}

#nav a:visited  {
 color:#666;
 text-decoration:none;
}

#nav a:hover  {
 color:#ffffff;
 text-decoration:none;
 font-weight:bold;
}

#nav li ul {
 list-style:none;
 text-align:left;
 padding:0;
}

#nav li ul li{ 
 background: #ebebeb;
}

#nav li ul a{
 padding-left:20px;
 width:180px;
}

#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;
}

#nav li:hover ul {
 left: auto;
}
#nav li.sfhover ul {
 left: auto;
}
#content {
 clear: left; 
}
#nav ul.collapsed {
 display: none;
}
-->
</style>
</head>
<body>
<ul id="nav">
	<li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">menu1</a>
		 <ul id="ChildMenu1" class="collapsed">
			 <li><a href="#">first</a></li>
			 <li><a href="#">second</a></li>
			 <li><a href="#">third</a></li>
			 <li><a href="#">forth</a></li>
			 <li><a href="#">fifth</a></li>
		 </ul>
	</li>
	<li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">menu2</a>
		 <ul id="ChildMenu2" class="collapsed">
			 <li><a href="#">first</a></li>
			 <li><a href="#">second</a></li>
			 <li><a href="#">third</a></li>
			 <li><a href="#">forth</a></li>
			 <li><a href="#">fifth</a></li>
		 </ul>
	</li>
	<li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">menu3</a>
		 <ul id="ChildMenu3" class="collapsed">
			 <li><a href="#">first</a></li>
			 <li><a href="#">second</a></li>
			 <li><a href="#">third</a></li>
			 <li><a href="#">forth</a></li>
			 <li><a href="#">fifth</a></li>
		 </ul>
	</li>
	<li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">menu4</a>
		 <ul id="ChildMenu4" class="collapsed">
			 <li><a href="#">first</a></li>
			 <li><a href="#">second</a></li>
			 <li><a href="#">third</a></li>
			 <li><a href="#">forth</a></li>
			 <li><a href="#">fifth</a></li>
		 </ul>
	</li>
</ul>
</body>
</html>
 
  • 大小: 17.4 KB
分享到：
| HTTP协议的几个重要概念
评论
2 楼 rebecca 2011-09-16  
var LastLeftID  这个变量代表什么？谢谢^^
1 楼 haizhan 2008-12-23  
看看了 学习学习 以后能用着
发表评论

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

相关推荐

    二级菜单效果（3）

    标题“二级菜单效果（3）”暗示我们将讨论一个关于二级菜单实现的系列内容中的第三个部分。 二级菜单通常出现在网站或应用程序的导航结构中，它为用户提供更深层次的导航选项，帮助他们更容易地访问复杂的信息架构...

    wpf自定义漂亮的二级菜单

    在Windows Presentation Foundation（WPF）框架中，创建自定义二级菜单是实现用户界面（UI）交互性和美观性的重要部分。WPF提供了丰富的功能和灵活性，允许开发者构建动态且具有高度定制性的界面。以下是对"wpf...

    鼠标悬浮显示二级菜单效果的jquery实现

    ### 鼠标悬浮显示二级菜单效果的实现 #### 1. HTML布局 在实现鼠标悬浮显示二级菜单效果之前，我们需要定义页面的基本结构。通过HTML代码，我们可以创建一个带有子菜单的父级菜单项。在这个例子中，我们使用了一个`...

    水平导航菜单+二级菜单效果

    在“水平导航菜单+二级菜单效果”这个项目中，主要使用了HTML（超文本标记语言）和JavaScript技术来实现这一功能。HTML是网页的基础，负责定义页面结构，而JavaScript则用来增加交互性和动态效果。 1. HTML部分： ...

    ListView实现二级菜单

    最后，为了提高用户体验，可以在一级菜单的ListView中使用HeaderView来显示二级菜单的标题，同时二级菜单的ListView可以使用HeaderView来模拟嵌套效果。这样，用户就能看到清晰的层级关系。 以上就是如何使用SQLite...

    鼠标经过显示二级菜单js效果

    本文将深入探讨如何使用JavaScript实现鼠标经过显示二级菜单的效果，以及这个效果的可拓展性。 首先，我们需要理解基本的HTML结构，通常一级菜单和二级菜单可以通过`&lt;ul&gt;`和`&lt;li&gt;`标签来构建。一级菜单的每个项目都...

    经典的CSS二级菜单修改：二级菜单为水平式2

    本文将深入探讨标题“经典的CSS二级菜单修改：二级菜单为水平式2”所涉及的知识点，并基于描述中提及的博文《CSS二级菜单》进行详细解析。 首先，CSS（层叠样式表）是用于控制网页元素样式的重要工具。在制作二级...

    二级菜单的应用

    2. 一致性：二级菜单的布局和交互应保持在整个应用或网站中的一致性，以便用户形成使用习惯。 3. 易用性：避免过多的层级，通常二级菜单已足够，过度的深度会让用户感到困扰。 4. 反馈：当用户选择二级菜单项时，应...

    android 二级菜单、双ListView 仿美团、购物二级菜单

    - 布局文件中，一级菜单ListView和二级菜单ListView需用到`&lt;include&gt;`标签进行嵌套，以实现联动效果。 2. **自定义适配器**： - 创建自定义的Adapter，用于填充两个ListView的数据。适配器需要持有两个列表数据源...

    js二级导航菜单

    一个简单的二级导航菜单通常由一级菜单项和二级子菜单组成。一级菜单通常显示在页面的顶部或侧边，当用户悬停在某个一级菜单项上时，相应的二级子菜单会滑出或展开。这种效果可以通过CSS实现静态样式，但动态交互...

    flash as3.0二级菜单

    2. **事件处理函数**：创建`showSubMenu`函数，该函数负责显示二级菜单。这通常涉及到改变二级菜单的可见性属性（`visible`）和透明度（`alpha`）： ```actionscript function showSubMenu(event:MouseEvent):void...

    recyclerview优化以及二级菜单展开

    2. 适配器结构：设计一个包含两个级别的适配器，一级适配器管理所有一级菜单，二级适配器管理对应的一级菜单下的二级菜单。 3. 监听点击事件：在一级菜单的ViewHolder中设置点击监听，点击时展开或收起对应的二级...

    竖向二级菜单

    二级菜单2-2 ``` 三、CSS美化 通过CSS，我们可以定义菜单的样式，如颜色、字体、边距等，以及二级菜单的滑入滑出效果。例如，我们可以设置隐藏二级菜单，然后在鼠标悬停时显示： ```css .sub-menu { ...

    非常酷炫的jQuery+css超滑二级下拉菜单

    2. 子菜单项：二级菜单，隐藏在主菜单项之下，根据用户交互动态显示。 3. 布局样式：使用浮动、相对定位或绝对定位来确保子菜单在主菜单下方正确显示，同时避免遮挡其他内容。 4. 动画效果：利用CSS3的`transition`...

    鼠标移到菜单上弹出二级菜单特效

    "鼠标移到菜单上弹出二级菜单特效"是一个常见的网页交互元素，尤其适用于导航菜单。这种特效通常用于当用户将鼠标悬停在主菜单项上时，会展示出与之相关的子菜单项，以便用户能够更快速地访问他们感兴趣的内容。 在...

    android二级菜单

    "android二级菜单"这个主题就涉及到了如何构建一个多层级的导航结构，并且加入了独特的折纸动画效果，来提升用户体验。折纸动画是一种视觉表现手法，它能够使用户界面更具吸引力，同时也为用户提供了一种动态的反馈...

    asp 二级下拉菜单 二级菜单

    在这个场景中，"asp 二级下拉菜单 二级菜单" 的目标是利用ASP技术实现一个可以展示网站栏目二级子菜单的下拉功能。 首先，我们来看看`main.asp`文件。这个文件很可能是页面的主要入口点，包含整个下拉菜单系统的...

    各类二级菜单的实现

    在IT领域，二级菜单是一种常见的用户界面元素，用于在主菜单下组织更具体的子功能或选项。在诸如美团、大众点评、淘宝和饿了么这样的应用程序中，二级菜单发挥着至关重要的作用，帮助用户快速定位并访问他们需要的...

    京东首页+京东二级菜单(原版效果)

    2. **CSS 样式**：二级菜单的外观和动画效果由 CSS 控制。这可能涉及到定位（absolute 或 fixed）、过渡效果（transition）、动画（animation）以及响应式设计（媒体查询），确保在不同屏幕尺寸下都能良好展示。 3....

    头部超级菜单导航-鼠标放上去显示二级菜单

    2. 垂直展开：二级菜单在一级菜单右侧垂直下降，适合窄屏或空间有限的界面。 3. 悬停弹出：二级菜单以弹出框的形式出现，可以避免遮挡页面其他内容。 为了实现良好的用户体验，设计师还需要考虑以下几点： - 延迟...

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