Noticias Weblogs Foros Wiki Código

RecorteX

399 usuarios y 231 recortes de código
Usuario

Contraseña
Crear cuenta
asp csharp css fechas fichero Flash html imagenes java javascript linux mysql oracle php ruby sql SQLServer vbnet xhtml xml
Top Usuarios
fjmp76 (35)
albin (31)
josuebasurto (29)
juanjo (29)
pedrocaro (9)
stanz (8)
AndiXTRM (7)
Joserra (7)
miiglesi (6)
aplyca (5)
Top Etiquetas
php (38)
vbnet (27)
javascript (26)
html (25)
java (22)
sql (17)
csharp (16)
xml (13)
mysql (13)
css (10)
xhtml (7)
Flash (7)
imagenes (7)
linux (6)
asp (6)
fechas (6)
oracle (5)
SQLServer (5)
fichero (4)
ruby (4)

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;
}
Identifícate para dejar un comentario.
info@recortex.com - Proyecto: Juanjo Navarro, 2006 - Diseño: Albin - Información legal y técnica