bootstrap submenu

Question

bootstrap submenu

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

If someone can help me I'm trying to create a sub-menu of preference that opens right inside administrative opens access, employees and control panel inside access would have two sub menus access register 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>

bootstrap submenu

asked by anonymous 28.12.2016 / 20:07

3 answers

Loop from the Wordpress category Problem to apply a jQuery mask to a modal

score 1 · Answer 1

I found the solution according to your paulo help, found the code below and made the changes to answer it.

$(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><scriptsrc="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>

score 0 · Answer 2

If you want to make it more interesting, use the Jquery library animate function

Follow 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>

score 0 · Answer 3

Rarely is the 'target' code! It is usually some accidental change in another part of the project. So just with that code that passed we probably will not find out. You can force the menu to open with javascript, or you can debug until you find the change. I do neither. I take the official example (from the drop down menu opening) and I customize until I find the problem, comparing with my problematic code. Spartan work! Copy, Paste, Return, Update, etc. Use the sublime text to edit the code.