Bootstrap menu does not open submenu

Asked

Viewed 1,650 times

1

Why don’t you open the submenu in this menu I implemented, I can’t find the error. Anyone knows?

Bootstrap v3.3.7 jQuery v3.1.1

<!DOCTYPE html>
<html>
<head>
     <title>Menu</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <link type="text/css"      href="../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">

     <script type="text/javascript" src="../../resources/js/jquery-3.1.1.min.js"></script>
     <script type="text/javascript" src="../../resources/bootstrap/js/bootstrap.min.js"></script>
 </head>
  <body>
    <nav class="navbar navbar-default">
       <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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="#" style="padding: 5px 15px;"><img src="#" width="160"></a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">Link 1</span></a></li>
                <li><a href="#">Link 2</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link 3 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 3.1</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Link 3.1.1</a></li>
                                <li><a href="#">Link 3.1.2</a></li>
                                <li><a href="#">Link 3.1.3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Link 3.2</a></li>
                        <li><a href="#">Link 3.3</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
bootstrap-3

2 answers

1


Your menu is normal, it stops working when it does not find the js files then it may be that your reference is wrong.

On link 1 had a tag closing without being opened.

Test with these:

<link ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Issue 1:

The bootstrap removed the dropdown-submenu functionality as shown in the link below, but you can add additional css to make this same functionality:

https://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing

        .dropdown-submenu {
            position: relative;
        }

            .dropdown-submenu > .dropdown-menu {
                top: 0;
                left: 100%;
                margin-top: -6px;
                margin-left: -1px;
                -webkit-border-radius: 0 6px 6px 6px;
                -moz-border-radius: 0 6px 6px 6px;
                border-radius: 0 6px 6px 6px;
            }

            .dropdown-submenu:hover > .dropdown-menu {
                display: block;
            }

            .dropdown-submenu > a:after {
                display: block;
                content: " ";
                float: right;
                width: 0;
                height: 0;
                border-color: transparent;
                border-style: solid;
                border-width: 5px 0 5px 5px;
                border-left-color: #cccccc;
                margin-top: 5px;
                margin-right: -10px;
            }

            .dropdown-submenu:hover > a:after {
                border-left-color: #ffffff;
            }

            .dropdown-submenu.pull-left {
                float: none;
            }

                .dropdown-submenu.pull-left > .dropdown-menu {
                    left: -100%;
                    margin-left: 10px;
                    -webkit-border-radius: 6px 0 6px 6px;
                    -moz-border-radius: 6px 0 6px 6px;
                    border-radius: 6px 0 6px 6px;
                }
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <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="#" style="padding: 5px 15px;">
                    <img src="#" width="160">
                </a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link 3<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-submenu">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 3.1</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Link 3.1.1</a></li>
                                    <li><a href="#">Link 3.1.2</a></li>
                                    <li><a href="#">Link 3.1.3</a></li>
                                </ul>
                            </li>
                            <li class="dropdown-submenu">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 3.2</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Link 3.2.1</a></li>
                                    <li><a href="#">Link 3.2.2</a></li>
                                    <li><a href="#">Link 3.2.3</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Link 3.3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

  • In your example also does not work, in case I need to open the submenu of the submenu, ie Link 3.1.1

  • I had not seen that there were 3 levels, I edited my answer I hope to have helped.

  • Ball show, solved my problem. Thanks, hugs!

  • @Alisson just be careful with this solution because it doesn’t work well on mobile devices as it uses the :hover to open the submenus it does not work well with touch screens, where you will not have a cursor

  • @Leandrogodoyrosa, ola Leandro, you have some code on how to do it in a way that works also on mobile device?

1

Does not work because Bootstrap 3 does not support submenus, the class dropdown-submenu that you used was probably from Bootstrap 2.

If you really want to use submenus with Bootstrap 3 you will need to use some plugin for bootstrap, such as Bootstrap-submenu

Browser other questions tagged bootstrap-3

You are not signed in. Login or sign up in order to post.