日薪的例子似乎有点低,今天做多.行,这种实现是一个简单的菜单,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",全部的样式即应用到该类标签下.所以,从纵向菜单到横向菜单的改动,仅仅是分分钟的事!

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemh1YW56aGUxMTc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

上面提到的那个改变图标的功能在以下的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(三)--水平和垂直菜单的更多相关文章

  1. （前端）面试300问之（2）CSS元素居中【水平、垂直、2者同时居中】

    一 仅水平居中 1 行内元素 1)给父元素添加 text-align:center 即可 <div class="parent"> <span class=&qu ...

  2. 实例：用jQuery实现垂直和水平下拉 菜单

    主要是利用jQuery来实现垂直菜单和水平菜单.实现效果如图: 第一步,创建一个HTML文件,如图,包含两个ul.当然把jquery库也引入进去了. <!DOCTYPE html> < ...

  3. 测试与发布（Alpha版本）——小谷围驻广东某工业719电竞大队

    测试与发布(Alpha版本)--小谷围驻广东某工业719电竞大队 一.引言 1.需求规格说明书: https://www.cnblogs.com/TaoTaoLV1/p/9819913.html 2. ...

  4. 小div在大div里面水平垂直都居中的实现方法

    关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...

  5. 从零开始学习jQuery (三) 管理jQuery包装集

    本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...

  6. jQuery水平下拉菜单实现

    <!DOCTYPE html> <html>    <head>       <title>jQuery水平下拉菜单实现</title>   ...

  7. jQuery制作水平多级下拉菜单

    本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...

  8. 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...

  9. JQUERY 插件开发——MENU（导航菜单）

    JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...

随机推荐

  1. java 中间 final修饰符

    修饰符final:它是一个常数,我不同意改变 ,可以修改 变数,办法 ,分类 final修改变量:是final成常量,一旦赋值不能改变 常量能够在初始化时直接赋值.也能够在构造方法里赋值.仅仅能在这两 ...

  2. ZOJ3626(树形dp)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4772 题意:给一棵有n个结点的树,每个点有点权表示在这个点上的价值, ...

  3. HDU3537-Daizhenyang&#39;s Coin（博弈SG-打表）

    <span style="color: green; font-family: Arial; font-size: 12px; background-color: rgb(255, 2 ...

  4. JAVA 计算地球上任意两点(经纬度)距离

    /** * 计算地球上任意两点(经纬度)距离 * * @param long1 * 第一点经度 * @param lat1 * 第一点纬度 * @param long2 * 第二点经度 * @para ...

  5. 计算机本科/硕士找offer的总结 节选

    在这样的目标定位下,我的求职历程从2006年10月8日开始,到2007年1月10日正式结束,一共持续了3个月的时间.整个过程可以分为三个阶段:第一阶段:2006年10月份 找工作刚刚开始的阶段,什么都 ...

  6. 赤裸裸的splay平衡树

    HYSBZ1588 http://www.lydsy.com/JudgeOnline/problem.php?id=1588 给我们n天的营业额, 要求出每天的最小波动值,然后加起来.  当天最小波动 ...

  7. codeforece Round#311 BCDE

    B题 给我们n,m ,  m表示茶壶的容量 接下来2*n个数字,表示茶杯的容量,将这些茶杯分给n个男孩和n个女孩 可以倒x毫升的茶水给每个女孩,那么就要倒2x毫升的茶水给男孩,当然了,茶杯要装的下,且 ...

  8. 上传App时遇IDFA错误问题

    今天上传App时遇到下图1的情况,很纳闷,又是苹果新规. 通常是第三方的库引起啦,马上想到百度统计了,打开SDK下载页面看看简单介绍,里面有讲到这个问题了. 图2就是这次改动的原因. 更新SDK,之前 ...

  9. Android实现限制EditText输入文字的数量

    一: 声明控件.          TextView hasnumTV;         TextView hasnum;// 用来显示剩余字数         int num = 50;// 限制的 ...

  10. C++第11周(春)项目1 - 存储班长信息的学生类

    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 [项目1 - 存储班长信息的学生类] clas ...