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]