- Javi Mata
- 12 may, 2017
Un menu como el mencionado puede verse algo así:
<ul class="menu_top">
<li><a href="pagina1">Opcion 1</a></li>
<li><a href="pagina2">Opcion 2</a></li>
<li><a href="#">Opcion 3</a>
<ul>
<li><a href="pagina3-1">Sub opcion 1</a></li>
<li><a href="pagina3-2">Sub opcion 2</a><li>
</ul>
</li>
</ul>
En una programación normal al hacer clic en Opción 3 nos hará el efecto de ir al top de la pagina agregando el # en la url, si esto es un problema para tu sitio por comodidad o estética te comento que es muy fácil arreglarlo con jQuery, simplemente habrá que agregar el siguiente script:
$('ul.menu_top li a').each(function(){
if ( $(this).attr("href")=="#" ){
$(this).click(function(e){
e.preventDefault();
});
}
});
Lo que hace este script es que recorre cada link dentro de la clase indicada y busca si tiene como href el #, si es así le aplica el preventDefault() que hace precisamente lo que queremos, quitar la función de un link con #, es decir, que nos mande al top de la pagina.
Si te sirvió (o no) o tienes comentarios sígueme en twitter: @Javi_Mata