.png)
Olá meus amores!
Falta pouco para minhas férias, não vejo a hora de chegar sexta-feira para eu poder descansar (de verdade). Ainda bem que estou saindo cedo, pelo menos chego em casa bem mais cedo que o normal e fico no PC fazendo nada. rsrs'
O tutorial de hoje é de um menu que me deu bastante trabalho. Acontece que queria fazer um preview, mas não achei nenhum site que hospeda arquivos HTML com link direto (se alguém souber, me avise). Coloquei no meu blog de testes, mas as listas estão personalizadas por lá e o tutorial acabou todo bugado. Acabei criando um blog apenas para servir de preview desse Menu. Ossos do oficio, não?
O menu de hoje é um menu drop drown, isso significa que quando você passa o mouse em um link, outros abrem por baixo. Esse menu é um pouco diferente e bem útil para quem tem bastante páginas. Quando você passa o mouse no link que abre, outros links abrem. Bom, é melhor ver o preview para entender.
1- Procure no seu HTML por ]]></b:skin>. ACIMA, cole:
#menujohanes{
width: 100%; /* largua do menu */
margin: auto; /* posição do menu */
background: #de90b3; /* cor de fundo do menu */
height: 49px; /*altura do menu*/
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border: 1px solid #a770b7;
text-transform: uppercase; /* transformação do texto */
box-shadow: 0px 3px 0px rgba(0,0,0,0.2);
z-index: 99;}
#menujohanes ul{
list-style-type: none;
z-index: 9;
width: 1000px; /* largura do menu */
margin: auto;}
#menujohanes ul li{
float: left;
position: relative;
padding: 15px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
#menujohanes ul li:hover{
background:#a770b7; /* cor de fundo quando passa o mouse */
box-shadow: 0px 3px 0px rgba(0,0,0,0.2);}
#menujohanes ul li a:hover {
color:#fafafa;} /* cor do texto quando passa o mouse */
#menujohanes ul li a{
color: #fff; /* cor do texto */
padding: 0 10px;
line-height:25px;
font-size:11px; /* tamanho do texto */
display:block;
text-decoration:none;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-shadow: 0px 2px 0px rgba(0,0,0,0.1);}
#menujohanes ul li ul li{float: none;position: relative;}
#menujohanes ul li ul{
position: absolute;
top:49px;
left:0;
display: none;
box-shadow: inset 0 4px 3px rgba(0, 0, 0, 0.3), 0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);
width:150px;
border-radius: 0px 0px 5px 5px;
background: #de90b3;} /* cor de fundo do menu dropdrown */
#menujohanes ul li:hover > ul{display: block;}
#menujohanes ul li ul li a{line-height:25px;}
#menujohanes ul li ul li ul{
position: absolute;
top:0; left:150px;
display: none;
box-shadow:0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);
border-radius:5px;
width:150px;
background: #de90b3;} /* cor do fundo do submenu */
#menujohanes ul li.selected{color: #000;border-left: 1px solid #ddd;border-right: 1px solid #ddd;}
Esse é o CSS do seu menu. Altere de acordo com seu gosto.
2-Em um Gadget de HTML/JavaScript, cole (o menu pode ser colado entre <body>...</body>, mas colar em um Gadget é mais fácil):
<div id="menujohanes">
<ul>
<li class='selected'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href="#">Goodies</a>
<ul>
<li><a href="#">Avatares</a>
<ul>
<li><a href="#">Coreanas</a></li>
<li><a href="#">Animais</a></li>
<li><a href="#">Outros</a></li>
</ul>
</li>
<li><a href="#">Ilustração</a>
<ul>
<li><a href="#">Coreanas</a></li>
<li><a href="#">Animais</a></li>
<li><a href="#">Outros</a></li>
</ul>
</li>
<li><a href="#">Afiliados</a>
<ul>
<li><a href="#">50x50</a></li>
<li><a href="#">70x70</a></li>
<li><a href="#">30x30</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contato</a>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">Google plus</a></li>
</ul>
</li>
<li><a href="#">Múltiplos submenus</a>
<ul>
<li><a href="#">Submenu 1</a>
<ul>
<li><a href="#">Submenu 2</a>
<ul>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a href="#">Submenu 6</a></li>
<li><a href="#">Submenu 7</a></li>
</ul>
</li>
<li><a href="#">F.A.Q</a></li>
<li><a href="#">Email</a></li>
</ul></div>
</div>
Edite os links e seu menu está pronto!
Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar
Adorei o menu!!!
ResponderExcluiro blog ta lindo, continuo acompanhando ta? Mas eu cancelei afiliações la no blog, porque o assunto é mais profissional, obrigada pela oportunidade, espero que continue acompanhando o meu também, beijos!!!
http://fadasemdevaneiios.blogspot.com.br/ (antigo Menina Sapeca)
Obrigada por avisar sobre a afiliação, minha elite só me traz problemas e.e
ExcluirQue menu fofo. Já usei ele em outro layout meu *¬*
ResponderExcluirhttp://the-kawaiis.blogspot.com.br/
Poxa, que legal ^^
ExcluirFérias o/
ResponderExcluirO menu é bem útil ^^
Kawaii Land
É sim ^^
ExcluirFERIAS *O*
ResponderExcluirQue menu legal *-*
É sim *o*
ExcluirVou usar n meu próximo lay ! Adorei !!
ResponderExcluirUsando no lay aqui! *-*http://vihpaula.blogspot.com.br/
ResponderExcluir