Mega Menu Drop Down

asian fashion, cute, girl, korean

Olá amores tudo bem? Hoje vou ensinar este tutorial que eu já usei aqui no blog, que é um menu Drop Down, porém ele é mais cheio de opções, com imagens e até feed, que deixa o blog mais profissional. Clique em Leia Mais e confira este tutorial!


O menu que vou ensinar é este aí abaixo, do blog Mundo Informal (clique aqui e visite), vejam o menu abaixo:


Ok? Vamos começar? Então vamos lá gente!

Vá em Modelo > Editar HTML e cole acima de: ]]> </ b:skin>

Certo? Então acima desta tag, vamos colar o código de estilo do menu, ou seja, as cores, os modelos etc. Edite o código abaixo como quiser:


ul.dropmenu{ position: relative; margin: 0px; padding: 1px 0px 0px 0px; background:transparent url(http://1.bp.blogspot.com/-QlNjAxBB9YE/UGck33rIUgI/AAAAAAAAFsM/EnZ0AsEggjc/s1600/navigation.png) repeat-x scroll 0 0; display:block; height: 35px; font-family:Verdana,Arial,Helvetica,sans-serif; font-size: 12px; } .dropmenu li{ position: relative; list-style: none; float: left; margin: 0px; padding: 0px; } .dropmenu li a{ height: 22px; padding: 9px 30px 0px 15px; display: block; cursor: point; border-right: solid 1px #4a779d; color: #FFFFFF; text-transform: uppercase; text-decoration: none; } .dropmenu li span{ display: block; float: right; height: 10px; width: 10px; background:transparent url(http://1.bp.blogspot.com/-0mKMqQrHeUo/UGck1O8Ip6I/AAAAAAAAFr4/KUFcGh_ZnRs/s1600/arrow_up.png) repeat-x scroll 0 0; position: absolute; top: 12px; right: 10px; } .dropmenu li a:hover span{ background:transparent url(http://1.bp.blogspot.com/-Em6wULHcShc/UGck0F2pikI/AAAAAAAAFr0/5ASpk3CSJRI/s1600/arrow_hover.png) repeat-x scroll 0 0; } .dropmenu li:hover ul, .dropmenu li:hover div{ display: block; } .dropmenu ul{ position: absolute; display: none; width: 140px; padding: 0px; margin: 0px; border-bottom: 1px solid #ccc; background: #FFFFFF url(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0; } .dropmenu ul li{ border: 0; float: none; } .dropmenu ul a { border: 1px solid #ccc; border-bottom: 0; white-space: nowrap; display:block; color: #0657AD; text-decoration: underline; text-transform: none; } a.selected, a:hover{ color: #0657AD !important; background: #FFFFFF url(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0; } a.selected span{ background:transparent url(http://1.bp.blogspot.com/-Em6wULHcShc/UGck0F2pikI/AAAAAAAAFr0/5ASpk3CSJRI/s1600/arrow_hover.png) repeat-x scroll 0 0; } .dropmenu ul a:hover { color:#F67A00 !important; text-decoration: none; background-color: #F0F0F0; background-image: none; } .dropmenu div ul{ position: relative; display: block; } .dropmenu li div{ background: #FFFFFF url(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0; border: 1px solid #ccc; padding: 5px; display: none; position: absolute; } .dropmenu li div ul{ border: none; background: none; position: relative !important; } .dropmenu li div a{ border: none; border-bottom: 1px solid #ccc; } .dropmenu li div div{ display: block; position: relative; background: none; border: none; } .dropmenu li div div a{ display: inline; border: none; color: #666; text-decoration: underline; padding: 0px; margin: 0px; text-transform: none; } .dropmenu li div div a:hover{ color: #000; text-decoration: none; } ul.left{ float: left; width: 145px; } ul.right{ float: right; width: 145px; } .small{ color: #666; font-size: 10px; padding: 10px 5px 8px 5px !important; display: block; clear: both; } .products{ width: 300px; padding: 15px !important; } .products ul{ width: 100%; } .products ul li{ border-bottom: 1px solid #ccc; height: 40px; padding: 10px 0px; } .products h2{ font-size: 16px; padding: 2px 0px 3px 0px; margin: 0px; } .products p{ color: #666; font-size: 10px; padding: 0px; margin: 0px; } .products img{ float: left; padding-right: 10px; } .products ul li a{ display: inline; border: none; color: #666; text-decoration: underline; padding: 0px; margin: 0px; text-transform: none; } .products ul li a:hover{ color: #000 !important; text-decoration: none; background: none !important; } .tutorials{ width: 300px; } input{ border:1px solid #4A779D; padding: 3px 8px; margin-bottom: 8px; width: 164px; } label{ padding: 0px 0px 4px 0px; display:block; } button{ background: #4A779D url(http://1.bp.blogspot.com/-QlNjAxBB9YE/UGck33rIUgI/AAAAAAAAFsM/EnZ0AsEggjc/s1600/navigation.png) repeat-x scroll 0 0; color: #FFF; border:1px solid #4A779D; padding: 4px 10px; width: 180px; } .emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;} .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 160px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}


Salve. Agora, cole o Script do menu acima de </head>:


<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/dropdown.js"></script>
<script>
$(document).ready(function(){
 $("#nav-one").dropmenu();
});
</script>
Salve. Agora vamos colocar o menu. Cole abaixo desta linha, o código a seguir:

 A Linha: <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>

O código:


<ul id="nav-one" class="dropmenu">
<li>
    <a href="Link_aqui">Home</a> </li>
<li>
    <a href="Link_aqui">Forum</a><ul>
<li><a href="Link_aqui">Support</a></li>
<li><a href="Link_aqui">Help</a></li>
<li><a href="Link_aqui">Examples</a></li>
<li><a href="Link_aqui">Your work</a></li>
</ul>
</li>
<li>
    <a href="Link_aqui">Downloads</a><ul>
<li><a href="Link_aqui">Tools</a></li>
<li><a href="Link_aqui">Office</a></li>
<li><a href="Link_aqui">Custom projects</a></li>
</ul>
</li>
<li>
 <a href="Link_aqui">Products</a>
 <div class="products">
<ul>
<li><img src="Imagem_Aqui" width="40" height="40" alt="Thumb" border="0" />
<h2>Titulo Aqui</h2>
<p>
<a href="Link_aqui">Texto Aqui</a></p>
</li>

<li><img src="Imagem_Aqui" width="40" height="40" alt="Thumb" border="0" />
<h2>Titulo Aqui</h2>
<p>
<a href="Link_aqui">Texto Aqui</a></p>
</li>

<li><img src="Imagem_Aqui" width="40" height="40" alt="Thumb" border="0" />
<h2>Titulo Aqui</h2>
<p>
<a href="Link_aqui">Texto Aqui</a></p>
</li>

<li><img src="Imagem_Aqui" width="40" height="40" alt="Thumb" border="0" />
<h2>Titulo Aqui</h2>
<p>
<a href="Link_aqui">Texto Aqui</a></p></li>
</ul>

<div class="small">
Aqui fica o texto que fica logo abaixo da área "Products".
</div>
</div>
</li>

<li><a href="Link_aqui">Tutorials</a>
 <div class="tutorials">
 <ul class="left">
<li><a href="Link_aqui">Javascript</a></li>
<li><a href="Link_aqui">Python</a></li>
<li><a href="Link_aqui">PHP</a></li>
</ul>

<ul class="right">
<li><a href="Link_aqui">HTML/CSS</a></li>
<li><a href="Link_aqui">ASP.NET</a></li>
<li><a href="Link_aqui">Actionscript</a></li>
</ul>

<div class="small">
Texto <a href="Link_aqui">aqui</a> e mais um <a href="#">link aqui</a>.</div>
</div>
</li>

<li><a href="Link_aqui">Links</a><ul>
<li><a href="Link_aqui">Programming</a></li>
<li><a href="Link_aqui">Inspiration</a></li>
<li><a href="Link_aqui">My websites</a></li>
<li><a href="Link_aqui">Clients</a></li>
<li><a href="Link_aqui">Cool stuff</a></li>
<li><a href="Link_aqui">Sitebase</a></li>
<li><a href="Link_aqui">Other</a></li>
</ul>
</li>

<li><a href="#">Subscribe Now</a><ul>
 <div class="emailsub">
 <div class="emailupdatesform">
 <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=UPRISINGTEEN', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="emailupdatesinput" name="email" value="Escreva seu email..." onblur="if (this.value == '') {this.value = 'Escreva seu email...';}" onfocus="if (this.value == 'Escreva seu email...') {this.value = '';}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Assinar" class="joinemailupdates" type="submit" /></form>
</div>
</div>
</ul></li>
</ul>


Onde está demarcado você deve entrar neste site aqui FeedBurner, acesse, e ao lado do link do seu blog, tem uma imagem de feed igual a essa: .

Vai abrir a página do feed do link do seu blog. No URL, você recorta só a parte final. Veja o exemplo:

http://feeds.feedburner.com/UprisingTeen/Official-ModaMakeMsicaEMuitoMais

E cola onde está indicando no código do menu. Faça a alteração dos links e pronto! É só salvar e visualizar. 

Veja o Demo deste menu no botão abaixo:



Espero que tenham gostado, mais uma vez, os créditos ao blog do Mundo Informal. Espero que tenham curtido ^^ Até mais!