Sexy Drop Down Menu es un menú hecho con JQuery y CSS y si no me equivoco es una creación de Soh Tanaka.
Se trata de un menú horizontal muy elegante que tiene un efecto deslizante en sus pestañas, y que además, para ver los sub menús es necesario presionar una flechita en color verde.
Puedes ver un ejemplo de este menú en este blog de pruebas.
Para colocar este menú horizontal en tu blog agregamos la parte CSS correspondiente antes de ]]></b:skin>
/* Sexy Drop Down Menu
----------------------------------------------- */
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 12px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgYpZHJT9ec4kORTpacjNqchqpeI57iq9RDHa_wBxBznS7I-qn8wdb2oI7T767rO8DjU-LBALvwGX4PE7XoZtj1awMGJIJgJWl7HvMmavGvVXVGzxhWHzEAatCZrNJNs6l36JJh28OESg/s320/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/AVvXsEhZWjMlMUyeP1ZzfrfwpeDkUvhso8gF6XLyWqIkfrQSy9Y6xG2ShMs_ga2vrSNG95sJep83wZk8t_ShUp4wGLKIilyY_njxYx2VvcWsLJBfo_K1ZFIuROh3qkN6QY6jBtUqXBdac8QW5I4/s320/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/AVvXsEj2aO_nF6TxnTgiDEZA_km-h_pfmjmSiqJIUyvfrtBxhi_EZuAlBQ4mHCbhOGHEoDl9YJOfS-gcn1knAbbH85Xq_Yz_2pv5ikBEZkxY6rtIRo9zO8dR_6u06Ye4Z7EelbegjmTal7WMr7o/s320/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/AVvXsEhgegm3TQNjpHWgZFDFaE7Nrb-KfY74bIA_hNiqhprpShwTfGcAYOcAoCqHFiVWw5jveV5mW9Iqw3mRWWbJdy0NA_Xc5gksUCLptiDrrdmEgPtq0O0lnbLOsI6v08xNdX-kc-OzBQXaBpE/s320/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/AVvXsEhgegm3TQNjpHWgZFDFaE7Nrb-KfY74bIA_hNiqhprpShwTfGcAYOcAoCqHFiVWw5jveV5mW9Iqw3mRWWbJdy0NA_Xc5gksUCLptiDrrdmEgPtq0O0lnbLOsI6v08xNdX-kc-OzBQXaBpE/s320/dropdown_linkbg.gif) no-repeat 10px center;
}
Luego buscamos la etiqueta </head> y arriba de ella pegamos el script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("ul.subnav").parent().append("<span/>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //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("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>
Por último coloca en un elemento HTML/Javascript el siguiente código:
<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>
Arrastra el menú debajo de la cabecera y cambia las URL de los enlaces donde se indica.
Si quisieras agregar más pestañas sólo agrega antes de </ul> esta línea:
<li><a href="URL del enlace">Otra Pestaña</a></li>
Y si quieras agregar sub pestañas entonces agrega esto:
<li>
<a href="URL del enlace">Otra 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>
</ul>
</li>
Es un menú muy elegante parecido al menú horizontal deslizante que antes habíamos visto, pero con la particularidad de que este tiene el botón para deslizar las sub pestañas.
Categories:
Efectos
