日薪的例子似乎有点低,今天做多.行,这种实现是一个简单的菜单,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. iOS UITableView的Section Footer加入button

    郝萌主倾心贡献,尊重作者的劳动成果.请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠.支持郝萌主,捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 在处理UI ...

  2. JFinal开发8个常见问题

    下面是8个最常见的问题总结. 1.Can not create instance of class: demo.DemoConfig. 觉得应该是你的路径有问题, 打开你项目的java build p ...

  3. poj2942 Knights of the Round Table，无向图点双联通，二分图判定

    点击打开链接 无向图点双联通.二分图判定 <span style="font-size:18px;">#include <cstdio> #include ...

  4. Java EE (9) -- JDBC & JTA

    Connection接口中定义了5中隔离级别常量 Connection.TRANSACTION_NONE  --  不支持事务 Connection.TRANSACTION_READ_UNCOMMIT ...

  5. Centos 6.4 Linux 相关问题总结

    1.中文输入法安装 su root yum install "@Chinese Support" exit 然后设置Input Methord即可. 最后一步:logout,注意是 ...

  6. bootstrap在 刷新页面，tab选择页面不会改变。

    您可以直接复制代码 注意在同级别文件夹中引用 相应js 和 css. 实现tab影响 关键看bootstrap的 data-toggle= tab <html lang="en&quo ...

  7. BDB (Berkeley DB)简要数据库（转载）

    使用最近DBD.然后搜了下相关资料,首先公布的是一门科学: 转会http://www.javaeye.com/topic/202990 DB综述DB最初开发的目的是以新的HASH訪问算法来取代旧的hs ...

  8. 当执行游戏0xc000007b错误的解决方法

    如图,这个错误使无数玩家烦恼. 出现这个错误,可能是硬件的问题,也可能是软件的问题.可是,因为硬件引起该问题的概率非常小,而且除了更换硬件之外没有更好的解决方法,因此本文将具体介绍怎样通过软件解决此问 ...

  9. accept功能

    accept()功能 系统调用 accept() 这将是一个有点陌生的地方! 你可以想象发生 这种事情:这是非常远离你通过倾听 (listen()) 的port连接 (connect()) 你的机器. ...

  10. sql查询 数据库 表 字段 等

    1.查询数据库中的所有数据库名: SELECT Name FROM Master..SysDatabases ORDER BY Name 2.查询某个数据库中所有的表名: SELECT Name FR ...