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]