locked
Vertical menu Bootstrap RRS feed

  • Question

  • User-909867351 posted

    Hi

    I have one vertical menu with bootstrap. The problem is when I choose the dropdown menu it opens and create one space in the item bellow. I want the subitem menu appears on the right of the menu not bellow. How can I achieve this?

    Thank you

    here is my code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        <link href="css/geral.css" rel="stylesheet" />
        <style type="text/css">
            
            .dropdown:hover > .dropdown-menu {
                display: block;
            }
            .dropdown > .dropdown-toggle:active {
                pointer-events: none;
            }
            a{ /* Those lines are used only for styling */
            padding: 7px 10px;
            display: block;
            &:hover{
              color: red;
            }
        </style>
    </head>
    <body>
        <form>
       <div class="container">
            <div class="row">
                <div class="col-md-2">
                    <nav class="navbar  bg-light">
      <!-- Links -->
      <ul class="navbar-nav vertical-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Edifício</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Condóminos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Receitas</a>
        </li>
          <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
            Dropdown link
          </a>
          <div class="dropdown-menu " >
            <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>
          <li class="nav-item">
          <a class="nav-link" href="#"><i class="fas fa-address-card"></i>Teste</a>
        </li>
      </ul>
    
    </nav>
                </div>
            </div>
           </div>
            <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        </form>    
    </body>
    </html>
    

    Friday, November 8, 2019 7:13 PM

Answers

  • User288213138 posted

    Hi mariolopes,

    I want the subitem menu appears on the right of the menu not bellow

    You can try to add "dropright" to the parent element to made the subitem menu on the right. more information about dropright you can refer to below link:

    https://getbootstrap.com/docs/4.0/components/dropdowns/

    <div class="container">
                <div class="row">
                    <div class="col-md-2">
                        <nav class="navbar  bg-light">
                            <!-- Links -->
                            <ul class="navbar-nav vertical-nav">
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Edifício</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Condóminos</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Receitas</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <div class="btn-group dropright">
                                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                                            Dropdown link
                                        </a>
                                        <div class="dropdown-menu ">
                                            <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>
                                        </div>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#"><i class="fas fa-address-card"></i>Teste</a>
                                </li>
                            </ul>
    
                        </nav>
                    </div>
                </div>
            </div>

    The result:

    Best regards,

    sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 11, 2019 9:46 AM