小谷实战Jquery(三)--横向纵向菜单

每天一个实例看来速率有点低了,今天要多做一点.好了,这次实现的是一个简单的菜单,Web项目中常见的菜单有两种:纵向和横向.从纵向说起,看一下最初的代码.

html代码实现最基本的菜单与子菜单

<span style="font-size:18px;"><!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>
<meta http-equiv-"Content-Type" content="text/html;charset-UTF-8" />
<link type="text/css" rel="stylesheet" href="menu.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="menu.js"></script>

</head>
<body>
<ul>

	<li class="main">
		<a href="#">菜单项1</a>
		<ul>
			<li><a href="#">子菜单项11</a></li>
			<li><a href="#">子菜单项12</a></li>
		</ul>
	</li>

	<li class="main">
		<a href="#">菜单项2</a>
		<ul>
			<li><a href="#">子菜单项21</a></li>
			<li><a href="#">子菜单项22</a></li>
		</ul>
	</li>
	<li class="main">
		<a href="#">菜单项3</a>
		<ul>
			<li><a href="#">子菜单项31</a></li>
			<li><a href="#">子菜单项32</a></li>
		</ul>
	</li>

</ul>
</body>
</html></span>

用<ul>和<li>标签创建的是带有项目符号的列表.,所以接下来我们还要通过CSS设置去除部分样式,以及设置菜单与子菜单不同的背景色或背景图,文字格式等.

<span style="font-size:18px;">ul li{
	/*消除ul和li上默认的小圆点*/
	list-style:none;
}
ul{
	/*清除子菜单的缩进值*/
	padding:0;

}
.main{
background-image:url(images/title.gif);
background-repeat:repeat-x;
width:120px;
}
li{
background-color:#EEEEEE;
}
a{
/*取消所有的下划线*/
text-decoration:none;
padding-left:20px;
display:block;
display:inline-block;
width:100px;
padding-top:3;
padding-bottom:3;

}
.main a{
color:white;
background-image:url(images/collapsed.gif);
background-repeat:no-repeat;
background-psition:3px center;
}
.main li a{
color:black;
background-image:none;

}
.main ul{
display:none;
}
</span>

最后js实现主菜单单击显示或隐藏子菜单.

<span style="font-size:18px;">$(document).ready(function(){
	//给主菜单注册click事件,点击时显示被隐藏的子菜单项
	$(".main > a").click(function(){

		//找到主菜单项对应的子菜单项
		var ulNode=$(this).next("ul");
		if (ulNode.css("display")=="none"){
			ulNode.css("display","block");
		}else{
			ulNode.css("display","none");
		}

    });
})</span>

一个基本的纵向菜单就算完成了.看一下Web页面的效果.

细心的朋友一定发现了菜单展开状态下的图标是不一样的,而上面js中并没有相关函数的实现代码.是的,这是因为我在实现横向菜单设计后(包括图标变化的改进)又在原来代码中添加了一句:changeIcon($(this));关于这个函数的实现在后面的横向菜单中展示.

横向菜单:

html代码基本一样,这里写在一个文件中,故只改了class="hmain". 而CSS代码也基本一致,只是对其中公共的部分加入".hmain",所有的样式即应用到该类标签下.所以,从纵向菜单到横向菜单的修改,只是分分钟的事!

上面提到的那个改变图标的功能在下面的js中:

$(document).ready(function(){
	//横向菜单
	//当鼠标滑过时,显示或隐藏子菜单项,并改变主菜单图标
	$(".hmain").hover(function(){
		    $(this).children("ul").slideDown();
			changeIcon($(this).children("a"));
		},function(){
			$(this).children("ul").slideUp();
			changeIcon($(this).children("a"));
		});

})
// 修改主菜单的指示图标
function changeIcon(mainNode){
	if(mainNode){
		if(mainNode.css("background-image").indexOf("collapsed.gif")>=0){
			mainNode.css("background-image","url('images/expanded.gif')");
		}else{
			mainNode.css("background-image","url('images/collapsed.gif')");
		}

	}
}

所谓的横向菜单就是这个样子滴:

下面我总结了一下主要用到的技术.

构建多层菜单可以通过ul和li嵌套来实现,li是有缩进的.做Web开发一定要尽力使自己写的页面在各个浏览器都正常显示,这个过程最头疼就是IE,比如清除子菜单的缩进,只有padding和margin都为0的时候才可以在IE6和7中正常显示.除此之外,IE6以外的浏览器都可以通过设定display的值为block来让a元素充满所在的区域.只有IE6需要设定display为inline-black并设定a的宽度.另外一点就是如果一个元素上同时定义了背景图和背景色,那么浏览器会选择使用哪一个?答案是背景图.

