Extreme Design
Olá caro visitante da Extreme Design, bem-vindo ao seu fórum de design, cadastre-se ou efetue o login de sua conta e desfrute de todas as exclusividades especiais de membros do fórum.

Att. Administração & Moderação Extreme Design

Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

JhowRiosWeb

avatar
Administrador
Administrador
Vou só passar o código para ficar rápido e não tanto cansativo, já as duvidas e perguntas responderei, basta comentar no tópico.

Código do CSS:

Código:
#menu-horizontal {
position:relative;
background: url('http://4.bp.blogspot.com/-28M1OWdZN8c/UOa5JYpwZAI/AAAAAAAACJA/PIXIRiyBihs/s1600/menuhorizontal.jpg') no-repeat center top;
width:950px;
height:43px;
margin-top:0px;
}
#menu-horizontal ul {
padding:7px;
margin:0px;
float: left;
width: 100%;
list-style:none;
}
#menu-horizontal ul li {
display: inline;
}
#menu-horizontal li {
display: inline;
list-style: none;
}
#menu-horizontal ul li a {
background: #2a2a2a;
box-shadow: #000000 0px 0px 5px;
height: 35px;
color:#eeeeee;
font-size:16px;
padding-top:5px;
padding: 8px 5px;
text-decoration:none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#menu-horizontal ul li a:hover {
background:#434343;
padding-top:10px;
font-size:16px;
padding: 15px 10px;
opacity:0.7;
color:#eeeeee;
text-decoration:none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#menu-horizontal ul li a:active {
background:#434343;
padding-top:10px;
font-size:16px;
padding: 15px 10px;
opacity:0.7;
color:#eeeeee;
text-decoration:none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}

Código do HTML:

Código:
<nav id='menu-horizontal'>
<ul>
<li><a href='/'>home</a></li>
<li><a href='#'>parceria</a></li>
<li><a href='#'>contato</a></li>
<li><a href='#'>equipe</a></li>
</ul>
</nav>

Demonstração: csprojectbrasil.blogspot.com

Obs: eu usei HTML5 e CSS3 para fazer os códigos.


_________________

__________________________________________

[Você precisa estar registrado e conectado para ver esta imagem.]
But you asked me to love you and I did
Traded my emotions for a contract to commit
And when I got away, I only got so far
The other me is dead
I hear his voice inside my head
Ver perfil do usuário http://extremedesign.forumeiro.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum