<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar navbar-expand-md navbar-dark bg-dark mb-4" role="navigation"> <a class="navbar-brand" href="#">Customer Xperience</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Monitoreo</a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li class="dropdown-item" href="#"><a>Dashboard de monitoreo</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Reporter</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1"> <li class="dropdown-item" href="#"><a>Disponibilidad</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Desempeño</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1-1"> <li class="dropdown-item" href="#"><a>Datos</a></li> <li class="dropdown-item" href="#"><a>Voz</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Operacion</a> <ul class="dropdown-menu" aria-labelledby="dropdown2"> <li class="dropdown-item" href="#"><a>Dashboard de Tickets</a></li> <li class="dropdown-item" href="#"><a>Reporte de Tickets Totales</a></li> <li class="dropdown-item" href="#"><a>Reporte de Incidentes</a></li> <li class="dropdown-item" href="#"><a>Reporte de Changes</a></li> <li class="dropdown-item" href="#"><a>Reporte de Problemas</a></li> <li class="dropdown-item" href="#"><a>Reporte de Requerimientos</a></li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">CMDB</a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li class="dropdown-item" href="#"><a>Dashboard C</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Reporter</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1"> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Catalogo de Servicios</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1-1"> <li class="dropdown-item" href="#"><a>Opcion 1</a></li> <li class="dropdown-item" href="#"><a>Opcion 2</a></li> <li class="dropdown-item" href="#"><a>Opcion 3</a></li> </ul> </li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Inventario de Equipos</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1-1"> <li class="dropdown-item" href="#"><a>Opción 1</a></li> <li class="dropdown-item" href="#"><a>Opción 2</a></li> </ul> </li> </ul> <li class="dropdown-item" href="#"><a>Usuarios</a></li> </li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Solicitudes</a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">QA</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1"> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Solicitud A</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1-1"> <li class="dropdown-item" href="#"><a>Opción 1</a></li> <li class="dropdown-item" href="#"><a>Opción 2</a></li> <li class="dropdown-item" href="#"><a>Opción 3</a></li> </ul> </li> </ul> </li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Catalogo</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1"> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Seguridad</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1-1"> <li class="dropdown-item" href="#"><a>Opción 1</a></li> <li class="dropdown-item" href="#"><a>Opción 2</a></li> <li class="dropdown-item" href="#"><a>Opción 3</a></li> </ul> </li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Redes</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1-1"> <li class="dropdown-item" href="#"><a>Opción 1</a></li> <li class="dropdown-item" href="#"><a>Opción 2</a></li> <li class="dropdown-item" href="#"><a>Opción 3</a></li> </ul> </li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">TI</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1-1"> <li class="dropdown-item" href="#"><a>Opción 1</a></li> <li class="dropdown-item" href="#"><a>Opción 2</a></li> <li class="dropdown-item" href="#"><a>Opción 3</a></li> </ul> </li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nube</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1-1"> <li class="dropdown-item" href="#"><a>Opción 1</a></li> <li class="dropdown-item" href="#"><a>Opción 2</a></li> <li class="dropdown-item" href="#"><a>Opción 3</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Seguridad</a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li class="dropdown-item" href="#"><a>Vulneraibilidades</a></li> <li class="dropdown-item" href="#"><a>Botargas</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Amenazas</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1"> <li class="dropdown-item" href="#"><a>Amenaza 1</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Amenaza 2</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1-1"> <li class="dropdown-item" href="#"><a>Opcioón 1</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> <form class="form-inline mt-2 mt-md-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </div> <main role="main" class="container"> <div class="jumbotron text-center"> <h1>Sección de tickets</h1> <p class="lead text-info">Something else.</p> </div> </main>

.navbar .dropdown-toggle, .navbar .dropdown-menu a { cursor: pointer; } .navbar .dropdown-item.active, .navbar .dropdown-item:active { color: inherit; text-decoration: none; background-color: inherit; } .navbar .dropdown-item:focus, .navbar .dropdown-item:hover { color: #16181b; text-decoration: none; background-color: #f8f9fa; } @media (min-width: 767px) { .navbar .dropdown-toggle:not(.nav-link)::after { display: inline-block; width: 0; height: 0; margin-left: .5em; vertical-align: 0; border-bottom: .3em solid transparent; border-top: .3em solid transparent; border-left: .3em solid; } }

$(document).ready(function () { $('.navbar .dropdown-item').on('click', function (e) { var $el = $(this).children('.dropdown-toggle'); var $parent = $el.offsetParent(".dropdown-menu"); $(this).parent("li").toggleClass('open'); if (!$parent.parent().hasClass('navbar-nav')) { if ($parent.hasClass('show')) { $parent.removeClass('show'); $el.next().removeClass('show'); $el.next().css({"top": -999, "left": -999}); } else { $parent.parent().find('.show').removeClass('show'); $parent.addClass('show'); $el.next().addClass('show'); $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4}); } e.preventDefault(); e.stopPropagation(); } }); $('.navbar .dropdown').on('hidden.bs.dropdown', function () { $(this).find('li.dropdown').removeClass('show open'); $(this).find('ul.dropdown-menu').removeClass('show open'); }); });