今天在网上去查了一下导航菜单的制作。终于看见用jQuery实现导航菜单的代码，于是转载过来。首先给出二级导航菜单的实现
menu-jquery.html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0073)http://www.neoease.com/tutorials/wordpress-menubar/wordpress-menubar-6.1/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312"></meta>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<link type="text/css" href="style.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
<div id="container">
<div id="menubar">
<ul class="menus" id="menus">
<LI class="current-cat"><A title=Home href="http://www.neoease.com/tutorials/wordpress-menubar/">All demos</A> </LI>
<li><a href="javascript:void(0);">Java</a>
<ul class="children">
<li><a>Java视频</a></li>
<LI ><A title="View all posts filed under C#"
href="javascript:void(0);">Java教材</A> </LI>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
style.css文件代码
/*****让UL下面的LI全部以一字型向左浮动*****/
#menubar UL.menus LI {
FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none
}
#menubar UL.menus LI A {
PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #67ace5; PADDING-BOTTOM: 5px; COLOR: #fff; PADDING-TOP: 5px; TEXT-DECORATION: none
}
#menubar UL.menus UL {
POSITION: absolute
}
#menubar UL.menus LI.current-cat A {
BACKGROUND: #5495cd
}
#menubar UL.menus LI A:hover {
BACKGROUND: #4281b7
}
#menubar UL.children {
PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#menubar UL.children LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#container {
MARGIN: 150px auto 0px; WIDTH: 400px; TEXT-ALIGN: left
}
#menubar UL.children LI A {
WIDTH: 100px
}
后面调用的jQuery.js和menu.js都以附件上传供下载
分享到：
相关推荐
jQuery插件是开发者为了扩展jQuery功能而创建的代码模块，其中就包括各种类型的菜单插件，它们可以方便地为网站添加交互式下拉或多层次导航菜单。 "源码"标签表明这篇博客可能涉及到了具体的代码示例或修改建议。在...
效果流畅动感基于jquery库的JS特效下拉菜单_酷站代码 www.5icool.org</title> <script type="text/javascript" src="js/jquery-1.3.2.min.js"> <script type="text/javascript" src="js/smartmenu-min.js">...
jQuery扁平垂直下拉菜单是一款基于jquery实现的响应式高亮下拉导航菜单。本作品由【站长素材】收集整理，转载请注明出处！
网页制作中的菜单设计是用户体验的重要组成部分，特别是在复杂的网站结构中，三级菜单的运用能有效组织信息，方便用户快速导航。本教程将分享一种基于jQuery的横向滑动三级下拉菜单的实现方法，它具有良好的视觉效果...
jQuery绿色下拉网站导航是一款基于jquery实现的鼠标滑过下拉显示二级菜单。本作品由【站长素材】收集整理，转载请注明出处！
在IT行业中，树形菜单是一种常见的用户界面元素，它用于展示具有层级关系的数据，比如文件系统、组织结构或网站导航。这篇【转载】的博客文章“常用的三种树形菜单”探讨了实现这种交互方式的不同技术。尽管没有提供...
DWZ富客户端框架是一款专为中国开发者设计的、基于jQuery的Ajax RIA（Rich Internet Applications）开源框架。其核心设计理念在于提供一种简单实用且易于扩展的方式，使得开发人员能够在不编写JavaScript代码的情况...