¿Cómo crear un menú DHTML?

votos
0

Necesito crear un menú DHTML con las características especificadas, pero no puedo encontrar la manera de hacerlo. Esto es lo que necesito:

Todos los artículos se distribuyen horizontalmente. Si fueran más anchos que la pantalla, aparecerían dos pequeñas flechas en el lado derecho del menú que permiten desplazarlo. Algo como esto:

+--------+--------+-------+---+---+
| Item 1 | Item 2 | Item 3| < | > |
+--------+--------+-------+---+---+

Los elementos del menú deben poder hacer clic en cualquier lugar de la celda. Deben estirarse tanto vertical como horizontalmente a los contenidos. El texto en los elementos debe estar centrado tanto vertical como horizontalmente. El menú debería funcionar en IE7 / Opera / FF / Safari.

El desplazamiento es la parte fácil: simplemente coloco todo en un contenedor (por ejemplo, a <div>), coloco el contenedor overflow: hiddeny luego juego en Javascript con clientWidth, scrollWidthy scrollLeft. Eso lo he descubierto y ya lo he intentado.

Pero, ¿cómo hacer que los elementos del menú sean tan elásticos, que puedan hacer clic en cualquier lugar y texto centrado?

Publicado el 09/12/2008 a las 15:11
fuente por usuario
En otros idiomas...                            


3 respuestas

votos
2

Pruebe el CSS a continuación:

#menu {
  display: table; 
}   
#menu a {
    display:table-cell; 
    vertical-align:middle;
}

Y luego formatee su menú como:

<div id="menu">
    <a href="#">normal text</a>
    <a href="#"><big>large text</big></a>
    <a href="#"><span style="line-height:100px;">very tall text</span></a>
</div>

Esto forzará la alineación vertical y evitará que los enlaces se envuelvan. Haganos saber como funciona.

Respondida el 09/12/2008 a las 15:18
fuente por usuario

votos
1

De acuerdo, hablé con mis superiores y decidieron que podría estar bien que no puedas hacer clic con el botón derecho en un elemento del menú y seleccionar "Abrir en una ventana nueva". Si se elimina este requisito, no estoy obligado a <a>elementos para enlaces. Con JavaScript puedo convertir cualquier cosa en un enlace. Por lo tanto, ¡te elijo, pikachoo <table> !

Yap, es una herejía, pero funciona. Más específicamente, es el único constructo que puedo pensar que puede hacer todo lo siguiente al mismo tiempo:

  • Centrar el texto horizontal y verticalmente;
  • Estirar el contenido horizontal y verticalmente;
  • No se ajusta a la siguiente línea cuando los artículos comienzan a desbordarse.

Cualquier otra cosa que pueda hacer lo mismo probablemente estará más convulsionada de todos modos. Y antes de que nadie tenga la idea, no, no necesito soporte de motor de búsqueda. Es una aplicación web interna. Sería bastante malo si Google pudiera indexar eso ...

Respondida el 09/12/2008 a las 16:12
fuente por usuario

votos
-2

hacer clic en cualquier lugar es fácil: puedes vincular el desencadenante de evento onclick (y con suerte el estilo de cursor) al elemento de celda atómica, o puedes hacer que las etiquetas de elementos de celda atómica <a> (o más probablemente ajustarlas en <li>) y enlace y estilo apropiadamente (relleno, margen, foo).

por ejemplo, caso 1:

<ul id="menu"><li class="item" onclick="foo()" style="cursor:pointer; cursor:hand; padding:1em; margin:1px; float: left;">FOO!</li></ul>

(Obviamente, no recomiendo el estilo en línea ni los manejadores de scripts, pero se entiende la idea)

La aplicación del relleno centrará el texto de manera efectiva y, al no tener ancho asignado, se estirará naturalmente para ajustarse a su contenido.

Respondida el 09/12/2008 a las 15:21
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more