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 horizontal Drop Down com 4 até niveis utilizando CSS.

Publicidade

Hoje Iremos ver como criar um menu horizontal drop down de maneira simples e bem rápida utilizando apenas CSS.

Mas o que vem a ser um menu Drop Down?

Quando possuimos uma grande quantidades de páginas e precisamos que estas apareçam no nosso menu, se não pensarmos na navegação e organização, podemos atrapalhar e confundir o usuário do site.

Pra isso vamos agrupar as páginas fazendo com que em uma linha tenha as páginas mais importantes, e conforme passamos o mouse nos links novos menus vão se abrindo


Veja abaixo o exemplo:

Nesse temos um menu de 2 Niveis, ou seja temos o nivel principal ou primeiro nivel que é o que está visivel, e o segundo nível ou primeiro drop down, é o que aparece quando passamos o mouse em cima de um link do menu principal.

O próximo exemplo mostra que podemos utilizar quantos subniveis precisarmos (mesmo sendo um exemplo de 4 níveis).

Para acrescentarmos mais niveis é sempre o mesmo procedimento, só acrescentarmos mais um conjunto de ul com uma classe especifica e repetir as configurações de css.

Veja abaixo o código ou clique aqui e faça o download.

<style type="text/css">

/*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 nivel 2*/
.menu li:hover > ul.submenu-2{ display:block; top:0; left:195px; padding:5px; width:200px;  border-radius: 0 5px 5px 5px; }
.menu ul.submenu-2 a{  width:160px; padding:0 20px; border-radius:5px; }

/* Configurações nivel 3*/
.menu li:hover > ul.submenu-3{ display:block; top:0; left:195px; padding:5px; width:200px;  border-radius: 0 5px 5px 5px; }
.menu ul.submenu-3 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; }

/*nivel 3*/
.submenu-2{ background:#666;}
.submenu-2 a{color:#fff;}
.submenu-2 li:hover > a{ background:#333; }

/*nivel 3*/
.submenu-3{ background:#333;}
.submenu-3 a{color:#fff;}
.submenu-3 li:hover > a{ background:#000; }


</style>




<ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal -->
	<li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
    	<ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->
        	<li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
        	<li><a href="#">Submenu 3</a>
            	 	<ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down -->
      				  	<li><a href="#">Submenu 4</a></li>
  				        <li><a href="#">Submenu 5</a></li>
			        	<li><a href="#">Submenu 6</a>
                        			<ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down -->
      				  						<li><a href="#">Submenu 7</a></li>
					  				        <li><a href="#">Submenu 8</a></li>
			        						<li><a href="#">Submenu 9</a></li>
			        				</ul>
                        </li>
			        </ul>
             </li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>

</ul>
Publicidade
Postado por: Danilo Luna
Arte e Desenvolvimento  

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]