Red de conocimiento informático - Aprendizaje de programación - Cómo crear el efecto del menú plegable de Apple en HTML5

Cómo crear el efecto del menú plegable de Apple en HTML5

1. Agregue la siguiente definición de estilo en el área headgt; de la página:

lt; style type="text/css"gt

#dlmenu {height: 10em; ;}

#menu {tipo de estilo de lista: ninguno; margen: 0 0 10px; relleno: 0; ancho: 15em;

#menu li {display: block; padding: 0; margin: 0. }

#menu li: hover, #menu li a: hover {border: 0;}

#menu li: desplazar dt a, #menu li a: desplazar dt a {fondo: #d4d8bd url(top_grad_2.gif) centro color: #ff0; menú li: desplazar dd, #menú li a: desplazar dd {display: block;}

#menu li: desplazar dl, #menu li a: desplazar dl {height.20em fondo: #b4be9c url; (sub_grad. gif);}

#menu table {border-collapse: colapso; relleno: 0; margen: -4px; tamaño de fuente: 1em;}

#menu li : desplazar dl, #menu li a: desplazar dl {ancho: 15em; margen: -4px; tamaño de fuente: 1em;}

# menú dl {ancho: 15em; fondo: 0; 6f9c6f; cursor: puntero;}

#menu dt {margen: 0; relleno: 0; tamaño de fuente: 1.1em; borde superior: 1px sólido #cce;}

#menu dd {margen: 0; relleno: 0; tamaño de fuente: 1em; alineación de texto: izquierda; }

.galería dt a, .galería dt a: visitado {pantalla: bloque; #fff; relleno: 5px 5px 5px 10px; fondo: #949e7c url(top_grad.gif) centro; }

.gallery dd a, .gallery dd a: visitado {color: # 000; altura: 1em; decoración de texto: ninguna; pantalla: bloque; relleno: 4px 5px 4px 20px; fondo: #b4be9c url(sub_grad.gif);* html .gallery dd a, * html . galería d

d a: visitado {altura: 1em;}

.galería dd a: hover {fondo: #7aa; color: #ff0;}

lt;/stylegt;

2

lt;div id="dlmenu"gt;

lt;ul id="menu"gt;

lt;ligt;

lt;! --[if lte IE 6]gt;lt;a href="#nogo"gt;lt;tablegt;lt;trgt;lt;tdgt;lt;![endif]--gt;

lt;dl class="gallery"gt;

lt;dtgt;lt;a href="./menu/index.html"gt;DEMOSlt;/agt;lt;/dtgt;

lt;ddgt;lt;a href="./menu/zero_dollars.html" title="Página de publicidad de cero dólares"gt;cero dólareslt;/agt;lt;/ddgt;

lt;ddgt;lt;a href="./menu/embed.html" title="Ajustar texto alrededor de la imagen"gt;Ajustar textolt;/agt;lt;/ddgt;

lt ;ddgt; lt;a href="./menu/form.html" title="Hoja de estilo"gt;Hoja de estilolt;/agt;lt;/ddgt;

lt;ddgt;lt; ./menu/nodots.html" title="Eliminar actividad/borde de enfoque"gt;actividad focuslt;/agt;lt;/ddgt;

lt;ddgt;lt;a href="./menu /shadow_boxing.html" title="Sombra multiposición"gt;Shadow Boxlt;/agt;lt;/ddgt;

lt;ddgt;lt;a href=" /menu/old_master.html " title="Detalles del mapa de imagen"gt;maplt de imagen;/agt;lt;/ddgt;

lt;ddgt;lt;a href="./menu/ bodys.html" title="El lo divertido de usar imágenes de fondo"gt;La diversión de usar fondoslt;/agt;lt;/ddgt;

lt;ddgt;lt;a href="./menu/ fade_scroll.html" title=" Desplazamiento desvanecido"gt; Desplazamiento desvanecidolt;/agt;lt;/ddgt;

.