Weblogs Código

RecorteX

» menu
73 usuarios y 243 recortes de código
Usuario

Contraseña
Crear cuenta
Estás viendo los recortes de la etiqueta menu

RSS
Recortes: 1

Etiquetas relacionadas:
jquery

Menu desplegable multinivel

Se trata de un menú totalmente accesible.
Puede tener varios niveles.
Los enlaces a # desplegan un submenu y los enlaces a una página van a ella.


.submenu { display: none; }

<ul id="menu">
   <li><a href="#">opcion 1</a><ul class="submenu">
      <li><a href="opcion.php">opcion 1.1</a></li>
   </ul></li>
   <li><a href="#">opcion 2</a><ul class="submenu">
      <li><a href="opcion.php">opcion 2.1</a></li>
      <li><a href="#">opcion 2.2</a><ul class="submenu">
         <li><a href="opcion.php">opcion 2.2.1</a></li>
         <li><a href="opcion.php">opcion 2.2.2</a></li>
      </ul></li>
   </ul></li>
</ul>

$(document).ready(function () {
    $("#menu a").click(fOption);
});

function fOption() {
    var jThis = $(this);
    var href  = jThis.attr("href");
    if(href.indexOf("#")>-1) {
        $(".submenu").css({ display: "none" });
        jThis.parent().children("ul").css({ display: "block" });
        jThis.parents(".submenu").css({ display: "block" });
        return false;
    }
    return true;
}
Proyecto: Juanjo Navarro, 2006 - Diseño: Albin