`

jquery实现导航nav

 
阅读更多

先规范JQuery代码结构组织如下

1,index.html

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Try JQuery</title>
  <link rel="stylesheet" href="styles/main.css" type="text/css" />
 </head>
 <body>
  <div id="main_container">
   test
  </div>
  <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
  <script src="scripts/main.js" type="text/javascript"></script>
 </body>
</html>

2,styles/main.css

#main_container {
 background-color: gray;
 width: 960px;
 margin: 0 auto;
}

3,scripts/main.js

$(document).ready(function(){
 alert("Hello");
});

$(function(){
 alert("World");
});

实现一个简单的导航栏

1,index.html

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Try JQuery</title>
		<link rel="stylesheet" href="styles/main.css" type="text/css" />
	</head>
	<body>
		<div id="main_container">
			<div id="navigation">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">旅店</a>
						<ul>
							<li><a href="#">单人间</a></li>
							<li><a href="#">双人间</a></li>
						</ul>
					</li>
					<li><a href="#">联系我们</a></li>
				</ul>
			</div>
			<div class="clear" />
			<div>
				test
			</div>
		</div>
		<script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
		<script src="scripts/main.js" type="text/javascript"></script>
	</body>
</html>

2,styles/main.css

/*
 base css
*/

* {
	margin: 0;
	padding: 0;
}

ul, li {
	list-style: none outside none;
}

.clear {
	clear: both;
}

/*
 page css
*/

#main_container {
	background-color: #eeeeee;
	width: 960px;
	margin: 0 auto;
}

#navigation {
	width: 960px;
}

#navigation ul li {
	float: left;
	margin-right: 20px;
	z-index:100;
	position: relative;
}

#navigation ul li a {
	display: block;
	background: #eeeeee;
	font-weight: 700;
}

#navigation ul li a:hover {
	background: none;
	color: red;
}

#navigation ul li ul {
	display: none;
	overflow: hidden;
	position: absolute;
	background-color: #88C366;
	width: 80px;
}

#navigation ul li:hover ul {
	display: block;
	position: absolute;
	width: 100px;
}

#navigation ul li ul li{
	border-bottom: 1px solid #BBB;
	text-align: left;
	width: 100%;
}

3,scripts/main.js

//导航效果(兼容IE6)
$(function(){
	$("#navigation ul li:has(ul)").hover(function(){
			$(this).children("ul").stop(true,true).slideDown(1000);
		},function(){
			$(this).children("ul").stop(true,true).slideUp("fast");
	});
})

 

分享到:
评论

相关推荐

    jQuery页面定位导航滚动插件jquery.nav

    jQuery实现简单漂亮的Nav导航菜单效果 ,滚动时自动高亮导航菜单 电商网站的分类比较明确,比如1楼是手机通讯产品,2楼是家用电器,3楼是服装鞋包等等,旁边还会有一个固定的楼层导航,这个导航列出了所有的楼层,...

    jquery.nav.js

    jquery.nav.js定位导航滚动插件,jquery实现定位导航

    用jQuery实现定位滚动导航效果

    以上就是一个基本的jQuery定位滚动导航效果实现过程。通过调整CSS样式和JavaScript逻辑,你可以根据实际需求定制更复杂的动画效果或交互行为。这个压缩包文件"定位滚动导航效果"可能包含了示例的HTML、CSS和...

    jQuery实现简单漂亮的Nav导航菜单效果

    本文实例讲述了jQuery实现简单漂亮的Nav导航菜单效果。分享给大家供大家参考,具体如下: 自己写的一个简单的导航菜单,先看效果: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项。 ...

    HTML+css+jQuery实现导航栏效果--pc端

    HTML+css+jQuery实现导航栏效果--pc端 适合前端,下载即可使用。 $(function(){ // 鼠标移入事件 $('.nav&gt;li').mousemove(function(){ $(this).addClass('active').siblings('li').removeClass('active') //...

    jquery实现多级导航菜单

    下面我们将深入探讨如何使用jQuery实现这种效果。 1. **HTML结构**: 多级导航菜单通常由`&lt;ul&gt;`和`&lt;li&gt;`元素构建。每个`&lt;li&gt;`元素可以包含一个链接(`&lt;a&gt;`)和一个子菜单(另一个`&lt;ul&gt;`)。HTML代码应确保正确嵌套...

    jquery实现横向伸缩菜单导航

    本教程将深入探讨如何使用jQuery实现一个横向伸缩菜单导航,当鼠标悬停在导航项上时,其子菜单会向左滑动展开。 首先,我们需要了解jQuery的基本用法。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理...

    jquery单页网站导航插件One Page Nav

    在项目中应用`jQuery One Page Nav` 插件,可以轻松实现专业级别的单页导航,提升用户体验,同时降低开发复杂度。 总结来说,`jQuery One Page Nav` 插件是构建单页网站导航的强大工具,其轻巧的体积和丰富的配置...

    Jquery手机导航代码

    "Jquery手机导航代码"这个项目旨在提供一个简洁且高效的解决方案,以满足移动设备用户友好的交互需求。以下是对相关知识点的详细说明: **jQuery基础** jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历...

    JQuery使导航栏固定于网页顶部

    这个文件可能包含了处理导航栏固定定位的全部逻辑,开发者只需要在页面中引入该文件,并进行适当的配置,就可以轻松实现导航栏的固定效果。 总的来说,JQuery使导航栏固定于网页顶部是一个增强用户体验的实用技巧,...

    JQuery头部导航栏

    除了基本的悬停和下拉菜单效果,还可以通过jQuery实现其他复杂功能,如响应式布局、滚动固定、平滑滚动等。这些功能可以大大提高用户体验,使头部导航栏更具吸引力和实用性。 总之,使用jQuery创建头部导航栏提供了...

    jQuery 苹果官网导航栏效果代码

    本教程将深入探讨如何利用jQuery实现苹果官网那种流畅且具有特色的导航栏效果。 首先,我们理解一下导航栏在网页设计中的重要性。导航栏是网站结构的基石,帮助用户轻松地浏览网站各个部分。苹果官网的导航栏以其...

    jquery 悬浮 导航栏

    3. **jQuery 实现**:在页面加载完成后,我们需要监听滚动事件,判断导航栏是否需要变为悬浮状态。以下是一个简单的实现示例: ```javascript $(document).ready(function() { var nav = $('#sticky-nav'); var ...

    jquery多级导航下拉菜单

    在本文中,我们将深入探讨如何使用jQuery实现多级下拉菜单,特别是涉及2级、3级甚至4级的复杂导航结构。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得创建动态网页变得更加容易。 ...

    jQuery页面定位导航滚动插件jquery.nav.zip

    jQuery页面定位导航滚动插件`jquery.nav.zip`是一款基于JavaScript库jQuery开发的高效导航插件,主要用于实现网页的平滑滚动效果,使用户在点击导航菜单时,页面能够平滑地定位到相应的内容区域。这款插件对于创建...

    html+jquery+CSS实现最简单的右侧导航栏效果

    以上就是使用HTML、CSS和jQuery实现一个最简单的右侧导航栏的基本步骤。这个导航栏可以根据用户的需求进行扩展和定制,比如添加更多的交互效果、改变样式或者增加更多功能。在实际项目中,你可能还需要考虑其他因素...

    jQuery浏览器导航栏

    在导航栏中,我们可能需要监听`click`事件来响应用户的点击,实现导航链接的跳转。 4. **CSS操作**:jQuery可以方便地改变元素的样式,如`addClass()`, `removeClass()`, `css()`等。我们可以利用这些方法为导航栏...

    jQuery实现导航菜单鼠标hover导航背景更换特效源码.zip

    本项目“jQuery实现导航菜单鼠标hover导航背景更换特效源码”是针对网页开发的一个实用示例,它利用jQuery的功能来创建一个动态的、具有视觉吸引力的导航菜单,当用户将鼠标悬停在菜单项上时,导航条的背景会改变,...

Global site tag (gtag.js) - Google Analytics