Gadget: Menu desplegable Sexy Dropdown Jquery

el

Para los que usan plantillas del diseñador de plantilla primero deben hacer lo que dice en la siguiente entrada, Poner cualquier menu en las plantillas del diseñador de Blogger
  • EXPANDEN PLANTILLA DE ARTILUGIOS BUSCAN DONDE DICE
 ]]></b:skin>
  • Y ENCIMA PEGAN ESTO
/* Sexy Drop Down Menu
----------------------------------------------- */
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxMTE2bfMqezSmJqGHkMsJyni51wi5pLY0jeTDiFqoAuH7aa75awR4rTyiRC16ahxAD8zGT3QZn45-EqvJcZRnKz-ALwuJBavosyFAwOCQacqYllKgdkHTNQcB4Wy0TT-h7iMp2QoGQ0wd/s1600/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.topnav li a {
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtoQUmb9ocFo5mDcnTWwtZ4Z3r9Pss2Zc7B0buG_aP7IagQNeE0lenDUQoW-HusV608acSuBA-2N3EVAN1WZ1GFfT2kHbWTBVmzNiXkiUYqB5BOXb9u6OKETqcyTEhwHKC9TM9I5yiMSjt/s1600/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span {
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMvP_UMGsMXgn-QpLmF-BQftRmozvTDbJEYvppggnv_VDgq84Rw58c_bvrH-OF9YxEfVjAsXlRYul42S-jXnalZfC3dw3M6c7XjchMQLSR7Zvh-NHK22jolqkd_5fFuVEh3cr1QdKm7b-F/s1600/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {
background-position: center bottom;
cursor: pointer;
}
ul.topnav li ul.subnav {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li {
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj88U4LWFeOpdRYO1pALo9_L8bgWt0JW0Se7Gz63ZVdmFPLj1loIXliTFAnDLk5H3kWPnexoXOBpB7bk_qzkGq749x1rFZVdQIKhO-hJa1hFAHscGwhWL_APYC99q3GuUOF0opsCwizp_Xb/s1600/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover {
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj88U4LWFeOpdRYO1pALo9_L8bgWt0JW0Se7Gz63ZVdmFPLj1loIXliTFAnDLk5H3kWPnexoXOBpB7bk_qzkGq749x1rFZVdQIKhO-hJa1hFAHscGwhWL_APYC99q3GuUOF0opsCwizp_Xb/s1600/dropdown_linkbg.gif) no-repeat 10px center;
}


  • para cambiar fuente cambia lo que esta en violeta por cualquiera de estos

  • Arial, Helvetica, sans-serif
  •  Georgia, "Times New Roman", Times, serif
  •  "Courier New", Courier, monospace
  •  Tahoma, Geneva, sans-serif
  •  Verdana, Geneva, sans-serif
  •  "Trebuchet MS", Arial, Helvetica, sans-serif
  •  "Arial Black", Gadget, sans-serif
  •  "Times New Roman", Times, serif
  •  "Palatino Linotype", "Book Antiqua", Palatino, serif
  •  "Lucida Sans Unicode", "Lucida Grande", sans-serif
  •  "MS Serif", "New York", serif
  •  "Lucida Console", Monaco, monospace
  •  "Comic Sans MS", cursive
  • BUSCAN DONDE DICE </head>
  • Y ENCIMA PEGAN ESTO

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;); //When the mouse hovers out of the subnav, move it back up
});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
}, function(){ //On Hover Out
$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
});

});
</script>
  • GUARDAN Y VAN A ELEMENTOS DE PAGINA. 
  • BUSCAN AŃADIR GADGET y DAN DONDE DICE HTML/JAVASCRIPT Y PEGAN LO SIGUIENTE
<ul class="topnav">
<li><a href="URL del enlace">Pestańa1</a></li>
<li>
<a href="URL del enlace">Pestańa2</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestańa</a></li>
<li><a href="URL del enlace">Sub Pestańa</a></li>
<li><a href="URL del enlace">Sub Pestańa</a></li>
</ul>
</li>
<li>
<a href="URL del enlace">Pestańa 3</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestańa</a></li>
<li><a href="URL del enlace">Sub Pestańa</a></li>
<li><a href="URL del enlace">Sub Pestańa</a></li>
<li><a href="URL del enlace">Sub Pestańa</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestańa 4</a></li>
<li><a href="URL del enlace">Pestańa 5</a></li></ul>

  • Si quieren agregar una pestaña  solo agreguen lo siguiente antes de </ul>
<li><a href="URL del enlace">Pestańa</a></li>
  • Si quieren añadir un pestaña con subpestañas agreguen esto antes de </ul> 
<a href="URL del enlace">Pestańa</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestańa</a></li>
<li><a href="URL del enlace">Sub Pestańa</a></li>
<li><a href="URL del enlace">Sub Pestańa</a></li>
<li><a href="URL del enlace">Sub Pestańa</a></li>
  • Si quieren añadir una subpestaña a una pestaña solo agreguen esto antes de </ul>
<li><a href="URL del enlace">Sub Pestańa</a></li>