20/12/2012

Menu no Topo: Simples [002]


Yo amores, como vão? Continuando a maratona de tutoriais, achei esse menu bem legal no site chamado Vagabundia, espero que gostem ele é bem simples mas se arrumar fica muito lindo! Deixei ele sem cor alguma para facilitar vocês arrumarem.


1. Primeiramente vá ate seu HTML e procure por </head> assim que achar abaixo dele cole esse código:

Códigos
<div class='bar_top'>
<div class='bar_topd'>
<ul class='menu_barrax'>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
<li><a href='Link' title='Texto do tooltip'>Nome</a></li>
</ul></div></div>

2.  Agora ainda dentro do HTML procure por ]]></b:skin> e acima dele cole esse código:

Códigos
.bar_top {
width: 100%;
height: 31px;
background: #CORDABARRINHA;
Border-bottom: 10px none #F4D998;
}
.menu_barrax {
float: center;
margin: 0;
padding: 0;
}
.menu_barrax li {
float: left;
list-style: none;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial;
text-transform: uppercase;
border-right: 4px none #dddddd;
margin: 0 0 0 10px;
padding: 9px 0px 0px 0px;
text-shadow:0 1px #CORDASOMBRA;
}
.menu_barrax li a{
background: #CORDOFUNDODOMENU;
padding: 10px;
color: #CORDAFONTE;
text-decoration: none;
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.menu_barrax li a:hover {
text-decoration: none;
color: #CORDAFONTEHOVER;
background: #CORDOFUNDODOMENUHOVER;
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
text-shadow:0 1px #CORDASOMBRAHOVER;
}
.transit {
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.bar_topd {
width: 900px;
margin: 0 auto;
}

Arrume as partes indicativas como desejar e é só salvar!

Nenhum comentário:

Postar um comentário

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345