以下为html代码
<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>
<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>
<br /><br />
<ul>
<li class="hmain">
<a href="#">菜单项1</a>
<ul>
<li><a href="#">子菜单项11</a></li>
<li><a href="#">子菜单项12</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项2</a>
<ul>
<li><a href="#">子菜单项21</a></li>
<li><a href="#">子菜单项22</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项31</a></li>
<li><a href="#">子菜单项32</a></li>
</ul>
</li>
</ul>
</body>
css代码如下
ul li/*清楚原点*/
{
list-style:none;
}
ul/*清楚缩进*/
{
padding:0px;
margin:0px;
}
.main,.hmain{
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;/*兼容ie6*/
width:100px;
padding-top:3px;
padding-bottom:3px;
}
.main a,.hmain a{
color:#FFF;
background-image:url(../images/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;}
以下是jquery代码
$(document).ready(function(){
/*页面dom装载完成执行的代码*/
$(".main > a").click(function(){
/*找到主菜单项下的子菜单项*/
var ulNode=$(this).next("ul");
/*判断是否展开*/
/*if(ulNode.css("display")=="none")
{
ulNode.css("display","block");
}
else{
ulNode.css("display","none");
}*/
/*另一种显示和隐藏的方法*/
//ulNode.show(500);
//ulNode.show("slow");//normal fast
//ulNode.hide();
//ulNode.toggle();//自动显示和隐藏
//ulNode.slideDown("normal");//动态卷入
//ulNode.slideUp();//
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('images/expanded.gif')");
} else {
mainNode.css("background-image","url('images/collapsed.gif')");
}
}
}
并且提供源码下载
分享到：
相关推荐
本篇文章将深入探讨如何使用JavaScript库jQuery和CSS技术来实现横纵菜单的下拉效果。以下是对这个主题的详细解释： 一、jQuery简介 jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和...
**jQuery 熔岩灯导航菜单特效详解** 在网页设计中，导航菜单是不可或缺的一部分，它帮助用户在网站中快速定位并浏览各个页面。而"jQuery 熔岩灯导航菜单特效"则为这一功能增添了一份独特的视觉效果，使得用户在操作...
本篇文章将深入探讨如何使用JQuery实现横纵向下拉菜单。 首先，我们需要了解基本的HTML结构。一个简单的下拉菜单通常包含一个主菜单项，它在鼠标悬停时显示子菜单。在HTML中，我们可以使用`<ul>`和`<li>`元素来构建...
【jQuery树形下拉菜单特效代码】是一种在网页交互中常用的UI设计，它结合了jQuery库的高效性和灵活性，为用户提供了优雅的导航体验。在网页设计中，下拉菜单通常用于展示多级分类，使得用户能快速找到目标信息，而树...
在本文中，我们将深入探讨如何使用jQuery来实现手机端的大众点评下拉菜单特效。这个特效主要用于提升用户在移动端选择地址时的交互体验，模仿了大众点评应用中的导航菜单设计。我们将围绕JavaScript（特别是jQuery库...