日薪的例子似乎有点低,今天做多.行,这种实现是一个简单的菜单,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. ASP.NET 联想控件（Autocomplete）测试可用 ascx

    效果图 前台 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Auto ...

  2. cocoa动态方法决议及消息转发

    假设给一个对象发送不能响应的消息,同一时候又没有进行动态方法决议,又没实现消息转发,那么就会引发以下的crash信息 2014-07-30 15:47:54.434 MethodNotFind[171 ...

  3. android系统reboot

    这里所说的reboot指的是软件重启,并非断电重启.我们知道android系统的几个功能,比如:回复出厂设置.OTA升级等都需要重启系统,而且重启后要进入recovery模式,有的手机还带有重启进入f ...

  4. JS正则验证邮箱的格式

    一.相关的代码  1  function test()  2         {  3            var temp = document.getElementById("text ...

  5. cocos2d-x截图功能clippingnode它也可用于——白费

    许多其他精彩分享:http://blog.csdn.net/u010229677 3.1版本号: 在Director数: bool Director::saveScreenshot(const std ...

  6. WPF 数字小键盘Themes

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

  7. hadoop 提高hdfs删文件效率----hadoop删除文件流程解析

    前言 这段时间在用hdfs,由于要处理的文件比较多,要及时产出旧文件,但是发现hdfs的blocks数一直在上涨,经分析是hdfs写入的速度较快,而block回收较慢,所以分心了一下hadoop删文件 ...

  8. 使用require.js和backbone实现简单单页应用实践

    前言 最近的任务是重做公司的触屏版,于是再园子里各种逛,想找个合适的框架做成Web App.看到了叶大(http://www.cnblogs.com/yexiaochai/)对backbone的描述和 ...

  9. Java Drp项目实战——Drp知多少

    是什么 Drp是Distribution Resource Planning的缩写,意思是分销资源计划.它是用来管理企业的执行于Internet上的分销网络的系统,是以商业流程优化为基础,它的核心是销 ...

  10. Tuxedo入门学�

    中间件介绍: 介于客户机和server之间的夹层,突破了传统的c/s架构,为构建大规模,高性能,分布式c/s应用程序提供了通信,事物,安全,容错等基础服务,屏蔽了底层应用细节,应用程序不必从底层开发, ...