基于jQuery的横向/纵向下拉菜单JS代码(兼容IE6、IE7、IE8、firefox)
2011-01-19 13:34
766 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>基于jQuery的横向/纵向下拉菜单JS代码</title> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" /> <link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" /> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="ddsmoothmenu.js"> /*********************************************** * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ </script> <script type="text/javascript"> ddsmoothmenu.init({ mainmenuid: "smoothmenu1", //menu DIV id orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu', //class added to menu's outer DIV //customtheme: ["#1c5a80", "#18374a"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] }) ddsmoothmenu.init({ mainmenuid: "smoothmenu2", //Menu DIV id orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu-v', //class added to menu's outer DIV //customtheme: ["#804000", "#482400"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] }) </script>
</head> <body> <h2>横向下拉菜单示范 </h2> <div id="smoothmenu1"> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Folder 0</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Folder 2</a>
<ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Folder 3.1.1</a> <ul> <li><a href="#">Sub Item 3.1.1.1</a></li> <li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li> <li><a href="#">Sub Item 3.1.1.4</a></li> <li><a href="#">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="">Item 4</a></li> </ul>
<br style="clear: left" /> </div> <h2> </h2> <h2> </h2> <h2>纵向下拉菜单示范 </h2> <div id="smoothmenu2"> <ul> <li><a href="http://www.dynamicdrive.com">Item 1</a></li> <li><a href="#">Folder 0</a> <ul> <li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Folder 1</a> <ul>
<li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Folder 3.1.1</a> <ul> <li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li> <li><a href="#">Sub Item 3.1.1.3</a></li> <li><a href="#">Sub Item 3.1.1.4</a></li> <li><a href="#">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="#">Item 4</a></li>
</ul> <br style="clear: left" /> </div> </body> </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 兼容ie6，ie7，ie8，firefox，chrome浏览器的代码片段
- jquery 简短 右键菜单 兼容ie6 ie7 ie8 firefox chrome
- 兼容IE6,IE7,IE8,Firefox,Chrome，DIV+CSS垂直居中终于失败，最后三分钟用写了几行JS解决，经简单测试，还行。
- 兼容ffIE678 hack(IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例)
- 纯css图片自动缩放代码兼容IE6、IE7、IE8、Firefox
- js实现图片上传前的预览,实现完美兼容Firefox3,IE6,IE7,IE8和IE9的显示问题
- IE6、IE7、IE8的CSS、JS兼容
- meta 标签代码解决IE兼容问题,IE6,IE7,IE8,IE9,IE10（包括360的兼容模式）
- JavaScript 在ie6 ie7 ie8和Firefox下bug兼容解决记录（包含部分CSS ）
- 浏览器兼容实例：css透明滤镜-完美兼容ie6,ie7,ie8以及firefox
- Div+CSS浏览器兼容问题( FireFox IE6 IE7 IE8 IE9)
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- 一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- IE6、IE7、IE8、Firefox之间的兼容写法：
- IE6,IE7,IE8,CSS,JS像FIREFOX那样调试
- ie6 ie7 ie8 共存以及Firefox浏览器CSS兼容写法
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- js 上传图片预览 Firefox,IE6,IE7,IE8
- 解决IE6、IE7、IE8、Firefox兼容的两种方案
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10（转）