Bootstrap Snippet Navbar hover dropdown using HTML Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="navbar-inner">
    <div class="container" style="width: auto;"> <a class="brand" href="#">JavaScript</a>
      <ul class="nav" role="navigation">
        <li class="dropdown"> <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul
          class="dropdown-menu" role="menu" aria-labelledby="drop1">
            <li><a tabindex="-1" href="http://google.com">Action</a>
            </li>
            <li><a tabindex="-1" href="#anotherAction">Another action</a>
            </li>
            <li><a tabindex="-1" href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li><a tabindex="-1" href="#">Separated link</a>
            </li>
      </ul>
      </li>
      <li class="dropdown"> <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
        <ul
        class="dropdown-menu" role="menu" aria-labelledby="drop2">
          <li><a tabindex="-1" href="#">Action</a>
          </li>
          <li><a tabindex="-1" href="#">Another action</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function ($, window, delay) {
  // http://jsfiddle.net/AndreasPizsa/NzvKC/
  var theTimer = 0;
  var theElement = null;
    var theLastPosition = {x:0,y:0};
  $('[data-toggle]')
    .closest('li')
    .on('mouseenter', function (inEvent) {
    if (theElement) theElement.removeClass('open');
    window.clearTimeout(theTimer);
    theElement = $(this);
    theTimer = window.setTimeout(function () {
      theElement.addClass('open');
    }, delay);
  })
    .on('mousemove', function (inEvent) {
        if(Math.abs(theLastPosition.x - inEvent.ScreenX) > 4 || 
           Math.abs(theLastPosition.y - inEvent.ScreenY) > 4)
        {
            theLastPosition.x = inEvent.ScreenX;
            theLastPosition.y = inEvent.ScreenY;
            return;
        }
        
    if (theElement.hasClass('open')) return;
    window.clearTimeout(theTimer);
    theTimer = window.setTimeout(function () {
      theElement.addClass('open');
    }, delay);
  })
    .on('mouseleave', function (inEvent) {
    window.clearTimeout(theTimer);
    theElement = $(this);
    theTimer = window.setTimeout(function () {
      theElement.removeClass('open');
    }, delay);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Navbar hover dropdown"
Bootstrap 3.0.3 Snippet by pradeephdc

Related: See More

Questions / Comments:

"Navbar hover dropdown" Bootstrap 3.0.3 Snippet by pradeephdc

Related: See More

Questions / Comments:

"Navbar hover dropdown"
Bootstrap 3.0.3 Snippet by pradeephdc