日薪的例子似乎有点低,今天做多.行,这种实现是一个简单的菜单,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. 用xml建立仓库的逻辑层的操作

    package com.repositoryclient.xml; import java.io.FileNotFoundException; import java.io.FileOutputStr ...

  2. 从PCI上读取数据 线程和定时器效率

    从PCI上读取数据 线程和定时器效率 线程: mythread=AfxBeginThread(StartContinuous,(LPVOID)1,THREAD_PRIORITY_NORMAL,0,CR ...

  3. 设备Oracle当误差：环境不符合要求》》解决方法

    一旦安装Oracle当我常常会遇到这样的问题.也没太在意,改了一下client\stage\cvu文件夹cvu_prereq.xml档(添加支持目前的操作系统信息)为了克服,我没有做笔记,但后来有同学 ...

  4. Node.js : 我只需要一个店小二

    刚刚开始接触Node.js时, google了很多文章,但发现大部分都是泛泛的介绍安装,配置,以及介绍几个小例子 有一种雾里观花的感觉,所以非常困惑,不知道Node.js到底解决了什么问题,它的优势到 ...

  5. 【HTML+CSS】(1)基本语法

    HTML基金会 <em>他强调标签,<strong>加粗标签 <q>短文本引用.<blockquote>长文本引用,这两个标签会让文字带双引號.   空 ...

  6. MySql模糊查询like通配符简介

    %代表随意多个字符  _代表一个字符 在 MySQL中.SQL的模式缺省是忽略大写和小写的 正则模式使用REGEXP和NOT REGEXP操作符. "."匹配不论什么单个的字符.一 ...

  7. xp硬盘安装Fedora14 过程记录及心得体会（fedora14 live版本680M 和fedora14 DVD版本3.2G的选择）

    这次电脑奔溃了,奇怪的是直接ghost覆盖c盘竟然不中.之前电脑上硬盘安装的fedora14操作系统,也是双系统.不知道是不是这个问题,记得同学说过,在硬盘装fedora之后,要手动修改c盘隐藏的那个 ...

  8. Sliverlight之　画刷

    1,5种画刷 (见Project15) (1)TextBlock控件中的Forground和BackGround属性是一个什么对象?它在前台的完整的写法是什么?(实际是.net做了一个转换,可以直接写 ...

  9. 9、Cocos2dx 3.0游戏开发找小三之工厂方法模式与对象传值

    重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27704153 工厂方法模式 工厂方法是程序设计中一个 ...

  10. CallContext和多线程

    前一段时间正好要在某个网页程序上开一个多线程调用多个组件的尝试,这些组件是有其他团队开发的(如:印度/俄罗斯),所以修改它们的代码看起来是不太现实的,但是,令人恼火的是他们的代码中大量的用到了AppC ...