在网页中，菜单扮演着“指路者”的角色。怎样设计一个人性化的菜单呢。以下小编带着大家一起做。

效果图：

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

设计历程：

1.首先利用html中的<ul>和<li>标签进行嵌套，搭起一个总体的框架。例如以下图所看到的：

Html代码：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>横纵向菜单</title>

<link rel="stylesheet" type="text/css" href="css/menu.css"/>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/menu.js"></script>

</head>

<body>

<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>

（这是展示的是纵向菜单的代码，横向代码亦是如此，仅仅需更改一下class的名字，以便在设计样式时差别开。

）

2.上面的两幅图形成鲜明的对照，用户理所应当选择前者了。接下来我们就给框架“穿”件衣服。

CSS代码：

ul,li{

	/*清除ul和li前默认的小圆点*/

	list-style:none;

	}

ul{

	/*清除子菜单的缩进值*/

	padding:0;

	margin:0;

	}

.main,.hmain{

/*	菜单项的背景是一小块图片平移反复构成的，看起来有立体感

*/	background-image:url(../image/title.gif);

	background-repeat:repeat-x;

	width:120px;

	}

li{

/*	设置背景颜色，菜单项的背景图片覆盖背景颜色

*/	background-color:#CCC;

	}

a{

	/*取消全部链接的下划线*/

	text-decoration:none;

/*	让a充满整个区域。鼠标点击的那行一直是手形

*/	display:block;

	display:inline-block;

	width:100px;

	padding-left:20px;

	padding-top:3px;

	padding-bottom:3px;

	}

.main a,.hmain a{

/*	设置菜单项的字体颜色

*/	color:white;

/*在菜单项前加入向右指的图片

*/	background-image:url(../image/collapsed.gif);

	background-repeat:no-repeat;

	background-position:3px center;

	}

.main li a,.hmain li a{

/*	设置子菜单的字体颜色

*/	color:black;

	background-image:none;

	}

.main ul,.hmain ul{

/*	初始不显示子菜单项

*/	display:none;

	}

.hmain{

/*	横向菜单每一个菜单项向左浮动，在一行显示

*/	float:left;

	margin-right:1px;

	}*/

注：“main”—纵向   “hmain”—横向

3.菜单的表面工作完毕了，它不是摆在那里给人看的，须要和用户进行交互。实现一些动态效果。当我们点击菜单项时。首先鼠标箭头变为手形。点击后以下隐藏的子菜单项会显示出来。同一时候指向右的箭头变为指向下方。

再点击菜单项时，子菜单项隐藏，同一时候更换箭头图片。

javascript就是赋予网页生命力的大神，而jQuery则是一个兼容多浏览器的javascript库。有了它使得javascript写得更少,做得很多其它。引用了jQuery库后，编写例如以下代码：

javascript代码：

$(document).ready(function() {

    //纵向菜单

	$(".main > a").click(function(){

		var ulNode=$(this).next("ul");

		ulNode.slideToggle();

		changeIcon($(this));

	});

	//横向菜单

	$(".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('image/expanded.gif')");

	    }else{

		   mainNode.css("background-image","url('image/collapsed.gif')");

		}

	}

}

至此，两个菜单设计完毕了。是不是非常有成就感呢！

纵观全局。html是躯体。css是衣服，js则是灵魂。三者的配合。构成了一个个鲜活灵动的网页。记得最初照着视频敲牛腩新闻公布系统的时候。认为B/S开发就是杂七杂八的东西往一块儿拼凑。

随着后来的“盲人摸象”，如今有了逐渐清晰的认识。

利用jQuery设计横/纵向菜单的更多相关文章

  1. Jquery实战——横纵向的菜单

    横纵向的菜单效果,点击纵向菜单显示其子菜单.鼠标指向横菜单的时候.显示其子菜单,鼠标离开,子菜单隐藏. HTML代码: <span style="font-size:18px;&quo ...

  2. 基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式

    在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括 ...

  3. 基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  4. 【jQuery Demo】jQuery打造动态下滑菜单

    作者:漫凯维奇      来源:[教程]jQuery打造动态下滑菜单 Tip:这只是一个转载,源代码可以在上面的来源博文中下载 此教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单.效果如 ...

  5. 我收集到的最好的jQuery和CSS3导航菜单

    jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...

  6. 一款效果精致的 jQuery 多层滑出菜单插件

    想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...

  7. jQuery插件——多级联动菜单

    jQuery插件——多级联动菜单 引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后 ...

  8. 160620、利用 jQuery UI 和 Ajax 创建可定制的 Web 界面

    如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚 ...

  9. （转）基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录

    http://www.cnblogs.com/wuhuacong/p/3667703.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...

随机推荐

  1. Set-----集合入门

    函数中的集合和  数学中的集合 基本上差不多 集合中每个元素最多只能出现一次  并且 当元素储存到set集合之中 会自动 按照 ascll 进行  从小到大的  排序 大神关于   set   的 详 ...

  2. Android中有四大组件的简单总结

    Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器. 一:了解四大基本组件 Activity ...

  3. SQL Server 2008R2 Set IDENTITY_INSERT 表名 ON/OFF不能与insert into select 的语句一起执行？

    大家都知数据库表中的列可以自增长,但是有时候我们需要插入数据的时候会指定这一列的数据. 这时候我们可以很简单的利用sql语句来执行新增一条的数据,如下: set IDENTITY_INSER 表名 o ...

  4. ubuntu 安装redis以及phpredis

    一.安装redis 1. 去百度搜索 redis,然后去靠谱的地方下载最新的redisxxx.tar.gz 2. 解压后,sudo make 3. sudo make install 4. //安装完 ...

  5. 一、CSS的基础样式

    CSS的基础样式 border 边框 复合写法 border:border-width  border-style border-color: border-width:边框宽度 top right ...

  6. jsp之认识 servlet （基础、工作原理、容器请求处理）

    Tomcat 的安装: eclipse 需要自行安装tomcat,这是web 项目运行的服务器.如果用的是MyEclipse,里面自带tomcat,方便清除部署垃圾,利于项目运行. Tomcat的安装 ...

  7. SQL基本操作——函数

    函数的类型:在 SQL 中,基本的函数类型和种类有若干种.函数的基本类型是:Aggregate 函数.Scalar 函数. Aggregate 函数:操作面向一系列的值,并返回一个单一的值,下面是SQ ...

  8. HDU_4826_dp

    Labyrinth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  9. 宏基因组扩增子图表解读2散点图：组间整体差异分析(Beta多样性)

    散点图 数据点在直角坐标系平面上的分布图.在宏基因组领域,散点图常用于展示样品组间的Beta多样性,常用的分析方法有主成分分析(PCA),主坐标轴分析(PCoA/MDS)和限制条件的主坐标轴分析(CP ...

  10. 【转】IDEA 中tomcat图片储存和访问虚拟路径

    1.idea 修改Tomcat的虚拟路径(第一种方法)修改配置文件有很多种,但是一直不成功;后来想还是idea的配置原因,这里tomcat虚拟路径只说一种; 修改Tomcat安装路径下server.x ...