首页 > 代码库 > 利用jQuery设计横/纵向菜单
利用jQuery设计横/纵向菜单
在网页中,菜单扮演着“指路者”的角色。如何设计一个人性化的菜单呢,下面小编带着大家一起做。
效果图:
设计历程:
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=http://www.mamicode.com/"css/menu.css"/>>(这是展示的是纵向菜单的代码,横向代码亦是如此,只需更改一下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设计横/纵向菜单
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。