Bootstrap mega-menu, last drop-down stay visible

Question

I have this mega-menu created with bootstrap-3

<nav class="yamm navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-brand navbar-brand-centered">
                <a href="#">Logo</a>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="navbar-brand-centered">
            <ul class="nav navbar-nav navbar-left">
                <li class="dropdown yamm-fw">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle" tabindex="0">Some Procedure</a>
                <ul class="dropdown-menu">
                        <li>
                    <div class="yamm-content">
                                <div class="row">
                            <div class="col-xs-12 col-md-9 col-sm-6 bg1 nopadding">
                                <div class="megamenu">
                                    <h4>Some Text Some Text Some Text </h4>
                                    <hr />
                                    <ul>
                                        <li><span>Some Text Some Text Some Text Some Text Some Text </span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                </ul>
                </li>
                <li class="dropdown yamm-fw">
                    <ul class="dropdown-menu">
                            <li>
                        <div class="yamm-content">
                                <div class="row"></div>
                        </div>
                    </li>
                    </ul>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown yamm-fw">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle" tabindex="0">Search Here</a>
                <ul class="dropdown-menu">
                <li>
                    <div class="yamm-content">
                        <div class="row">
                        <div class="col-xs-12 col-md-12 col-sm-12 bg1 searchbg">
                            <div class="megamenu">
                                <form role="form">
                                  <div class="form-group">
                                    <label for="email">Pick A Date</label>
                                    <input type="datepicker" class="form-control" id="datepicker">
                                  </div>
                                  <button type="submit" class="btn btn-default">Submit</button>
                                </form>
                            </div>
                        </div>
                        </div>
                    </div>
                </li>
                </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

The last menu drop-down has form and I'm trying it to stay visible on page load and it does stay visible using style="display: block !important" but as soon as cursor move away from drop-down it close it-self.

Drop-down menu visible on mouse hover

$('.dropdown').hover(function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(300);
    }, function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(300);
});

2nd problem I'm facing is form has datepicker input and when click on input to select date, calendar shows but drop-down with form behind calendar close itself.

What I've tried possible solutions and answers here and here and here but nothing works or may be I'm doing it all wrong.

Fiddle

score 1 · Answer 1 · answered Aug 27 '15 at 15:24

Dropdowns have this default issue. They are supposed to get closed when the <body> is clicked. So, what I would suggest you do is, implement the same logic again, but use your own way. I could show you an example here:

$(function () {
  $(".form-trigger").click(function () {
    $(this).closest(".dropdown").addClass("form-opened");
  });
  $(".send-button").click(function () {
    $(this).closest(".dropdown").removeClass("form-opened");
    return false;
  });
});

.dropdown.form-opened form.dropdown-menu {display: block;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="nav">
  <ul>
    <li class="dropdown">
      <a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#" class="btn btn-default">
        Dropdown trigger
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" aria-labelledby="dLabel">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#" class="btn btn-default form-trigger">
        Form Trigger
        <span class="caret"></span>
      </a>
      <form class="dropdown-menu" aria-labelledby="dLabel" class="form-inline" style="padding: 15px;">
        <div class="form-group">
          <label for="exampleInputName2">Name</label>
          <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">Email</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>
        <button type="submit" class="btn btn-default send-button">Send invitation</button>
      </form>
    </li>
  </ul>  
</nav>

really appreciate the example and you are right but if i just remove the `hover function` script i don't need to change or do anything else and everything will work but then whole purpose of design dies so wana keep the `hover function` but make sure the form remain visible and even if user move cursor over any other menu it will open on top of form because it doesn't matter as soon the cursor move away the other menu will close and but form must remain open. — Shehary, Aug 27 '15 at 16:26

potatopeelings · Accepted Answer · 2015-08-28T11:34:58.327

0

The last menu drop-down has form and I'm trying it to stay visible on page load and it does stay visible using style="display: block !important"

You need to exclude the 'stayopen' element from the hover rule

$('.dropdown').hover(function() {
    $(this).find('.dropdown-menu:not(#stayopen)').stop(true, true).delay(100).fadeIn(300);
}, function() {
    $(this).find('.dropdown-menu:not(#stayopen)').stop(true, true).delay(100).fadeOut(300);
});

Additionally you also need to add the following CSS so that the hover menu item appears on top of the search box

#stayopen {
    z-index: 1;
}

and the following so that that the hover menu item doesn't hide part of the search menu when it comes up

.yamm-fw > .dropdown-menu
{
    background-color: transparent;
}

Note that you might need to change the z-index (increase it so that it appears over the body content if there is anything under it) and the above selector (to make it more specific) a bit depending on the other markup in your page.

Fiddle - http://jsfiddle.net/ymxh5hru/

Note - the original answer was based on incorrect assumption of what was required.

edited Aug 28 '15 at 11:34

answered Aug 27 '15 at 15:19

potatopeelings

40,709
7
95
119

Er... mind explaining the downvote? Am I missing something? – potatopeelings Aug 27 '15 at 15:34
if I downvoted it, i would explain it too but not me, also doesn't matter if I move the CSS to selector or keep it inline it will has the same effect and yes i agree removing JS "fadeout (and fadeIn)" will resolve the problem but then I shouldn't be here asking the question. i need a work around wana keep the JS with hover function and also the form remain open if mouse leave the dropdown – Shehary Aug 27 '15 at 16:31
Was the fadeout / fadein just for the menu animation? If so would http://jsfiddle.net/20qhj5b4/ be what you are looking for? – potatopeelings Aug 28 '15 at 11:21
exactly what I'm looking for, thanks, can you please update the answer too – Shehary Aug 28 '15 at 11:22
Done, Btw it might be cleaner to do this by not classing the search box as a dropdown (just remove the class dropdown-menu from stayopen and you'll get a fair idea) and enabling the bootstrap popup to open on hover (see http://stackoverflow.com/a/8878666/360067) with CSS animation. Cheers! – potatopeelings Aug 28 '15 at 11:37

Bootstrap mega-menu, last drop-down stay visible

2 Answers2