上面的js代码通过if语句判断,如果子菜单隐藏则单击主菜单时显示,如果显示则单击时隐藏.不知道朋友是否还记得jQuery的宗旨:write less, do more.所以,我们可以用这样一句话来代替上面的N行代码:ulNode.slideToggle(); toggle方法的强大之处在于,它省去了我们判断元素是显示还是隐藏的状态,直接让显示的隐藏,隐藏的显示.

jQuery的学习还在继续,一路走,一路收获.

小谷实战Jquery(三)--横向纵向菜单

时间: 2024-10-07 06:32:53

小谷实战Jquery(三)--横向纵向菜单的相关文章

小谷实战Jquery(四)--标签页效果

这两天完成了实战四五六的例子,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗口效果,都是web层常用的效果.越到后面越发觉得技术这东西,就是一种思路的展现,懂了要实现效果的来龙去脉,代码就是表达的一种工具,后台展示的是逻辑,前台展现的是图形. 说一下这个标签页吧,第一个标签由两部分组成,鼠标移到上面标签上,下面对应显示相应的内容.借助CSS实现标签和内容相融合的效果.这次我们先看最终效果. HTML: <span style="font-size:18px;">

小谷实战Jquery(二)--可以编辑的表格

今天实现的是一个表格的例子,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格可以在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路很清晰,只是在实现的过程中会出现一些小bug.通过jQuery函数就可以一一解决. 下面看下HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD

小谷实战Jquery(一)--用户名校验

小谷童鞋休息了好几天,终于又开始学习了.今天学的是Jquery,先来看看神马是jQuery? JQuery is designed to change the way that you write JavaScript. The focus of jQuery is "find some elements, do something with them". write less,do more. 它是一个兼容多浏览器的javascript框架,兼容CSS3,使用户能方便地处理HTML,

jQuery实现横向纵向下拉菜单

学习javascript中有提到构建自己的javascript库,比如jQuery,这些库中包含自己常用的方便的小函数,这些函数可以让自己的代码更加清晰易懂,而且当别人调用时也很容易理解,当然编写库时需要注意一些问题,比如大小写.括号引号.换行等,这些为jQuery学习提供了一些基础,jQuery的学习主要通过几个实例来了解jQuery的应用,通过查看API运用特定方法实现自己的效果,它让网页动了起来.通过代码如何实现一个横向和纵向下拉菜单的效果. 首先在HTML中通过ul和li表示页面中的菜单

【JQuery】——横向纵向下拉菜单

在学习jQuery的过程中,遇到项目中最常用到的下拉菜单,本着高效的原则,在此总结一下横向和纵向下拉菜单的实现效果,形成自己的小类库,以便自己在项目过程中能够方便的调用. HTML部分: 引用menu.css.jquery.js(已经封装好的)和menu.js文件 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&quo

利用jQuery设计横/纵向菜单

在网页中,菜单扮演着"指路者"的角色.怎样设计一个人性化的菜单呢.以下小编带着大家一起做. 效果图: 设计历程: 1.首先利用html中的<ul>和<li>标签进行嵌套,搭起一个总体的框架.例如以下图所看到的: Html代码: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&

小谷的战斗Jquery(三)--水平和垂直菜单

日薪的例子似乎有点低,今天做多.行,这种实现是一个简单的菜单,Web项目中,有两个共同的菜单:纵向和横向.说到从垂直,看原代码. html代码实现最主要的菜单与子菜单 <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran

苹果浏览器实战(三)

上两篇介绍菜单.工具栏以及实际使用的功能实现.其实已经违背老师教导(自己去发明明轮).js中有一现成的下拉列表(select ->option). 大家一定非常熟悉,而且select 下拉列表还有(onchange)使用非常方便.为什么还要自己设计类似的菜单和列表框呢? 1. 如果js的下拉列表条目很多,可能会消耗较多的系统资源(至少在我的电脑上运行时,其它窗口会闪烁). 2. 如果工具栏隐身,虽然苹果浏览器还保留下拉列表(其它浏览器连下拉列表也不见了),但好像选择无效. 3. 只能在自身的网页

web标准(复习)--7 横向导航菜单

今天我们开始学习html列表,包含以下内容和知识点: 横向列表菜单 用图片美化的横向导航 css Sprites 一.横向列表菜单前边学习过纵向导航菜单,又学习了float属性,那么要实现横向导航菜单是不是很简单了,只需要把li横向排列就可实现了.把第四节的代码拿过来直接用,修改后的代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm