三级导航菜单整理jscss资源-CSDN文库

共36个文件

gif：13个

png：6个

html：5个

三级导航菜单整理

css三级导航菜单整理

5星 · 超过95%的资源需积分: 9 109 浏览量 2011-08-30 00:31:59 上传评论 5 收藏 98KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

Desktop.rar （36个子文件）

ddd.html 4KB

ssss.html 4KB

codefans.net

jquery-dim-gray

menu.css 3KB

index.html.bak 4KB

menu.js 13KB

help.txt 3KB

images

left.gif 9KB

lava.gif 877B

item-pointer-mover.gif 78B

item-pointer.gif 78B

lava.png 1KB

main-delimiter.png 289B

main-bg.png 206B

jquery.js 56KB

index.html 4KB

sss.html 4KB

20110716105314662

index.html.bak 3KB

images

drawer_bg_1_1_ie6.gif 170B

nav_item_bg.gif 2KB

bg01.gif 206B

nav_xp_item_bg.gif 619B

drawer_bg_1.png 3KB

drawer_bg_1_ie6.gif 127B

drawer_bg_2_ie6.gif 870B

drawer_bg_2.png 3KB

dot_down.gif 55B

dot_right2.gif 55B

drawer_bg_1_1.png 3KB

headerbg.gif 159B

index.js 14KB

mootools.js 55KB

index.html 3KB

style

index.css 5KB

coded.htm 20KB

code.htm 24KB

codee.htm 18KB

How to add the menu to your own pages Step 1: Select the style of the menu you like and download zip file with all menu files. Step 2: Copy 'images' folder, menu.css, menu.js and jquery.js files to the same directory as the page itself. Step 3: Open your index.html file in any text editor. Copy and insert the following code into the <head> section of your page: <link type="text/css" href="menu.css" rel="stylesheet" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="menu.js"></script> Step 4: Create an unordered list for your base navigation. Add the sample markup to the <body> section of your page. <div id="menu"> <ul class="menu"> <li><a href="#" class="parent"><span>Home</span></a> <div><ul> <li><a href="#" class="parent"><span>Sub Item 1</span></a> <div><ul> <li><a href="#" class="parent"><span>Sub Item 1.1</span></a> <div><ul> <li><a href="#"><span>Sub Item 1.1.1</span></a></li> <li><a href="#"><span>Sub Item 1.1.2</span></a></li> </ul></div> </li> <li><a href="#"><span>Sub Item 1.2</span></a></li> <li><a href="#"><span>Sub Item 1.3</span></a></li> <li><a href="#"><span>Sub Item 1.4</span></a></li> <li><a href="#"><span>Sub Item 1.5</span></a></li> <li><a href="#"><span>Sub Item 1.6</span></a></li> <li><a href="#" class="parent"><span>Sub Item 1.7</span></a> <div><ul> <li><a href="#"><span>Sub Item 1.7.1</span></a></li> <li><a href="#"><span>Sub Item 1.7.2</span></a></li> </ul></div> </li> </ul></div> </li> <li><a href="#"><span>Sub Item 2</span></a></li> <li><a href="#"><span>Sub Item 3</span></a></li> </ul></div> </li> <li><a href="#"><span>Product Info</span></a> <div><ul> <li><a href="#" class="parent"><span>Sub Item 1</span></a> <div><ul> <li><a href="#"><span>Sub Item 1.1</span></a></li> <li><a href="#"><span>Sub Item 1.2</span></a></li> </ul></div> </li> <li><a href="#" class="parent"><span>Sub Item 2</span></a> <div><ul> <li><a href="#"><span>Sub Item 2.1</span></a></li> <li><a href="#"><span>Sub Item 2.2</span></a></li> </ul></div> </li> <li><a href="#"><span>Sub Item 3</span></a></li> <li><a href="#"><span>Sub Item 4</span></a></li> <li><a href="#"><span>Sub Item 5</span></a></li> <li><a href="#"><span>Sub Item 6</span></a></li> <li><a href="#"><span>Sub Item 7</span></a></li> </ul></div> </li> <li><a href="#"><span>Help</span></a></li> <li class="last"><a href="#"><span>Contacts</span></a></li> </ul> </div> Step 5: Change the items' caption, specify links and change the menu structure as you like. You can create as many sub-menus and list items as necessary. Note: Please don't forget to use the DOCTYPE declaration for universal compatibility, for example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> License: Free, but please put a link to this page where you want: <a href="http://apycom.com/">Apycom jQuery Menus</a>

评论收藏

内容反馈