locked
Bootstrap subMenu problem! RRS feed

  • Question

  • User-79977429 posted

    Hi

    I'm using this bootstrap menu html code :

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <link rel="stylesheet" href="Styles/bootstrap-reboot.min.css" />
        <link rel="stylesheet" href="Styles/bootstrap.min.css" />
        <link rel="stylesheet" href="Styles/myCustomCss.css" />        
    
    </head>
    <body>
        
        <!-- Menu box-->
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#">
                <img class="img-fluid img-logo" src="Images/logo.png" alt="Company Name" />
            </a>        
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="Default.aspx">Home<span class="sr-only"></span></a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false">
                            Links 1
                        </a>
                        <div class="dropdown-menu text-right">
                            <a class="dropdown-item" href="#">Link 1</a>
                            <a class="dropdown-item" href="#">Link 2</a>
                            <ul class="navbar-nav">
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">
                                        Sublinks
                                    </a>
                                    <div class="dropdown-menu text-right">
                                        <a class="dropdown-item" href="#">Sublink 1</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false">
                            Links 2
                        </a>
                        <div class="dropdown-menu text-right">
                            <a class="dropdown-item" href="#">Link 1</a>
                            <a class="dropdown-item" href="#">Link 2</a>
                            <a class="dropdown-item" href="#">Link 3</a>
                        </div>
                    </li>                
                </ul>
            </div>
        </nav>
        
    </body>
    
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <script src="Scripts/popper.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    
    </html>

    But the subMenu does not works correctly! (See Sublinks section)

    I've a lot of searched, but i don't found the code which works correctly!

    Can anybody help me how to solve my problem?

    Thanks in advance

    Saturday, March 14, 2020 10:38 PM

All replies

  • User475983607 posted

    One issue is the JavaScript references need to be within the body element.  The Visual Studio editor should be showing you a warning.  

    Saturday, March 14, 2020 11:16 PM
  • User-79977429 posted

    Thanks, i've do it, but still does not works!

    Sunday, March 15, 2020 7:30 AM
  • User415553908 posted

    you could try replacing your divs with uls (this probably is not required but seemed a bit cleaner to me) and adding a custom class, say, dropdown-submenu to the list item you would like to handle sub-menu event

    something along these lines (note i did a few more changes to your layout):

    <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#">
                <img class="img-fluid img-logo" src="Images/logo.png" alt="Company Name" />
            </a>        
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="Default.aspx">Home<span class="sr-only"></span></a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false">
                            Links 1
                        </a>
                        <ul class="dropdown-menu text-right">
                            <li><a class="dropdown-item" href="#">Link 1</a></li>
                            <li><a class="dropdown-item" href="#">Link 2</a></li>
                            <li class="dropdown-submenu">
                                <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sublinks</a>                       
                                <ul class="dropdown-menu text-right">                                
                                    <li><a class="dropdown-item" href="#">Sublink 1</a></li>
                                </ul>
                            </li>                        
                        </ul>
                    </li>                   
                </ul>
            </div>
        </nav>

    then you'd need a custom but of javascript to get click handler working:

    $(document).ready(function(){
      $('.dropdown-submenu a').on('click', function(e){
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
      });
    });
    Monday, March 16, 2020 2:39 AM
  • User1535942433 posted

    Hi hamed_1983,

    Accroding to your description,as far as I think,bootstrap 4 and popper.min.js could occur errors.So I suggest you could press F12 to check wheather your codes have errors and you could change the popper.min.js to umd/popper.min.js.

    Besides,I suggest you could follow the rules about submenu.

    More details,you could refer to below codes:

     <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
        <link href="Content/bootstrap-reboot.min.css" rel="stylesheet" />
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script>
            $(function () {
                $('.dropdown-menu a.dropdown-toggle').on('click', function (e) {
                    if (!$(this).next().hasClass('show')) {
                        $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
                    }
                    var $subMenu = $(this).next('.dropdown-menu');
                    $subMenu.toggleClass('show');
    
                    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function (e) {
                        $('.dropdown-submenu .show').removeClass('show');
                    });
                    return false;
                });
            })
        </script>
    
    
    
     <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="#">
                    <img class="img-fluid img-logo" src="image/image6.jpg" alt="Company Name" />
                </a>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="Default.aspx">Home<span class="sr-only"></span></a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">Links 1
                            </a>
                            <ul class="dropdown-menu text-right">
                                <li>
                                    <a class="dropdown-item" href="#">Link 1</a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">Link 2</a>
                                </li>
                                <li class="nav-item dropdown-submenu">
                                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">Sublinks
                                    </a>
                                    <ul class="dropdown-menu text-right">
                                        <li>
                                            <a class="dropdown-item" href="#">Sublink 1</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">Links 2
                            </a>
                            <div class="dropdown-menu text-right">
                                <a class="dropdown-item" href="#">Link 1</a>
                                <a class="dropdown-item" href="#">Link 2</a>
                                <a class="dropdown-item" href="#">Link 3</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>

    Result:

    Best regards,

    Yijing Sun

    Monday, March 16, 2020 3:29 AM