31/12/2012

Menu "Tracks"

20º tutorial do desafio!

Oie!

Preparado
s para o reveillon?

Bom,hoje eu vou en
sinar a como colocar um menu super bonitinho,que vai com a página e tal...

Clique em Leia Mai
s para aprender!

1º-No htm de ctrl+f  e procure por:
</head>

Abaixo cole:

<style type='text/css'>

ul#nav li {float: left; list-style: none; align: center;}

ul#nav li a{display: block; width: 110px; height: 90px; padding: 20px 0 0 0; margin-right: 30px; margin-left: 5px; font: bold 17px &#39;Audiowide&#39;; text-transform: uppercase; color: #fff !important; text-shadow: 0 1px 3px #636161; text-decoration: none; background: url(LINK DA SUA FAIXINHA) 0 -149px no-repeat; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;}

ul#nav li a:hover { background: url(LINK DA SUA FAIXINHA) 0 0 no-repeat;color: #eee9d9; text-shadow: 0 2px 3px #4c2222; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;}

ul#nav li a.js:hover {background: url(LINK DA SUA FAIXINHA) 0 -149px no-repeat; -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;}


</style>
ul#nav { width: 1500px; margin: 0 auto; text-align: center !important; overflow: hidden;}

Mude como quer e troque pelo o url da faixa que desce.

Agora procure por:

</header>

E abaixo cole cole:

<div style='top: 0px; height: 30px; width: 100%; z-index: 4; background: #b7e2f8; position: fixed; left: 0px; text-align: center; '>

<div style='position: absolute; top: -15px; width: 900px; text-align: center !important; float: center !important; '>
 <ul id='nav'>
        <li><a href='link1.blogspot.com'>Link1</a></li>
<li><a href='link2.blogspot.com'>Link2</a></li>
<li><a href='link3.blogspot.com'>Link3</a></li>
<li><a href='link4.blogspot.com'>Link4</a></li>
<li><a href='link5.blogspot.com'>Link5</a></li>
<li><a href='link6.blogspot.com'>Link6</a></li>
<li><a href='link7.blogspot.com'>Link7</a></li>
<li><a href='creditos.blogspot.com'>Créditos</a></li>
</ul>
</div> </div>

Mude pelo url,link...

BJO!

Crédito:kawaii world

Nenhum comentário:

Postar um comentário