Twitter Bootstrap Question posted in

Twitter Bootstrap top menu unknown component slides down

I’m using Twitter Bootstrap and I’m having a problem with the top-bar menu. When I choose an item from the dropdowns, all the events are fired correctly, JavaScript is OK, but there is a visual something (a div probably?) that slides down and then disappears. It looks like this:

ugly sliding-down bug image

I’m not a Twitter Bootstrap expert, but I expect I’ve got some invalid HTML put there. Entire HTML code is available here: https://github.com/pateketrueke/json-schema-faker/blob/gh-pages/src/index.html, but probably the most important part is this:

<body>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            [...]
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Samples <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li class="dropdown-header">faker.js</li>
                            <li><a href="#" id="example_faker" data-toggle="collapse" data-target=".navbar-collapse">faker example</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header">chance.js</li>
                            <li><a href="#" id="example_chance" data-toggle="collapse" data-target=".navbar-collapse">chance example</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header">other</li>
                            <li><a href="#" id="example_boolean" data-toggle="collapse" data-target=".navbar-collapse">boolean</a></li>
                            <li><a href="#" id="example_integer" data-toggle="collapse" data-target=".navbar-collapse">integer</a></li>
                            <li><a href="#" id="example_array" data-toggle="collapse" data-target=".navbar-collapse">array</a></li>
                        </ul>
                    </li>

The question is: what can I do to remove the “sliding-down-and-disappearing-thing” bug?

EDIT

This app supports the mobile version as well. It looks like this:

mobile version mainpage image

When you touch the top right hand nav button, the menu appears:

mobile version mainmenu image

Now when I click samples, the submenu appears:

mobile version samples submenu image

And when I click any of the options, I would like all menus to hide (collapse), just to see the demo immediately.

Now the mobile works as intended :). And I’d like the non-mobile-sliding-bug solution not ot break the mobile version.

Tags:

2

Answers


  1. 0 
    <div id="navbar" class="navbar-collapse collapse">

    Remove the 2 css classes.

    This 2 classes are supposed to works with the dropdown system. So the dropdown system try to do something weird with this div and it doesn’t really works.

    Login or Signup to reply.
  2. 0

    Bootstrap menu is not designed to work like this.
    Take a look at http://getbootstrap.com/javascript/#dropdowns and preview it as a mobile device as well.

    A simple workaround for what you want to do would be to have JS that will do the hiding, like:

    <a href="#" onclick="hideNavbarMenu()" id="example_chance">chance example</a>

    And the JS:

    function hideNavbarMenu() {
  $('.navbar-collapse').removeClass('in');
}

    Note that I also removed the data-toggle="collapse" data-target=".navbar-collapse" from the links.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search