一直找不到简单的jquery 下拉组件,要么兼容性不好,要不样式定制复杂。索性自己花了点时间做了个。
在IE 8,Chrome,Firefox 上测试过都没问题,支持hover 和 click 模式。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>menu demo</title> <script type="text/javascript" src="../../jquery.min.js"></script> </head> <style> .my-menu { display: inline-block; } .my-menu:hover { background-color: #EEE; } .menu-anchor { font-size: 14px; padding: 5px; cursor: pointer; } .menu-arrow-down { width: 0; height: 0; margin-left: 3px; display: inline-block; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #999; } .menu-content { position: relative; display: none; } .menu-inner-content { position: absolute; background-color: white; top: 0px; left: 0px; z-index: 10000; border: 1px solid #EEE; border-radius: 4px; box-shadow: 0px 6px 12px #EEE; } .menu-inner-content ul { list-style: none; margin: 0px; padding: 0px; min-width: 100px; } .menu-inner-content ul li a { padding: 4px 8px; line-height: 25px; text-decoration: none; display: block; color: #333; } .menu-inner-content ul li a:hover { background-color: #EFEFEF; } </style> <script type="text/javascript"> $(document).ready(function() { //hover mode $('.my-menu').mouseover(function(event) { var content = $(this).find('.menu-content'); content.show(); }).mouseout(function(event) { var content = $(this).find('.menu-content'); content.hide(); }); //click mode /* $('.my-menu').click(function(event) { var self = $(this); var anchor = self.find('.menu-anchor'); var content = self.find('.menu-content'); var source = event.target; if (content.is(":visible") && !$.contains(content.get(0), source)) { content.hide(); return; } content.show(); var handler = function(event) { var source = event.target; if (!$.contains(self.get(0), source)) { content.hide(); $(document).unbind('click', handler); } }; $(document).bind('click', handler); });*/ }); </script> <body> <div class="my-menu"> <div class="menu-anchor"> <span>my space</span> <span class="menu-arrow-down"></span> </div> <div class="menu-content-wrapper"> <div class="menu-content"> <div class="menu-inner-content"> <ul> <li><a href="#">menu item1</a> </li> <li><a href="#">menu item1</a> </li> <li><a href="#">menu item1</a> </li> <li><a href="#">menu item1</a> </li> <li><a href="#">menu item1</a> </li> </ul> </div> </div> </div> </div> <div class="my-menu"> <div class="menu-anchor"> <span>sign up</span> <span class="menu-arrow-down"></span> </div> <div class="menu-content-wrapper"> <div class="menu-content"> <div class="menu-inner-content"> <div style="padding:10px"> user name: <input type="text" /> password: <input type="text" /> <input type="button" value="register"/></div> </div> </div> </div> </div> </body> </html>
相关推荐
纯CSS3简易下拉菜单 可为菜单项定义不同颜色
js实现简单的下拉菜单
简易下拉菜单
DropMenuView 一个简单下拉菜单Demo
兼容turbo pascal以及free pascal的简易下拉菜单程序 此包是在原dos下的基于turbo_pascal编程环境(未用turbo_vision)的下拉菜单基础上进一步简化、优化而来。原来的程序支持鼠标操作、dos下环境操作、内存操作、...
AZDropdownMenu, iPhone的简单下拉菜单组件 AZDropdownMenu AZDropdownMenu是一个支持 Swift的简单下拉菜单组件。屏幕截图屏幕截图中使用的代码包含在捆绑的示例项目中。 演示项目若要运行演示项目,请使用 git clon
简单下拉菜单导航 很基础 供初学者使用 简单下拉菜单导航 很基础 供初学者使用
android 简单粗暴的下拉菜单
DIV+CSS 简单下拉菜单 内含简单的日期先择器, DIV+CSS 简单下拉菜单
简单的下拉菜单提供大家下载简单的下拉菜单提供大家下载简单的下拉菜单提供大家下载
js,jq,css多方面实现简易下拉菜单功能.docx
二级下拉菜单的简单做法,excel 二级下拉菜单的简单做法方便工作学习
ASP 简单实现日期下拉菜单 ASP 简单实现日期下拉菜单 ASP 简单实现日期下拉菜单
通过基本控件QPushButton,QWidget,实现下拉菜单,可以展开多级菜单。
在dreanweaver下制作下拉菜单的图解方法,以及下拉菜单互动
超简单且炫酷的下拉菜单 超简单且炫酷的下拉菜单 超简单且炫酷的下拉菜单 超简单且炫酷的下拉菜单
简单DWR动态下拉菜单
点击出现的下拉菜单,简单设置数据源就可以实现效果