- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
FAQs
General Tutorials
MonsterONE Subscrioption
Menú desplegable “SuperFish”
marzo 17, 2011
Superfish es una versión mejorada del plugin jQuery de menú de estilo Suckerfish que ofrece un existente puro menú desplegable CSS y un montón de mejoras muy interesantes. Para obtener detalles, visite http://users.tpg.com.au/j_birch/plugins/superfish
JavaScript
Debemos incluir framework jQuery y superfish.js señalando el atributo src de la etiqueta de script a esos ficheros .js.<script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="superfish.js"></script>La sección <head> del fichero index-#.html contiene estas líneas de código que inicializan la funcionalidad de script con los valores básicos
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').superfish({
hoverClass: 'sfHover', // la clase que se aplica a elementos de la lista
pathClass: 'overideThisToUse', // la clase que ha aplicado para listar elementos que llevan a la página actual
pathLevels: 1, // el número de niveles de submenús que permanecen abiertos o son restaurados con ayuda de pathClass
delay: 800, // el tiempo en milisegundos para que el ratón pueda quedar fuera de un submenú, sin que el submenú se cierre
animation: {opacity:'show'}, // un objeto equivalente al primer parámetro de método jQuery .animate()
speed: 'normal', // velocidad de la animación. Equivalente al segundo parámetro de método jQuery .animate()
autoArrows: true, // si 'true', (arrow mark-up)marca de la flecha en marcha es generada automáticamente = el código fuente más limpio a expensas de los resultados de inicialización
dropShadows: true, // completamente desactiva 'drop shadows' si se utiliza 'false'
disableHI: false, // utilice 'true' para desactivar la detección hoverIntent
onInit: function(){}, // callback function se activa una vez Superfish se inicializa – 'this' es lo que contiene ul
onBeforeShow: function(){}, // callback function se activa antes de que comienza la animación de reveal – 'this' es ul a punto de abrir
onShow: function(){}, // callback function se activa después de animación de reveal – 'this' es ul abierto
onHide: function(){} // callback function se activa después del cierre de sub-menú – 'this' es ul cerrado
});
});
</script>
HTML
Aquí puede revisar la representación general de script HTML:CSS
. /*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin:0;
padding:0;
list-style:none;
}
.sf-menu {
line-height:1.0;
}
.sf-menu ul {
position: absolute;
top:-999em;
width:10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width:100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float:left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,.sf-menu li.sfHover ul {
left:0;
top:2.5em; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {
left:10em; /* match ul width */
top:0;
}
ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left:10em; /* match ul width */
top:0;
}
/*** DEMO SKIN ***/
.sf-menu {
float:left;
margin-bottom:1em;
}
.sf-menu a {
border-left:1px solid #fff;
border-top: 1px solid #CFDEFF;
padding: .75em 1em;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color:#13a;
}
.sf-menu li {
background: #BDD2FF;
}
.sf-menu li li {
background: #AABDE6;
}
.sf-menu li li li {
background: #9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #CFDEFF;
outline: 0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right:.75em;
top:1.05em; /* IE6 only */
width:10px;
height:10px;
text-indent: -999em;
overflow: hidden;
background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top:.8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** shadows for all but IE6 ***/
.sf-shadow ul {
background:url('../images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}
