jquery实战横向纵向菜单

kankan1218

浏览: 277629 次
性别:
来自: 大连

最近访客更多访客>>

jialong520

Ahkam

leimingchao

xx5333

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js jquery ajax

jQuery CSS XHTML HTML

1.菜单项最外层是ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套。
2.list-style:none可以清除ul和li前面的小圆点。
3.清除子菜单的缩进值，需要ul的margin和padding值都为0.
4.如果背景图比实际元素的大小要小，默认会在横向和纵向上重复显示，直到填满整个区域，这时需要用background-repeat来控制。
5.同一个元素上同时定义了背景图和背景色，那么有背景图的地方就会覆盖背景色。
6.text-decoration：none取消文字的下划线。
7.background-postion控制背景图的显示位置。
8.background-image设置为none就没有背景图了（有时继承父元素带来了背景图。）
9.display: block;让a元素充满所在区域。，none：隐藏。
display: inline-block; width: 120px;这是针对ie6的设置。
10. .main a和.main > a的不同：前者选择.main这个class内的所有a节点，后者只选择.main的子节点中的a节点。
11.show()和hide()无参数时和CSS离得display属性效果一样。可以设置的参数为：毫秒数或者fast，normal，slow。有动画效果。
12.toggle()可以直接让显示的隐藏，隐藏的显示，省的我们去判断，参数同show()方法。
13.slideDown()和slideUp()可以实现向下或者向上卷动的效果。注意slideToogle()。
14.float值为left时可以让各自位于一行的元素现在在同一行向左浮动显示。
15.可以给多个选择器定义同样的样式，用“,”分隔，$()方法也可以传入多个选择器。
16.交互处理：a.hover(over,out)鼠标移过去执行自定义的over方法，移出这个对象执行第二个out函数。
b.toggle(fn,fn)每次点击时切换要调用的函数。

HTML代码：

<!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 runat="server">  
    <title>jQuery实战-下拉菜单</title>  
    <link href="css/menu.css" rel="stylesheet" type="text/css" />  
    <script src="jsLib/jquery.js" type="text/javascript"></script>  
    <script src="jsLib/menu.js" type="text/javascript"></script>  
</head>  
<body>  
<h4>纵向菜单</h4>  
    <ul>  
        <li class="main">
			<a href="#" class="first">菜单一</a>  
            <ul>  
                <li><a href="#">菜单11</a></li>  
                <li><a href="#">菜单12</a></li>  
            </ul>  
        </li>  
        <li class="main">
			<a href="#" class="first">菜单二</a>  
            <ul>  
                <li><a href="#">菜单21</a></li>  
                <li><a href="#">菜单22</a></li>  
            </ul>  
        </li>  
        <li class="main">
			<a href="#" class="first">菜单三</a>  
            <ul>  
                <li><a href="#">菜单31</a></li>  
                <li><a href="#">菜单32</a></li>  
            </ul>  
        </li>  
    </ul>  
    <br />  
    <br />  
    <br />  
    <h4>横向菜单</h4>  
    <ul>  
        <li class="hmain"><a href="#" class="first">菜单一</a>  
            <ul>  
                <li><a href="#">菜单11</a></li>  
                <li><a href="#">菜单12</a></li>  
            </ul>  
        </li>  
        <li class="hmain"><a href="#" class="first">菜单二</a>  
            <ul>  
                <li><a href="#">菜单21</a></li>  
                <li><a href="#">菜单22</a></li>  
            </ul>  
        </li>  
        <li class="hmain"><a href="#" class="first">菜单三</a>  
            <ul>  
                <li><a href="#">菜单31</a></li>  
                <li><a href="#">菜单32</a></li>  
            </ul>  
        </li>  
    </ul>  
</body>  
</html>

CSS代码：

a:link, a:visited {  /* 设置默认及访问过的超链接样式 */   
    text-decoration: none;   
    text-align: center;   
    color: #000;   
    display: block;   
    display: inline-block;   
    width: 120px;   
    height: 20px;      
    line-height: 20px;    
}   
ul {  /* 设置UL样式，去掉小圆点，让二级菜单与一级菜单之间没有缩进 */   
    list-style: none;   
     
}   
.main {   
    margin-bottom: 1px;   
}   
.main, hmain { /* 菜单的样式 */   
    width: 120px;   
}   
.main a.first, .hmain a.first{  /* 设置一级菜单的样式 */   
    background-color: #000;   
    color: #fff;   
}   
.main ul , .hmain ul{ /* 设置二级菜单的样式 */   
    background-color: #eee;   
    display: none;   
    width: 120px;   
}   
.main li, .hmain li{   
    padding: 3px;       
}   
.hmain {   
    float: left;   
    margin-right: 1px;   
}

JS代码：

$(function() {   
    // 针对纵向菜单，只要点击后显示或隐藏即可   
    $(".main > a").click(function() {   
        var ulNode = $(this).next("ul");   
        ulNode.slideToggle("slow");   
    });   
  
    // 针对横向菜单，需要在鼠标移上时显示，移除时隐藏   
    $(".hmain").hover(function() {  
		var ulNode = $(this).children("ul")
		timeoutid = setTimeout(function(){
			ulNode.slideDown("slow");  
		},300);
		}, function() { 
			 $(this).children("ul").slideUp("slow");  
			clearTimeout(timeoutid);          
    });   
});

分享到：

J2SE笔记 | 深入理解ArrayList与LinkedList的区别

2010-03-22 09:35
浏览 2906
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论