Home > DeveloperSection > Forums > How to Open Bootstrap dropdown list on hover?
Kamlakar Singh
Kamlakar Singh

Total Post:194

Points:1396
Posted on    March-05-2015 12:43 AM

 Bootstrap JQuery  JavaScript  Dropdown 
Ratings:


 1 Reply(s)
 820  View(s)
Rate this:

Here I’m working on a web application and use bootstrap framework for design part.

I’m design bootstrap menu where use dropdown list for sub menu when click on menu then open sub menu but I’m want to open menu on hover.

This is my code

<nav class="navbar navbar-default" role="navigation">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

                    <span class="sr-only">Toggle navigation</span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand" href="#">Brand</a>

            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav">

                    <li class="active"><a href="#">Link</a></li>

                    <li><a href="#">Link</a></li>

                    <li class="dropdown">

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

                        <ul class="dropdown-menu">

                            <li><a href="#">Action</a></li>

                            <li><a href="#">Another action</a></li>

                            <li><a href="#">Something else here</a></li>

                            <li class="divider"></li>

                            <li><a href="#">Separated link</a></li>

                            <li class="divider"></li>

                            <li><a href="#">One more separated link</a></li>

                        </ul>

                    </li>

                </ul>

                <form class="navbar-form navbar-left" role="search">

                    <div class="form-group">

                        <input type="text" class="form-control" placeholder="Search">

                    </div>

                    <button type="submit" class="btn btn-default">Submit</button>

                </form>

                <ul class="nav navbar-nav navbar-right">

                    <li><a href="#">Link</a></li>

                    <li class="dropdown">

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

                        <ul class="dropdown-menu">

                            <li><a href="#">Action</a></li>

                            <li><a href="#">Another action</a></li>

                            <li><a href="#">Something else here</a></li>

                            <li class="divider"></li>

                            <li><a href="#">Separated link</a></li>

                        </ul>

                    </li>

                </ul>

            </div>

        </nav>

How to possible please solve my problem

Thanks in Advance



Jennifer Morgan
Jennifer Morgan

Total Post:13

Points:95
Posted on    March-05-2015 1:35 AM

You can use this code

CSS:

.caret-up {

        width: 0;

        height: 0;

        border-left: 4px solid rgba(0, 0, 0, 0);

        border-right: 4px solid rgba(0, 0, 0, 0);

        border-bottom: 4px solid;

        display: inline-block;

        margin-left: 2px;

        vertical-align: middle;

    }

Javascript:

$(function () {

        $(".dropdown").hover(

                function () {

                    $('.dropdown-menu', this).stop(true, true).fadeIn("fast");

                    $(this).toggleClass('open');

                    $('b', this).toggleClass("caret caret-up");

                },

                function () {

                    $('.dropdown-menu', this).stop(true, true).fadeOut("fast");

                    $(this).toggleClass('open');

                    $('b', this).toggleClass("caret caret-up");

                });

    });


Don't want to miss updates? Please click the below button!

Follow MindStick