日薪的例子似乎有点低,今天做多.行,这种实现是一个简单的菜单,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. poj3252（数位dp）

    题目连接:http://poj.org/problem?id=3252 题意:拆成2进制,在记录0和1的个数 求区间[a,b]中,满足传化成2进制后,0的个数>=1的个数的数字的个数... 分析 ...

  2. getline与get函数的区别

    get()函数相对getline来说使用方法要灵活的多了. 1.   int get()是指从流中抽取单个字符并返回,这个是没有參数的形式.由于c++不像c语言使用getchar() 2.istrea ...

  3. SWT的文件选择对话框I的使用

    swt文件选择框 FileDialog fileselect=new FileDialog(shell,SWT.SINGLE);                          fileselect ...

  4. css中换行的几种方式

    1.white-space:normal;   这个只针对中文有效 2.word-break:break-all;  强制换行,针对中文,数字,英文等都有效: 3.word-wrap:break-wo ...

  5. C# 简化优化if/switch 表驱动法

    表示这个很强大 字典加反射,搞定多window的switch public partial class MainWindow : Window { Dictionary<string, Type ...

  6. java平台的常用资源

    分离领域 翻译 from :akullpp | awesome-java 大家一起学习,共同进步. 如果大家觉得有用,就mark一下,赞一下,或评论一下,让更多的人知道.thanks. 构建 这里搜集 ...

  7. WPF 数字小键盘Themes

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...

  8. Android 通过系统使用NotificationListenerService 监听各种Notification的用法

    NotificationListenerService是通过系统调起的服务,当有应用发起通知的时候,系统会将通知的动作和信息回调给NotificationListenerService. 在继承Not ...

  9. 前台技术--通过javaScript提交表单

    window.location=pp+"?username="+getCookie("username")+"&userid="+g ...

  10. C#实现远程机器管理

    原文:C#实现远程机器管理 目前处于待离职状态,原先所有的工作都在进行交接,过程当中不乏有很多先前整理的和动手尝试实现的功能:我的主页中已经列出来一部分内容,有兴趣的可以前往看一看. 接下来的内容主要 ...