submenu bootstrap

Question

submenu bootstrap

Asked 7 years, 9 months ago

Viewed 1,171 times

0

If anyone can help me I’m trying to create a sub-menu preference that opens right inside administrative opens access, employees and control panel within access would have two sub-menus register access and list access, follow the code.

<div class="btn-group dropdown">
    <button type="button" class="btn btn-primary">Administrativo</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>

    <ul class="dropdown-menu">
        <li><a href="#">Acesso</a>
            <ul class="dropdown-menu">
                <li><a href="administrativo.php?link=2">Cadastrar Acesso</a></li>
                <li><a href="administrativo.php?link=3">Listar Acesso</a></li>
            </ul>
        </li>
        <li><a href="#">Funcionários</a></li>
        <li><a href="#">Painel de Controle</a></li>
    </ul>
</div>

3 answers

Browser other questions tagged bootstrap submenu

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

by RafaelDupalio • 11 points · Answer 1 · 2016-12-29T16:52:17+00:00

I found the solution as per your help paul, I found the code below and made the changes to suit me.

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

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       
<div class="container">
  <h2>Multi-Level Dropdowns</h2>
  <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
  <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
      <span class="caret"></span>
    </button>
    <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="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

by Paulo Sérgio Duff • **1,201** points · Answer 2 · 2016-12-29T13:08:34+00:00

It’s rarely the target code! It is usually some accidental change in another part of the project. So only with this code you passed we probably won’t find out. You can force the menu to open with javascript, or you can debug until you find the change. I don’t do either. I take the official example (from the drop down menu opening) and customize until I find the problem, comparing it with my problematic code. Spartan work! Copy, Paste, Back, Update, etc. Use sublime text to edit code.

by Paulo Sérgio Duff • **1,201** points · Answer 3 · 2016-12-28T21:05:30+00:00

If you want to make it more interesting, use the Jquery library’s Animate function

Follows the code:

<!DOCTYPE html>
<html>
<head>
    <title>


    </title>
    <script type="text/javascript">

        function abreSubMenu()
                                {
                                    window.document.getElementById("sub-menu").innerHTML = '<ul><li>sub opção 1</li><li>sub opção 2</li><li>sub opção 3</li></ul>' ;

                                }       
        </script>
</head>
<body>

<div id="menu">
<ul>
    <li>opção 1</li>
    <li>opção 2</li>
    <li id="sub-menu" onclick="abreSubMenu()">opção 3</li>

</ul>




</div>

</body>
</html>