以下为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库...
《jQuery带子导航菜单特效详解》 在网页设计中，导航菜单是不可或缺的一部分，它为用户提供了一种方便快捷的方式去浏览网站的各个部分。而jQuery带子导航菜单特效则为这个基本元素添加了视觉吸引力和交互性，提升了...
本教程将深入探讨如何使用jQuery实现下拉菜单特效。 首先，理解基本的HTML结构是至关重要的。一个简单的下拉菜单通常由`<ul>`（无序列表）和`<li>`（列表项）组成，其中`<li>`元素可能包含另一个`<ul>`来创建下级...
jQuery导航菜单背景切换特效
"jQuery网站滑动导航菜单特效"是一个利用jQuery库实现的创新性导航菜单解决方案，旨在提升用户体验，使网站更具吸引力。在这个压缩包中，你将找到一个实现了这一特效的实例。 首先，我们来探讨jQuery。jQuery是一个...
《jQuery熔岩灯导航菜单特效详解》 在网页设计中，动态效果的运用往往能提升用户体验，其中，jQuery熔岩灯导航菜单特效就是一个备受设计师喜爱的元素。它以独特的交互方式，使用户在浏览网站时感受到科技与艺术的...
"jQuery熔岩灯导航菜单特效"是一个利用jQuery库实现的创新性菜单效果，旨在提升网站的视觉吸引力和用户体验。这个特效通过结合CSS样式和JavaScript动态效果，为传统导航菜单赋予了生动的动画表现。 首先，jQuery是...
jQuery侧边下拉收缩菜单特效是一种常见的网页交互设计，它为用户提供了一种高效且直观的导航方式。在网页设计中，这种菜单常用于网站的头部或侧边栏，以节省空间并提供良好的用户体验。本教程将详细介绍如何实现这样...
本文将深入探讨如何利用jQuery实现酷炫的导航菜单特效。 首先，我们从基础开始。jQuery的核心理念是"Write Less, Do More"，这意味着用更少的代码实现更多的功能。在创建导航菜单时，我们可以利用jQuery的选择器来...
在本文中，我们将探讨一个特别的导航菜单实现：仿IDC网站的jQuery全屏下拉导航菜单特效代码。 该特效代码旨在创建一个既美观又实用的菜单，它可以适应全屏模式，并具有二级甚至多级下拉功能。这种菜单设计常见于IDC...
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
"jQuery手机大众点评下拉菜单选择特效"是将JavaScript库jQuery应用于大众点评的移动应用中，为用户提供了直观、易于操作的菜单选择功能。这篇文章将深入探讨这个特效背后的关键技术和实现原理。 首先，jQuery是一个...
JQuery实战（中文版）+源码JQuery实战（中文版）+源码JQuery实战（中文版）+源码JQuery实战（中文版）+源码JQuery实战（中文版）+源码JQuery实战（中文版）+源码JQuery实战（中文版）+源码JQuery实战（中文版）+源码...
《jQuery带子导航菜单特效详解》 在网页设计中，导航菜单是不可或缺的一部分，它为用户提供了一种方便快捷的方式，使他们能够轻松地在网站的不同部分之间穿梭。jQuery作为一个强大的JavaScript库，为创建动态和交互...