[Bootstrap] Triggering dropdown-toggle on Mouse Hover in Bootstrap

Fri, 27 May 2016 03:18:37 +0000

Using the `bootstrap-hover-dropdown` Plugin

1. Download `bootstrap-hover-dropdown`

Download link: http://www.bootcdn.cn/bootstrap-hover-dropdown/

Of course, you can also use the CDN version directly.

2. Include `bootstrap-hover-dropdown.js`

In your HTML file, make sure to include bootstrap-hover-dropdown.js. Typically, you can place it in a <script> tag at the bottom of the page:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Bootstrap Hover Dropdown Example</title>
 <!-- Include Bootstrap CSS -->
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
 <!-- Your content -->

 <!-- Include jQuery -->
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <!-- Include Bootstrap JS -->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 <!-- Include bootstrap-hover-dropdown.js -->
 <script src="path/to/bootstrap-hover-dropdown.js"></script>
</body>
</html>

Find the element with the dropdown-toggle class in your HTML file and modify it as follows:

1

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>

Change it to:

1

<a href="#" class="dropdown-toggle" data-hover="dropdown" data-close-others="true">Dropdown</a>

You can also add a parameter data-delay="1000", which sets the delay before the dropdown disappears (default is 500 milliseconds). For example:

1

<a href="#" class="dropdown-toggle" data-hover="dropdown" data-close-others="true" data-delay="1000">Dropdown</a>

4. Removing the Delay

If you want to completely remove the delay, you can directly modify the configuration in the bootstrap-hover-dropdown.js file, changing delay: 500 to delay: 0.

Find and modify the following code:

1

delay: 500

Change it to:

1

delay: 0

This will remove the dropdown menu delay.

Making Bootstrap Compatible with IE

Sat, 07 Mar 2015 07:24:29 +0000

The front-end of my previous websites was built entirely with Bootstrap.

I usually use Chrome, but one day I checked my website on IE6 running on XP, and it was a disaster. I had completely forgotten about browser compatibility. So I tested on:

Chrome, Opera, Firefox, IE 5.5-10 [using IE Tester]

The main issues were with IE, so I started looking for solutions:

http://www.jqueryba.com/1194.html

Add:

1
2
3


<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Or directly add:

1
2
3
4
5


<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->

Then:

1

header, footer, article, section, nav, menu, hgroup {display: block;}

1
2
3
4
5
6
7
8
9


<script type="text/javascript">
document.createElement("section");
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
</script>

The results weren’t great though – many nav elements and alignments were off.

BSIE [Bootstrap IE] http://www.bootcss.com/p/bsie/ This is an open-source library built on top of Bootstrap. The demo looked great, but due to legacy reasons, my site was already built and making changes was too difficult, so I had to give up.
The final solution: just embed two JS files.

html5shiv.js + respond.js
Yes, just these two JS files. At least IE7 and above now display properly. There are still some minor issues like rounded corners, but the nav, grid layout, and overall appearance work well. Very satisfying.

Bootstrap on Coinidea's Blog

[Bootstrap] Triggering dropdown-toggle on Mouse Hover in Bootstrap

Using the bootstrap-hover-dropdown Plugin

1. Download bootstrap-hover-dropdown

2. Include bootstrap-hover-dropdown.js

3. Modify the Dropdown in HTML

4. Removing the Delay

Making Bootstrap Compatible with IE

html5shiv.js + respond.js

Using the `bootstrap-hover-dropdown` Plugin

1. Download `bootstrap-hover-dropdown`

2. Include `bootstrap-hover-dropdown.js`