Escribe algo para buscar...

Menus con link con # sin que se recargue la pagina

  • 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
Compartir:

Artículos relacionados

Haciendo un lazy load de imágenes con IntersectionObserver

Haciendo un lazy load de imágenes con IntersectionObserver

  • Javi Mata
  • 05 jul, 2019

Te habrás topado a la hora de optimizar un sitio web que servicios como Lighthouse te sugiere hacer un defer (lazy load o carga perezosa) de las imágenes que no son visibles recién se entra en un siti

leer más
Optimiza tu sitio: 10 consejos para darle velocidad y mejor rendimiento

Optimiza tu sitio: 10 consejos para darle velocidad y mejor rendimiento

  • Javi Mata
  • 22 sep, 2020

Todos queremos tener sitios espectaculares, muy llamativos, con miles de efectos, imágenes y que además sea rápido y muy bien posicionado en San Google, pero ¿Se puede tener lo mejor de ambos mundos?

leer más