`

jquery导航菜单

    博客分类:
  • Html
阅读更多
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript">
		 (function(a){
			a.fn.hoverClass=function(b){
				var a=this;
				a.each(function(c){
					a.eq(c).hover(function(){
						$(this).addClass(b)
					},function(){
						$(this).removeClass(b)
					})
				});
				return a
			};
		})(jQuery);

		$(function(){
			$("#navbox").hoverClass("current");
		});
	</script>
	<style type="text/css">
		*{margin:0;padding:0;list-style-type:none;}
		a,img{border:0;}
		a{color:#333;text-decoration:none;}
		a:hover{color:#3366cc;text-decoration:underline;}
		body{font:12px/180% "宋体";}
		/* menu */
		
		.menu{height:26px;width:110px;margin:20px auto;background:#fff;position:relative;}
		.menu a{display:block;height:24px;line-height:24px;padding:0 0 0 10px;border:solid 1px #ddd;}
		.menu .subnav{display:none;background:#fff;position:absolute;top:25px;left:0px;width:110px;border:solid 1px #ddd;}
		#navbox.current .subnav{display:block;}
		.menu .subnav a{border:none;}
		.menu .subnav a:hover{background:#eee;border-left:solid 1px #fff;border-right:solid 1px #fff;font-weight:bold;}
	</style>
</head>

<body>




<div id="navbox" class="menu">
	<a class="tit" href="#">jquery特效</a>
	<ul class="subnav">
		<li><a href="http://www.mb5u.com/">jquery图片特效</a></li>
		<li><a href="http://www.mb5u.com/">jquery导航菜单</a></li>
		<li><a href="http://www.mb5u.com/">jquery选项卡特效</a></li>
		<li><a href="http://www.mb5u.com/">jquery文字特效</a></li>
		<li><a href="http://www.mb5u.com/">jquery表单特效</a></li>
		<li><a href="http://www.mb5u.com/">jquery表格特效</a></li>
	</ul>
</div>

 

分享到:
评论

相关推荐

    jQuery导航菜单背景切换特效.zip

    jQuery导航菜单背景切换特效

    jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单

    jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单

    三款不错的jquery导航菜单

    今天我们将深入探讨三款优秀的jQuery导航菜单及其特点。 1. **Superfish** Superfish是一款广泛使用的jQuery导航菜单插件,它提供了许多高级特性,如下拉子菜单、悬停效果和无障碍访问。Superfish的亮点在于其良好...

    jquery插件之jquery导航菜单(垂直风格)

    标题中的"jquery插件之jquery导航菜单(垂直风格)"指的就是利用jQuery技术制作的一种特定样式——垂直布局的导航菜单。这种菜单通常出现在页面的左侧或右侧,使得用户可以轻松地通过点击各个菜单项来访问不同的页面...

    Jquery导航菜单栏

    **jQuery 导航菜单栏详解** 在Web开发中,导航菜单栏是页面布局的重要组成部分,它帮助用户快速浏览和访问网站的不同部分。jQuery作为一个强大的JavaScript库,提供了丰富的功能来简化和美化网页上的交互,包括创建...

    jQuery导航菜单动画渐入渐出特效

    要实现“jQuery导航菜单动画渐入渐出特效”,我们需要遵循以下步骤: 1. **HTML结构**:构建基础的HTML导航菜单。通常,导航菜单由`&lt;ul&gt;`和`&lt;li&gt;`元素组成,每个`&lt;li&gt;`元素代表一个菜单项。例如: ```html &lt;li&gt;...

    横向滚动jQuery导航菜单

    横向滚动的jQuery导航菜单是一种常见的网页交互设计,它允许用户在水平方向上浏览长菜单,尤其是在网站顶部作为主导航使用时,能有效地节省空间并提升用户体验。这种菜单通常具有动态效果,例如当鼠标悬停在某一个...

    Metro风格jQuery导航菜单 Metro风格jQuery导航菜单网页特效.zip

    【标题】中的“Metro风格jQuery导航菜单”是指一种基于jQuery库设计的网页导航菜单,它采用了微软Windows 8操作系统引入的“Modern UI”或“Metro”设计语言的风格。这种风格以其简洁、清晰和模块化的界面设计而闻名...

    jQuery导航菜单切换插件

    在“jQuery导航菜单切换插件”中,开发者可能已经封装了一些通用的功能,比如自动激活当前页面对应的菜单项,平滑滚动到相应内容等。使用插件的好处在于,它可以简化代码,减少重复工作,并且通常经过优化,性能较好...

    几十种jquery导航菜单总有一个你喜欢

    本文将详细探讨“几十种jQuery导航菜单”这个主题,涵盖其中可能包含的各种类型、效果和实现方法。 1. 滑动菜单:jQuery可以实现菜单项的滑动效果,如水平滑动、垂直滑动。这种菜单在点击时会以平滑的方式展开或...

    jquery导航菜单下拉特效插件

    本篇文章将深入探讨“jQuery导航菜单下拉特效插件”的相关知识点。 首先,我们来理解jQuery的基本概念。jQuery是由John Resig开发的一个轻量级的JavaScript库,它的目标是简化HTML文档遍历、事件处理、动画和Ajax...

    jquery导航菜单制作横向二级导航菜单设置当前频道高亮特效

    本文将详细介绍如何使用jQuery来创建一个具有横向二级导航菜单,并实现当前频道高亮的特效。 首先,我们需要理解jQuery的基本概念。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、...

    html+css+jquery导航菜单

    这可能是一个压缩文件,包含了一个简洁的垂直方向的jQuery导航菜单的源代码,适用于节省空间的布局。 9. **jquery动画菜单熔岩灯菜单效果 jsfoot 网页特效_files**、**images**、**jquery**、**jquery二级下拉菜单...

    三级导航为图片的jquery导航菜单

    【jQuery导航菜单】是一种在网页设计中常用的交互元素,它能帮助用户更高效地浏览网站内容,特别是当网站有复杂的层级结构时。本教程将详细讲解如何使用jQuery创建一个以图片为指示的三级导航菜单。 首先,理解...

    可自由缩放的jQuery导航菜单

    【可自由缩放的jQuery导航菜单】是一种网页设计技术,主要利用JavaScript库jQuery实现动态的、响应用户交互的导航栏效果。在网页设计中,一个优秀的导航菜单是至关重要的,因为它能够帮助用户轻松地浏览网站内容,...

    21CN官网jQuery导航 21CN官网jQuery导航菜单代码下载.zip

    描述中的“21CN官网jQuery导航菜单代码下载.zip”表明这是一个包含21CN官网导航菜单源代码的压缩文件,可供开发者下载学习或在自己的项目中使用。用户可以解压文件,查看和分析代码,理解其工作原理,并可能根据需求...

    jquery导航菜单插件制作常用的jquery二级下拉菜单子内容

    jquery导航菜单插件制作常用的jquery二级下拉菜单子内容 jquery导航菜单插件制作常用的jquery二级下拉菜单子内容 jquery导航菜单插件制作常用的jquery二级下拉菜单子内容

Global site tag (gtag.js) - Google Analytics