0

Hi I'm a novice in web programming (only web!) so be gentle please. I'm trying to build a sample app using bootstrap. My interest is in navbar in which I want to be able to have dropdown menu on nav links when hovered. To be more specific I need nav links to behave as they normally do (display tab content, e.g. some page when clicked) but with dropdown menu showing when hovered. I can't have booth 'data-toggle="tab"' and 'data-toggle="dropdown"' now can I? Thank to this site I've managed to do hovering part: But I'm stuck on displaying dropdown menu, some link or example would be great. Thanks in advance.

My HTML code:

<div class="container">    <!------- Container start --------->
    <div class="row">
        <div class="span12">
            <div class="navbar">
                <div class="navbar-inner">
                    <a class="brand span2" href="#">Title</a>
                    <ul class="nav">
                        <li class="divider-vertical"></li>
                        <li class="active"><a id="nav_callcen"  href="#t_link1" data-toggle="tab">Link1</a></li>
                        <li class="divider-vertical"></li>
                        <li><a href="#t_link2" data-toggle="tab">Link2</a></li>
                        <li class="divider-vertical"></li>
                        <li><a href="#t_link3" data-toggle="tab">Link3</a></li>
                        <li class="divider-vertical"></li>
                        <li class ="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#t_link4" >Link4*</a>
                                <ul class="dropdown-menu" >
                                    <li><a id="link1" tabindex="-1" href="#">Link1</a></li>
                                    <li><a id="link2" tabindex="-1" href="#">Link2</a></li>
                                </ul>
                        </li>
                     </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="span12">
            <div id="appContent" class="tab-content">

                <div class="tab-pane active" id="t_link1">
                    <p>This is Link1</p>
                </div>   
                <div class="tab-pane" id="t_link2">
                    <p>This is Link2</p>
                </div>    
                <div class="tab-pane" id="t_link3">
                    <p>This is Link3</p>
                </div>    
                <div class="tab-pane" id="t_link4">
                    <p>This is Link4</p>
                </div>    

            </div>
        </div>
    </div>          

</div> <!------- Container end --------->

CSS:

ul.nav li.dropdown:hover > ul.dropdown-menu{
    margin: 0;
    display: block;    
}

a.menu:after, .dropdown-toggle:after {
  content: none;
}

JS:

$('.dropdown').on('click', 'li', function(event) {
        $("a[href=#t_"+event.target.id+"]").tab('show');
});
cagi
  • 209
  • 1
  • 4
  • 14
  • Give this a try: http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click Seems to be what you are looking for! – Timothy Randall Apr 12 '13 at 14:25
  • Timothy Randall Thanks for your replay, I've seen that one before it gave me hovering part. But can't get my navbar link "Link4*" to act booth as navigation trigger and hiden menu trigger. See my code. I would like for my user to be able to click on link and that would display the page/tab content, or he could click on one of menu items from dropdown menu. – cagi Apr 13 '13 at 10:19
  • So it seems nobody knows the answer to this, I thought somebody was already in a pursuit for this one – cagi Apr 16 '13 at 08:49

0 Answers0