"Menu duplo0.1"
Bootstrap 3.3.0 Snippet by ViniDCS

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <body class="home"> <div class="header"> <nav class="navbar"> <div class="container"> <div class="header-block clearfix"> <!-- Marca a alternância se agrupando para melhor visualização, em dispositivo móvel --> <div class="menu-superior"> <ul class="nav nav-pills click_up"> <li><a class="navbar-brand" href="#">Brand</a><span class="in_line_menu">|</span></li> <li style="float:right"><a href="#">Entrar</a></li> <li style="float:right"><a href="#">Registe-se</a></li> </ul> </div><!--/.menu-superior--> <div class="menu-inferior"> <ul class="nav nav-pills click_down"> <li style="float:left"><a href="#">Início</a></li> <li style="float:left"><a href="#">Fluxo de Trabalho</a></li> <li style="float:left"><a href="#">Configuração</a></li> </ul> </div><!--/.menu-inferior--> </div> </div> </nav> </div> <p style="padding: 0 0 0 15px;"><b>Class= main dentro do CSS,<br>Apenas para colocar um<br>espaço entre o Menu<br>superior e o conteúdo.</b></p> <div class="main"> <div class="container"> <div class="box1"> <h1 style="text-align: center;"><b>Conteúdo</b></h1> </div><!--/.box1--> </div> </div><!--/.main--> </body>
body { background: #27ccf7; } div { display: block; } /* -- Cabeçalho e Rodapé --*/ .header, .footer { height: 1px; } /* -- *main, apenas para colocar um espaço entre o Menu superior e o conteúdo --*/ .main { margin-top: 55px; } /* -- Identidade --*/ .navbar-brand{ width: 250px; padding-left: 50%; padding-right: 50%; } /* -- Barra de navegação --*/ .navbar { z-index: 2; min-height: 50px; background: rgba(0, 63, 79, 0.1); border: none; border-radius: 0; margin: 0; padding: 20px 20px; /*pointer-events: none;*/ position: relative; } .menu-superior { background-color: #87311f; } .menu-inferior { border-top: 5px solid #ed8441; background: #d3a368; } /**/ ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li a { display: block; text-align: center; padding: 14px 16px; text-decoration: none; } .click_up li a { color: white; } .click_down li a { color: #87311f; } li a:hover:not(.active) { background-color: #111; } .click_up li a:hover:not(.active) { background: #d3a368; color: white; } .click_down li a:hover:not(.active) { background: #87311f; color: white; } /* -- Conteudo -- */ .in_line_menu { font-size: 30px; } .box1 { padding-top: 10px; height: 400px; background: #e7e7e7; }

Related: See More

Vuetify Material Dashboard
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments:

Fala pessoal, como eu deixaria esse menu responsivo com todos os itens dentro do menu hamburguer?

José Leonardo Jesus () - 7 years ago - Reply 0