WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e de sites

Como criar um menu para sites responsivos e sites mobile

Publicidade

Como criar um menu de 2 níveis para ser usado em sites responsivos ou mobile com css

Hoje vamos criar um menu para ser usado em sites responsivos ou mobiles, utilizando css, e apenas um Script bem simples.

Apesar do nosso exemplo ter apenas 2 níveis você pode adaptar de acordo com a sua necessidade

Veja abaixo o código abaixo:

<script type="text/javascript"> $().ready(function() {$('.topo i').click(function(){if ($('#container').hasClass('menu-on')){$('#container').removeClass('menu-on')} else {$('#container').addClass('menu-on')}});}); </script><style type="text/css">/*reset*/html, body{ padding:0; margin:0; overflow-x: hidden;}.topo{ width:100%; position:relative;} /*Essa aqui é a div que tem que ter a posição relativa para o seu menu*/.topo strong{ display:none;}#container{ width:100%; padding:0; transition:all 0.2s linear; }/*Essa aqui é a div que vai andar quando o menu for ativado */#container.menu-on{ padding:0 0 0 260px;}/*Configurações Padrões*/ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none;}ul.menu ul{ position:absolute; display:none; box-shadow:3px 3px 2px #333;}/* Configurações nivel 1*/ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; border-radius:5px; padding:0 5px;}.menu li{ float:left; width:auto; position:relative;}.menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; transition:all 0.1s linear; }/* Configurações nivel 2*/.menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:5px; width:200px; border-radius:0 0 5px 5px;   }.menu ul.submenu-1 a{  width:160px; padding:0 20px; border-radius:5px;  }/*Configurações de cores*//*nivel 1*/.menu{background:#CCC; }.menu a{ color:#000;}.menu li:hover > a{ background:#999;  color:#fff;}/*nivel 2*/.submenu-1{ background:#999;}.submenu-1 a{color:#fff;}.submenu-1 li:hover > a{ background:#666; }@media only screen and (max-width:555px){/*Configuração do nivel responsivo*/.topo strong{ display:block; background:#CCC; float:left; padding:15px 15px 14px; font-family:Verdana, Geneva, sans-serif; font-size:15px; margin:0 0 0 15px; }ul.menu{ width:260px; border-radius:0; padding:0; position:absolute; top:0; left:-260px;}.menu li{ width:100%; border-bottom: 1px solid;}.menu li a{ width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; border-radius:0;}.menu li:hover > a{ background:none;}ul.menu ul, .menu li:hover > ul.submenu-1{ display:block; position:relative; float:left; top:auto; left:auto; box-shadow:none; width:100%; padding:0;  box-sizing:border-box; -webkit-box-sizing:border-box; background:none; padding:0 0 20px 20px; }.menu ul.submenu-1 li{ border:none;}.menu ul.submenu-1 a{width:100%; border-left:1px solid #000; border-radius:0;}/*--Botão do Menu--*/.topo i{cursor:pointer; display:block; width:20px; height:47px; float:left; padding:0 15px;}.topo i b{margin-top: 20px;}.topo i b, .topo i b:before, .topo i b:after{cursor:pointer; height:4px; width:20px; position: absolute; display: block; content: '';  -webkit-transition: all 500ms cubic-bezier(0.615, 0.25, 0.505, 1.47); transition: all 500ms cubic-bezier(0.615, 0.25, 0.505, 1.47);}.topo i b:before{ top: -6px;}.topo i b:after{bottom: -6px;}  /*Configuração do botão do menu ativo*/.menu-on .topo i b{background-color: transparent;}.menu-on .topo i b:before, .menu-on .topo i b:after{top: 0;}.menu-on .topo i b:before{ -webkit-transform: rotate(45deg) scale(1.2); -ms-transform: rotate(45deg) scale(1.2); transform: rotate(45deg) scale(1.2);}.menu-on .topo i b:after{-webkit-transform: rotate(-45deg) scale(1.2); -ms-transform: rotate(-45deg) scale(1.2); transform: rotate(-45deg) scale(1.2);}/*========= Configuração de Cores ==============================*//*Configura de cores do menu responsivo*/.menu{background:#CCC; }.menu li{border-color: #000; }.menu li a, .menu li:hover > a{ color:#000;}.menu ul.submenu-1 a{ border-color: #000; color:#000}/*Cor do botão do menu*/.topo i{ background:#CCC;}.topo i b, .topo i b:before, .topo i b:after{ background:#333}}</style><div id="container"><div class="topo"><i><b></b><strong>Menu</strong></i><ul class="menu"> <li><a href="#">Menu 1</a></li>    <li><a href="#">Menu 2</a></li>    <li><a href="#">Menu 3</a>        <ul class="submenu-1">         <li><a href="#">Submenu 1</a></li>            <li><a href="#">Submenu 2</a></li>        <li><a href="#">Submenu 3</a></li>        </ul>        </li>    <li><a href="#">Menu 4</a></li>    <li><a href="#">Menu 5</a></li></ul></div></div>

No código acima o script tem a função de adicionar uma classe apenas mas você precisa estar chamando o Jquery (já está incluso a ultima versão no download abaixo) para essa comando funcionar.

Ao utilizar no seu site você deve substituir a "#container" pelo elemento que está segurando todos blocos do seu site.

No caso você estiver desenvolvendo um site mobile é utilizar parte responsiva do CSS.

Clique aqui e veja o menu funcionando ou faça o download

Publicidade
Postado por: Danilo Luna
Arte e Desenvolvimento  

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]