Criando Menu-Dropdown

[_kinght_]

Olá meu povo hoje eu vim trazer aqui para vocês algo simples porém pouca gente sabe fazer que é o menu com dropdown com apenas html e css.

codigo html:


<div id='cssmenu'>
<ul>
<!-- INICIO MENU - 01 -->
<li class='active'><a href='index.html'><span>Home</span></a></li>

<!-- INICIO MENU - 02 COM DROP-DOWN -->
<li class='has-sub'><a href='#'><span>Products</span></a>

<!-- INICIO MENU DO DROP-DOWN -->
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<!-- INICIO MENU COM DROP-DOWN COM SUB-ITEM -->
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
<!-- FIM MENU COM DROP-DOWN COM SUB-ITEM -->
</li>
</ul>

</li>
<!-- FIM MENU - 02 COM DROP-DOWN -->
</ul>
<!-- FIM DO MENU -->
</div>

Bom explicando o código acima, bom o esquema é o seguinte!

Foi criado uma lista não ordenada normal "<ul> </ul>" para criar os itens do menu e dentro dele itens de lista "<li> </li>"

​Para adicionar sub-itens a um item do menu basta incluir o código abaixo


<!-- INICIO MENU DO DROP-DOWN -->
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<!-- INICIO MENU COM DROP-DOWN COM SUB-ITEM -->
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
<!-- FIM MENU COM DROP-DOWN COM SUB-ITEM -->
</li>
</ul>

E assim sucessivamente, fazendo da mesma forma para mais sub-itens  e para adicionar apenas um item de menu basta colocar o código abaixo.


<!-- INICIO MENU - 01 -->
<li class='active'><a href='index.html'><span>Home</span></a></li> 
Bom agora vamos para o CSS o código é grande e por isso não vou explicar vou apenas destacar nos pontos das cores para facilitar a troca.


#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
border: 0;
line-height: 1;
box-sizing: content-box;
}
#cssmenu {
height: 49px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;

/* COR DE FUNDO DO MENU - COM GRADIENTE */
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0));
background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: linear-gradient(top, #fefefe 0%, #eee9f0 100%);

/* COR DA BORDA */
border-bottom: 2px solid #db000b;
width: auto;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
/* COR DE FUNDO DO LINK */
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));
background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: linear-gradient(top, #fefefe 0%, #ececec 100%);
color: #000;

display: inline-block;

/* TIPO DA FONTE*/
font-family: Helvetica, Arial, Verdana, sans-serif;

/* TAMANHO DA FONTE */
font-size: 12px;

line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li > a {
/* COR DA FONTE DO MENU PRINCIPAL */
color: #000;
font-size: 12px;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;

/* COR DA SETINHA */
border-bottom: 10px solid #db000b;
;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li.active:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;

/* COR DA SETINHA NA CLASS .active */
border-bottom: 10px solid #db000b;
;
}
#cssmenu > ul > li.active > a {
-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);

/* COR DE FUNDO DO BOTÃO COM A CLASS .active */
background: #ececec;
background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
}
#cssmenu > ul > li:hover > a {

/* COR DE FUNDO DO MENU PRINCIPALME AO PASSAR O MOUSE */
background: #ececec;
background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
/* COR DE FUNDO DO SUB-MENU*/
background: #db000b;
border-bottom: 1px dotted #ff0f1b;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;

/* COR DA FONTE DOS SUB-MENUS*/
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
/* COR DO FUNDO DO SUB-MENU AO PASSAR O MOUSE */
background: #a80008;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
/* COR DE FUNDO DO MENU DENTRO DO SUB-MENU */
background: #db000b;
border-bottom: 1px dotted #ff0f1b;
}
#cssmenu .has-sub .has-sub ul li a:hover {
/* COR DE FUNDO DO MENU DENTRO DO SUB-MENU AO PASSAR O MOUSE */
background: #8f0007;
}


 O menu irá ficar dessa forma, só que na imagem á mais itens de menu do que no exemplo acima.

Para quem quiser estarei disponibilizando os arquivos para facilitar porém não estão comentados porque comentei apenas no tópico não nos arquivos.

Download ->

Por favor, Entrar ou Registrar para ver o conteúdo das URLs!

Bom é isso pessoal espero que gostem, valeu e até a próxima!

Créditos: _kinght_

 

[abne]

gostei

 

[CroSS_ADM]

Bacana!! o utilizarei no template que estou desenvolvendo e tenha certeza de que seus créditos estarão nela!

 

[hip13]

Legal, gostei irei estudar tudo isso e praticar