简体   繁体   中英

Bootstrap responsive multi-level navigation menu

I have coded a multi-level navigation menu for bootstrap. It works well in 1200px and above. But when the screen size is under 1200px (I have set 1200px as the breapoint) the first level dropdown menu opens/closes on click well, but the second level dropdown menu does not open on click. I want this second level dropdown menu to open on screensizes below 1200 when its parent anchor is clicked. For example when services > cosmetic dentistry is clicked on lower than 1200px screen size, I want the '.dropdown-menu' inside it (dental hygiene, dentures etc) to show up/toggleshow(hides on click again). How can I achieve this?

This is the HTML:

    <nav id="navbar" class="navbar navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-inner">
              <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-left">
                    <li><a href="#">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item"><a href="#">Nervous Patients Care</a></li>
                             </ul>
                      </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team <i class="fa fa-angle-down"></i></a>
                      <ul class="dropdown-menu">
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item"><a href="#">Nervous Patients Care</a></li>
                             </ul>
                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Offers/Fees <i class="fa fa-angle-down"></i></a>
                      <ul class="dropdown-menu">
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item"><a href="#">Nervous Patients Care</a></li>
                             </ul>
                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Patients <i class="fa fa-angle-down"></i></a>
                      <ul class="dropdown-menu">
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item"><a href="#">Nervous Patients Care</a></li>
                             </ul>
                    </li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Referrals</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
              </div>
          </div><!-- end navbar-inner -->
       </div><!-- end container -->
    </nav><!-- end navbar -->

The CSS:

#navbar {
    clear: both;
    border-radius: 0;
    border: 0;
    margin: 0;
    background: #f9f9f9;
    height: auto;
}
#navbar li a {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    color: #575757;
    padding-top: 20px;
    padding-bottom: 20px;
}
#navbar li a:hover {
    color: #7bcfdc
}

.dropdown-menu {
    box-shadow: none;
    border-radius: 0;
    border: 0;
    width: 240px;
    padding: 0;
}
.dropdown-submenu {
    position:relative;
    border-radius: 0;
    padding: 0;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-1px;
    margin-left:-1px;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
}

#navbar .navbar-nav li a i {
    margin-left: 5px;
}
#navbar .navbar-nav li li a{
    background: #eee;
    text-transform: none;
    padding-top: 11px;
    padding-bottom: 11px;
}
#navbar .navbar-nav li li {
    position: relative;
}
#navbar .navbar-nav li li i {
    position: absolute;
    right: 20px;
    top: 14px;
}
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a {
    background: #e5e5e5;
}
#navbar .navbar-nav li li a:hover,
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a:hover
{
    background: #ff4e4f;
    color: #FFF;
}



/*----- RESPONSIVE STYLES ------*/
@media screen and (max-width: 1199px) {
    #navbar .dropdown-menu {
        width: 100%;
        position: relative;
    }
}
@media screen and (max-width: 768px) {
    .header-top p {
        text-align: center;
    }
    .header-top a {
        margin: 10px auto 0 auto;
        clear: both;
        display: block;
    }
}
@media screen and (min-width: 1200px) {
    #navbar .dropdown:hover > .dropdown-menu {
        display: block;
    }
    .dropdown-submenu:hover>.dropdown-menu {
        display:block;
    }
}

I made a JSFiddle for this:
https://jsfiddle.net/Lefosx46/

I took a look at your code. There's a lot going on, so while my answer should work there may be more efficient ways of doing it. It might at least point you in the right direction.

There seemed to be an issue with:

@media screen and (max-width: 1199px) {
    #navbar .dropdown-menu {
        width: 100%;
        position: relative;
    }
}

I removed that and added:

@media screen and (max-width: 1199px) {
    .dropdown-submenu:hover .dropdown-menu {
      display: block;
    }
} 

You can see a fiddle here: https://jsfiddle.net/t4rnz8dg/

Apologies if I've misunderstood your question!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM