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

二级菜单效果(3)

阅读更多

 

html代码结构:

<li class="menu">
	<div><span class="l">&nbsp;</span><a href="#">线路</a><span class="r">&nbsp;</span></div>
	<ol>
		<li><a href="#">线路预订</a></li>
		<li><a href="#">线路管理</a></li>
	</ol>
</li> 

 菜单按照上面的结构<li class="menu"></li>循环下去

 

js代码结构:

<script type="text/javascript">
	$(document).ready(function(){
		$(".nav li.menu").each(function(){
			$(this).hover(
				function(){
					$(this).addClass("menu_hover");
					positionEvent("ol",this);
					$("ol",this).fadeIn("fast");},
				function(){$(this).removeClass("menu_hover");});
				if(document.all){
					$(this).hover(
						function(){
							$(".nav li.menu").removeClass("menu_hover2");
							positionEvent("ol",this);
							$(this).addClass("menu_hover menu_hover2");},
						function(){
							$(this).removeClass("menu_hover menu_hover2");}
					);
				}
		});
	});
	function positionEvent(object,id){
		var liWidth = $(id).width();
		var olWidth = $(object,id).width();
		var offset = $(id).offset();
		var leftPosition = offset.left - (olWidth - liWidth)/2;
		$(object,id).css("left",leftPosition);
	}
</script>

 positionEvent()是用来为二级菜单定位的方法,leftPosition值是子菜单相对于父菜单水平居中时距离父容器的左距离。

 

二级菜单绝对定位后用top:-999px隐藏起来,然后支持伪类的浏览器就可以不运行if(document.all){},通过:hover方法让top:25px就能让二级菜单显示出来达到效果。

ie浏览器不支持伪类,if(document.all){}就是为ie而写的,通过鼠标略过和移走分别添加和移除menu_hover2样式,其目的和:hover一样让top:25px.

 

二级菜单效果(1)

二级菜单效果(2)

  • 大小: 14.1 KB
分享到:
评论

相关推荐

    wpf自定义漂亮的二级菜单

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

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

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

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

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

    ListView实现二级菜单

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

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

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

    二级菜单的应用

    3. 易用性:避免过多的层级,通常二级菜单已足够,过度的深度会让用户感到困扰。 4. 反馈:当用户选择二级菜单项时,应提供视觉反馈,如高亮或颜色变化,让用户知道他们的选择已被接收。 在实际项目中,通过分析...

    flash as3.0二级菜单

    3. **事件移除**:为了防止鼠标离开一级菜单时二级菜单仍然显示,我们需要在一级菜单上添加`mouseout`事件监听器,并在对应的事件处理函数中隐藏二级菜单: ```actionscript myTopLevelMenuItem.addEventListener...

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

    3. **过渡和动画**:为了增加用户体验,可以利用CSS的`transition`属性创建平滑的过渡效果,例如,二级菜单在显示和隐藏时的淡入淡出效果。 4. **响应式设计**:考虑到不同设备的屏幕尺寸,二级菜单可能需要适应...

    js二级导航菜单

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

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

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

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

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

    recyclerview优化以及二级菜单展开

    RecyclerView的优化和二级菜单的展开是提高用户体验的关键技术。本文将深入探讨这两个主题,帮助开发者创建流畅、高效的Android应用。 首先,RecyclerView优化是确保应用性能的重要一环。以下是一些关键的优化策略...

    各类二级菜单的实现

    3. **移动应用实现**:在iOS和Android平台上,二级菜单的实现有所不同。在iOS中,可以使用`UIPopoverController`(已废弃)或`UIPopoverPresentationController`配合`UITableView`来实现;在Android中,可以利用`...

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

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

    asp 二级下拉菜单 二级菜单

    3. **JavaScript交互**:当鼠标悬停在一级菜单项上时,通过JavaScript显示或隐藏对应的二级菜单。此外,可能还需要处理点击事件,例如链接跳转或展开/关闭子菜单。 4. **ASP动态生成**:如果菜单项是从数据库获取的...

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

    【京东首页+京东二级菜单(原版效果)】是一个关于京东网站前端开发的资源,主要涉及的是京东二级菜单的设计和实现。这个资源可能是从京东官方网站上精确克隆下来的,因此可以保证是“绝对的原版”,供开发者学习和...

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

    3. 悬停弹出:二级菜单以弹出框的形式出现,可以避免遮挡页面其他内容。 为了实现良好的用户体验,设计师还需要考虑以下几点: - 延迟加载:二级菜单不应该立即显示,而是应有一定的延迟,防止用户无意间触发。 - ...

    android二级菜单

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

    竖向二级菜单

    虽然仅使用CSS可以实现基本的二级菜单滑动效果,但为了实现更复杂的交互,如延迟显示、动画速度控制,可以使用JQuery。以下是一个简单的JQuery实现示例: ```javascript $(document).ready(function() { $('.main-...

Global site tag (gtag.js) - Google Analytics