jquery导航菜单（转载）
今天在网上去查了一下导航菜单的制作。终于看见用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都以附件上传供下载
页:
[1]