基于jquery的下拉列表实现
2012-11-23 11:36
726 查看
在网上搜了一堆,不是包含的框架太多,就是太简单,所以我综合了一下,写一个目前我觉得最通俗易懂的下拉列表实现。利用absolute布局,设置div的left和top来实现下拉列表,在开发时,发现在火狐中设置td的position为absolute是无效的,所以改用li实现。
效果图:
![](http://img.my.csdn.net/uploads/201211/23/1353642064_8772.png)
前台代码:
代码下载:http://download.csdn.net/detail/tomatozq/4801118
效果图:
![](http://img.my.csdn.net/uploads/201211/23/1353642064_8772.png)
前台代码:
<!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"> <head> <title>js下拉菜单实现</title> <style> body{font-size:12px; background:#f3f4f4 url(bg.gif) repeat-x;font-family:Tahoma;} *{margin:0px;padding:0px;} .menu { text-align:center; margin:auto; margin-top:50px; border-bottom:3px solid #E10001; width:500px; height:24px; } .menu ul{ list-style:none; } .menu .top { float:left; text-align:center; background-image:url('nav_bg2.gif'); width:87px; position:relative; line-height:24px; height:24px; margin-left:2px; } .menu .top a { color:black; text-decoration:none; font-size:18px; } .menu .top a:hover { color:Red; } .menu .dropdown{ position:relative; } .menu .dropdown a { display:block; } .menu .dropdowndiv{ display:none; color:black; position:absolute; left:0px; top:20px; border:1px solid #64ace9; background-color:White; text-align:left; z-index:999999; } /* 利用h2做偏移挡住原先的一级标题 */ .menu .dropdowndiv h2 { background-color:#fff; border:1px solid #64ace9; position:absolute; top:-22px; left:-1px; border-bottom:0px; font-size:100%; font-weight:normal; text-align:center; } .menu .dropdowndiv h2 a { color:Black; font-size:18px; width:87px; } .menu .dropdowndiv ul { list-style-image:none; } .menu .dropdowndiv li { list-style:none; padding-left:10px; padding-top:4px; margin-left:4px; background-repeat:no-repeat; background-position:left center; height:25px; line-height:25px; text-align:left; z-index:999999; } .menu .dropdowndiv li a { color:black; font-size:14px; } </style> <script src="jquery-1.4.1.min.js"></script> <script> $(document).ready(function () { $(".dropdown").mouseover(function () { var ddv = $(this).find(".dropdowndiv"); $(ddv).show(); }); $(".dropdown").mouseout(function () { var ddv = $(this).find(".dropdowndiv"); $(ddv).hide(); }); }); </script> </head> <body> <div class="menu"> <ul> <li class="top"><a href="#" target="_self">首页</a></li> <li class="top dropdown"> <a href="#" target="_self">菜单1</a> <div class="dropdowndiv" style="width:120px;"> <h2><a href="#" target="_self">菜单1</a></h2> <ul> <li><a href="#">菜单1-1</a></li> <li><a href="#">菜单1-2</a></li> <li><a href="#">菜单1-3</a></li> </ul> </div> </li> <li class="top"><a href="#" target="_self">菜单2</a></td> <li class="top dropdown"><!--火狐不支持td的position--> <a href="#" target="_self">菜单3</a> <div class="dropdowndiv" style="width:120px;"> <h2><a href="#" target="_self">菜单3</a></h2> <ul> <li><a href="#">菜单3-1</a></li> <li><a href="#">菜单3-2</a></li> <li><a href="#">菜单3-3</a></li> </ul> </div> </li> </ul> </div> </body> </html>
代码下载:http://download.csdn.net/detail/tomatozq/4801118
相关文章推荐
- 基于MVC3方式实现下拉列表联动(JQuery)
- 基于jquery的用dl模拟实现可自定义样式的SELECT下拉列表(已封装)
- 基于jquery实现多选下拉列表
- 基于jquery的用dl模拟实现可自定义样式的SELECT下拉列表(已封装)
- jQuery实现多级联动下拉列表查询框
- 基于jQuery实现下拉框
- jQuery插件datalist实现很好看的input下拉列表
- 基于jQuery实现下拉收缩(展开与折叠)特效
- jquery用div实现下拉列表的效果
- 基于MVC3下拉列表联动(JQuery)
- jQuery实现联动下拉列表查询框
- 基于jquery实现下拉框美化特效
- jQuery实现可移动选项的左右下拉列表示例
- JQuery 使用attr方法实现下拉列表选中
- 仿百度搜索时的下拉列表(jQuery实现)
- 基于jQuery实现下拉收缩(展开与折叠)特效
- jquery,json,struts2整合开发(实现下拉列表)
- jQuery实现输入框下拉列表树插件特效代码分享
- jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)