日薪的例子似乎有点低,今天做多.行,这种实现是一个简单的菜单,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;
120px;
}
li{
background-color:#EEEEEE;
}
a{
/*取消全部的下划线*/
text-decoration:none;
padding-left:20px;
display:block;
display:inline-block;
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",全部的样式即应用到该类标签下.所以,从纵向菜单到横向菜单的改动,仅仅是分分钟的事!
上面提到的那个改变图标的功能在以下的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的学习还在继续,一路走,一路收获.
版权声明：本文博客原创文章，博客，未经同意，不得转载。