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.
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>
<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>
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;
}
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