I am unable to insert submenus in the dropdown menu

Question

I am unable to insert submenus in the dropdown menu

Asked 5 years, 2 months ago

Viewed 191 times

1

Problem: I’m not being able to create a dropdown menu with submenus. Ex: When clicking the profile on the left will open a drop menu the idea would be when clicking the settings open new options.

What do I expect? When the user clicks on the settings option, open new options for the same.

HTML code:

<ul class=" navbar-nav navbar-right">

                <li class="dropdown navbar-user">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="@User.Identity.GetClaim("FotoPerfilUrl")" alt="" />
                        <span class="d-none d-md-inline">@User.Identity.GetClaim("Nome")</span> <b class="caret"></b>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">

                        <a class="dropdown-item position-btn-exit" tabindex="-1" href="#">Configurações</a>
                        <a tabindex="-1" href="#">More options</a>
                        <ul class="dropdown-menu">
                           <li class="dropdown navbar-user"><a class="dropdown navbar-user">1</a></li>
                           <li class="dropdown navbar-user"><a class="dropdown-item">1</a></li>
                           <li class="dropdown navbar-user"><a class="dropdown-item">1</a></li>
                        </ul>

                        <form action="@Url.Action("Logout", "Account")" id="signoutForm" method="post" novalidate="novalidate">
                            @Html.AntiForgeryToken()
                            <a href="javascript:document.getElementById('signoutForm').submit()" class="dropdown-item position-btn-exit">Sair</a>
                        </form>

                    </div>

                </li>

            </ul>

Picture of how it turned out:

Picture of how I’d like it to look:

1 answer

Browser other questions tagged javascript html jquery twitter-bootstrap bootstrap-3

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

by hugocsl • **65,517** points · Answer 1 · 2019-07-19T13:38:07+00:00

Look here’s a model, made it based in that script, and using the navbar Bootstrap 3 default. But basically you create a new link inside the menu you are about to do the Enable sub-menu showing the next one UL in case it is clicked.

$(document).ready(function() {
    $('.dropdown-submenu a.test').on("click", function(e) {
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
    });
});

Follow the image code above

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" /> -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu .dropdown-menu {
        top: 100%;
        margin-top: 5px;
        margin-left: -1px;
    }
</style>
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <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="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">

                            <!-- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> -->


                            <a href="#" class="dropdown-toggle"  role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tutorials<span class="caret"></span></a>


                            <ul class="dropdown-menu">
                                <li><a tabindex="-1" href="#">HTML</a></li>
                                <li><a tabindex="-1" href="#">CSS</a></li>
                                <li class="dropdown-submenu">
                                    <a class="test" tabindex="-1" href="#">Novo Drop <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a tabindex="-1" href="#">2nd level </a></li>
                                        <li><a tabindex="-1" href="#">2nd level </a></li>
                                        <li class="dropdown-submenu">
                                            <a class="test" href="#">Outro dropdown <span class="caret"></span></a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">3rd level </a></li>
                                                <li><a href="#">3rd level </a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <div class="container">
        <p>
            resto do conteúdo
        </p>
    </div>



    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.dropdown-submenu a.test').on("click", function(e) {
                $(this).next('ul').toggle();
                e.stopPropagation();
                e.preventDefault();
            });
        });
    </script>

</body>

</html>