Bootstrap Hover Dropdown Plugin
===============================
![Current Version](http://img.shields.io/github/tag/cwspear/bootstrap-hover-dropdown.svg?style=flat)
#### Name Change
*Twitter Bootstrap* is now just *Bootstrap*, and I've renamed this repo, **renamed the files** and change all references from *Twitter Bootstrap* to just *Bootstrap* in the docs/example to reflect that.
No actual code changed, so I am keeping the current version (`2.0.1` at the time of this writing), but be aware of the lack of *twitter-* from the beginning of the JS files and how that might affect you.
Sorry for any inconvenience!
#### Updated for Bootstrap 3
I updated the demo with Bootstrap 3, as well as removed code associated to submenus ([not supported in Bootstrap 3](https://github.com/twbs/bootstrap/pull/6342#issuecomment-11594010)) and touch devices (just make sure you have `data-toggle="dropdown"` to let Mobile do its thing and my plugin won't interfere).
## Introduction
A simple plugin to enable Bootstrap dropdowns to activate on hover and provide a nice user experience.
The dropdowns are dismissed after a configurable delay. This fixes an issue that can instantly close your nav because of a 1px gap between the button/nav item that activated the dropdown and the actual dropdown. It is also generally a better user experience, as users are not punished by going 1 pixel outside of the dropdown, which would instantly close the nav without a delay.
**Note:** The HTML markup is the same as with any other Bootstrap dropdown. This will not interfere with Bootstrap's default activate-on-click method (i.e. this plugin combined with Bootstrap's default behavior work well to support both the ideal experience on desktop and mobile).
## Installation
You can simply download and extract the package downloaded from GitHub. Alternatively, you can download the files via [Bower](http://bower.io/) (a JavaScript package management system):
```
bower install bootstrap-hover-dropdown
```
which will also automatically install Bootstrap and jQuery if needed.
Once you have the files downloaded, link to the files in your code *after* you include the main Bootstrap JS file(s):
```html
<!-- script order matters! -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/bootstrap-hover-dropdown.min.js"></script>
```
## Usage
Just like in Bootstrap you can activate it without any JavaScript, just by adding a data-attribute, you can make it automatically work.
Add `data-hover="dropdown"` in addition (or in place of) Bootstrap's `data-toggle="dropdown"`.
You can set options via data-attributes, too, via `data-delay` and `data-close-others`. Here's an example of markup:
```html
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">My Account</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Change Email</a></li>
<li><a tabindex="-1" href="#">Change Password</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Logout</a></li>
</ul>
</li>
```
Alternatively, you can initialize via JavaScript:
```javascript
$('.dropdown-toggle').dropdownHover(options);
```
This also works with submenus without any other configuring since Bootstrap already supports this feature. Just use the markup like you were using before. Only the top level anchor tag needs any special markup for my plugin to work (see demo for proper markup).
## Options
* **delay**: *(optional)* The delay in miliseconds. This is the time to wait before closing a dropdown when the mouse is no longer over the dropdown or the button/nav item that activated it. Defaults to `500`.
* **instantlyCloseOthers**: *(optional)* A boolean value that when true, will instantly close all other dropdowns matched by the selector used when you activate a new navigation. This is nice for when you have dropdowns close together that may overlap. Default is `true`.
## Demo
You can view a demo for this plugin on my site: http://cameronspear.com/demos/bootstrap-hover-dropdown/
### A Note on Choosing a Selector
This plugin purposedly lets you choose a selector (as opposed to apply this to everything with the class of `.dropdown-toggle`). This is so that you can selectively apply it where you want. Maybe you only want to use it for the main nav, and not have it activate for dropdown buttons in the main content. You can add a class to the item that normally gets `.dropdown-toggle` and use that class with this plugin to easily achieve that, or use a selector such as `.main-nav .dropdown-toggle`.
**Important:** Bootstrap relies on styles associated with the class `.dropdown-toggle` (for stuff like the caret color), and it is recommended you leave that class alone.
## Changes/Bug Fixes
I'm a slacker and only started keeping track of changes/bug fixes starting in March of 2013.
* **2014-01-27** Fixed an issue where chaining could break on mobile and cleaned up the the way the plugin triggered events. Also cleaned up the demo (fixed navbar appearance).
* **2013-12-05** Change all references of *Twitter Bootstrap* to *Bootstrap* to reflect Bootstrap's name change.
* **2013-11-09** Disable this plugin for devices that support touch. The plugin was causing issues with some mobile devices, and it's not necessary for them.
* **2013-08-02** Add support for Bootstrap 3. For Bootstrap 2.x.x, use the `bootstrap-2.x.x` branch.
* **2013-06-10** Always instantly close submenu siblings when opening a new one. Issue #19.
* **2013-06-10** A fix for my last fix that would sometimes cause the correct item to not trigger when it should. Issue #18.
* **2013-05-08** Fix issue where a sibling could open a drop down that wasn't theirs. Issue #18.
* **2013-04-29** Added support for submenus: Submenus should now honor the delay option and way before closing. They do not abide by the `instantlyCloseOthers` option, as it's not really relevant.
* **2013-04-19** Fixed an issue where the conditional rule to disable hover on mobile wasn't working if you included the script in the header.
* **2013-04-03** Made it so if you're using the responsive CSS and in tablet/mobile view, disable the hover.
* **2013-03-16** Fixed an issue where the options you passed in via the method call were completely ignored.
## Contributions
[Mattia Larentis](https://github.com/nostalgiaz) helped me with the idea for the data-attributes and doing the options via an object.
## Roadmap
As this plugin, in its simplicity, is pretty much exactly what I intend it to be, I don't plan to implement any new features. ~~**One exception:** I would like to tweak it so that when you're in a submenu, it doesn't instantly close when you hover outside of it.~~ **Update:** I added this in late April 2013.
If you have ideas for a new feature or something along those lines, you're welcome to share them with me, but I am not likely to implement it/merge your pull without a very compelling reason. You are absolutely free to create a fork and implement the feature yourself for your and others' use.
This, of course, does not speak for bugs. If you have a bug, please bring it to my attention, and I will try and fix it. Note that 93.7% of people's issues are caused by incorrect markup, so please double check that first.
## Me
Follow me on Twitter: [@CWSpear](https://twitter.com/CWSpear) or check out my [blog](http://cameronspear.com/blog/).
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
嵌入式优质项目,资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松copy复刻,拿到资料包后可轻松复现出一样的项目。 本人单片机开发经验充足,深耕嵌入式领域,有任何使用问题欢迎随时与我联系,我会及时为你解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明,项目具体内容可查看下方的资源详情。 【附带帮助】: 若还需要嵌入式物联网单片机相关领域开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步。 【本人专注嵌入式领域】: 有任何使用问题欢迎随时与我联系,我会及时解答,第一时间为你提供帮助,CSDN博客端可私信,为你解惑,欢迎交流。 【建议小白】: 在所有嵌入式开发中硬件部分若不会画PCB/电路,可选择根据引脚定义将其代替为面包板+杜邦线+外设模块的方式,只需轻松简单连线,下载源码烧录进去便可轻松复刻出一样的项目 【适合场景】: 相关项目设计中,皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻,也可以基于此项目进行扩展来开发出更多功能
资源推荐
资源详情
资源评论
收起资源包目录
物联网燃气表管理系统.zip(毕设/课设/竞赛/实训/项目开发) (1239个子文件)
Global.asax 102B
Web.config 6KB
ApplicationInsights.config 4KB
Web.config 2KB
Web.Release.config 1KB
Web.Debug.config 1KB
AccountController.cs 17KB
ManageController.cs 14KB
201604241546315_init03.cs 7KB
IdentityModels.cs 4KB
IdentityConfig.cs 4KB
AccountViewModels.cs 3KB
Startup.Auth.cs 3KB
SystemModels.cs 3KB
ManageViewModels.cs 3KB
Configuration.cs 2KB
BundleConfig.cs 2KB
BaseInfoController.cs 2KB
SystemController.cs 2KB
AssemblyInfo.cs 1KB
BaseIfonModels.cs 1KB
201604241546315_init03.Designer.cs 801B
Global.asax.cs 661B
RouteConfig.cs 583B
HomeController.cs 580B
WebApiConfig.cs 577B
Startup.cs 274B
FilterConfig.cs 266B
_Layout.cshtml 17KB
Price.cshtml 6KB
Users.cshtml 5KB
Index.cshtml 5KB
Register.cshtml 5KB
Branch.cshtml 4KB
Login.cshtml 4KB
Address.cshtml 4KB
Index.cshtml 3KB
InitData.cshtml 3KB
ManageLogins.cshtml 3KB
Index.cshtml 1KB
ResetPassword.cshtml 1KB
ChangePassword.cshtml 1KB
_LoginPartial.cshtml 1KB
SetPassword.cshtml 1KB
ExternalLoginConfirmation.cshtml 1KB
VerifyCode.cshtml 1KB
_ExternalLoginsListPartial.cshtml 1KB
VerifyPhoneNumber.cshtml 960B
ForgotPassword.cshtml 895B
AddPhoneNumber.cshtml 871B
SendCode.cshtml 743B
Contact.cshtml 441B
ResetPasswordConfirmation.cshtml 301B
ConfirmEmail.cshtml 269B
Lockout.cshtml 219B
ForgotPasswordConfirmation.cshtml 201B
Error.cshtml 192B
ExternalLoginFailure.cshtml 156B
About.cshtml 145B
_ViewStart.cshtml 54B
GasMeter_MS.csproj 104KB
components.css 308KB
components-rounded.css 308KB
bootstrap.css 134KB
bootstrap.css 118KB
bootstrap.min.css 111KB
bootstrap.min.css 96KB
layout.css 78KB
plugins.css 43KB
theme-default.css 40KB
style.css 31KB
font-awesome.css 26KB
style.min.css 22KB
font-awesome.min.css 21KB
select2.css 18KB
jquery.dataTables.css 17KB
jquery.dataTables.min.css 15KB
jquery.dataTables_themeroller.css 12KB
simple-line-icons.css 11KB
jquery.dataTables_themeroller.min.css 10KB
dataTables.tableTools.css 9KB
simple-line-icons.min.css 9KB
dataTables.colVis.css 6KB
dataTables.tableTools.min.css 6KB
dataTables.bootstrap.css 5KB
dataTables.colVis.min.css 4KB
login2.css 4KB
select2-bootstrap.css 3KB
dataTables.responsive.css 2KB
custom.css 1KB
dataTables.scroller.css 710B
dataTables.scroller.min.css 572B
dataTables.fixedColumns.css 517B
ui-bootstrap-csp.css 513B
dataTables.autoFill.css 493B
dataTables.autoFill.min.css 344B
angular-csp.css 343B
dataTables.fixedColumns.min.css 317B
dataTables.colvis.jqueryui.css 316B
dataTables.colReorder.css 224B
共 1239 条
- 1
- 2
- 3
- 4
- 5
- 6
- 13
资源评论
阿齐Archie
- 粉丝: 1w+
- 资源: 2303
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功