Menu Mark
Fiz um menu pra vocês, ele é bem legal no hover e eu coloquei uma fonte e um transition e ficou bonitinho, visualize ele aqui. É fácil colocar ele.
Coloque esse código abaixo antes de </style> e edite as cores
.mark {position:relative;} .mark {font-size:30px; display:block; font-weight:normal; font-style:normal;} .mark a {display:block; width:120px; height:30px; line-height:30px; text-shadow: 1px 1px 2px rgba(89,22,20,0.3); color: #fff; letter-spacing: 1px; margin:5px; font-family:'Lobster Two'; font-style:normal; font-weight:normal; display:inline; -webkit-transform: skew(-12deg); -moz-transform: skew(-12deg); -o-transform: skew(-12deg); -ms-transform: skew(-12deg); transform: skew(-12deg); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;} .mark:hover a {color: transparent; text-shadow: 0px 0px 10px #fff; -webkit-transform: skew(0deg); -moz-transform: skew(0deg); -o-transform: skew(0deg); -ms-transform: skew(0deg); transform: skew(0deg);} .mark a:hover {text-shadow: 1px 1px 10px #ccc; color:#f8f8ff;}
Depois de ter editado as cores, você vai colocar esse código antes de </head>
<link href='http://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
Agora, por último aonde quer que apareça o menu coloque esse código:
<div class="mark">
<a href="/">Home</a>
<a onClick="changeNavigation('ask')>Ask</a>
<a onClick="changeNavigation('themes')>Themes</a>
<a onClick="changeNavigation('tutoriais')>Tutoriais</a>
<a onClick="changeNavigation('materiais')>Materiais</a>
<a onClick="changeNavigation('extras')>Extras</a> <a href="http://tumblr.com/dashboard">Saída</a>
</div>
Bom, é isso, espero que gostem e, se usar credite! <3
- Gustavo
