2009-12-07 7 views
8

Estoy interesado en cómo otras personas manejan la navegación del sitio web. No es la parte de estilo o usabilidad, sino la parte de generación. La mayoría de los sitios web tienen algún tipo de "árbol de navegación" que se muestra en forma de uno o más niveles de menú: ¿de qué forma guarda y procesa este árbol? La solución más simple es una plantilla de menú estático, algo como esto:¿Cómo se genera la navegación del sitio web?

<ul id="menu"> 
    <li><a href="…">One</a></li> 
    <li><a href="…">Two</a></li> 
    <li><a href="…">Three</a></li> 
</ul> 

Pero esto no es muy flexible. No puede simplemente marcar la página actual en el menú y no hay una manera simple de mostrar u ocultar una parte del árbol de menú dependiendo de la página actual. (O es?)

me ocurrió con un árbol de navegación, algo como esto:

 
    - title: Fruits 
     nodes: 
     - title: Apples 
     - title: Oranges 
     - title: Bananas 
    - title: Music and Stuff 
     url: music 
     nodes: 
     - title: Classical 
     - title: Jazz 

Este árbol se carga por una clase especial Navigation que puede servir partes de la navegación en función de la petición actual camino. Esto parece funcionar un poco mejor, pero aún tengo mucha curiosidad sobre las soluciones de otras personas.

Respuesta

6

MySQL tiene un artículo titulado "Managing Hierarchical Data in MySQL" que he encontrado previamente a ser absolutamente inestimable. Discute dos técnicas comunes para almacenar navegación dinámica y sus limitaciones.

+1

+1 para el enlace – Yacoby

+0

Gran recurso, especialmente para cosas anidadas. –

+0

Lo estoy marcando como aceptado, aunque no haya una solución "correcta". (No quería hacer de esto un CW para dar a las personas los puntos de reputación para obtener buenas respuestas.) – zoul

5

Si ASP.NET es su sabor, Sitemaps gran trabajo

+0

Perl/Catalizador aquí, pero gracias, esto es útil. – zoul

+1

Sí. Se basan en un archivo XML que contiene el mapa del sitio. Si no está utilizando ASP.Net, es posible que aún pueda utilizar una solución basada en XML. – DOK

1

SQL Server 2008 tiene un nuevo tipo de datos ingenioso llamado "HierarchyID", el cual quita un lote de los dolores de cabeza de trabajar con datos jerárquicos.

4

Usted puede encontrar uno de mis módulos útiles: se genera CatalystX::Menu::Suckerfish

La estructura del menú de atributos de los métodos. Le falta una forma de alterar el estado de la entrada del menú de la página actual, pero eso no debería ser difícil de agregar.

Los atributos de método son cadenas arbitrarias MenuPath y MenuTitle que especifican una ruta delimitada por barras para la opción de menú en el árbol y una cadena que se utiliza como la etiqueta de opción de menú y un atributo de título html, donde corresponda.

3

Utilizamos un enfoque similar al suyo con la jerarquía del menú almacenada en la base de datos. Sería bueno generar automáticamente la estructura del menú en función de los métodos de envío en su lugar, pero existen otras ventajas para el enfoque DB. Por ejemplo, podemos alterar/restringir el acceso sin reconstruir la aplicación, y podemos crear elementos de menú que no se asignen al árbol de distribución, como los enlaces externos. También podemos proporcionar etiquetas arbitrariamente detalladas que no necesariamente se asignan a la ruta de envío, para facilitar las cosas a los humanos.

La principal desventaja (además de tener que duplicar el árbol de despacho) es que realmente la gestión de los datos jerárquicos en MySQL es un poco incómoda. Consulte cballou's answer para obtener un buen recurso sobre ese tema.

2

Cuando se trata de mostrar y ocultar partes del árbol, CSS es tu amigo.

Por ejemplo, el submenú de las frutas puede ser

id="fruitmenu"

configura todos los submenús para

display:none;

en la parte superior de la hoja de estilo.

Luego usa una ID en la etiqueta del cuerpo de cada página para hacerlas visibles de acuerdo con una regla más específica.

Así, por ejemplo, en su página de frutos, que tiene

<body id="fruitpage">

el submenú de la fruta es visible porque está gobernado por una regla como

#fruitpage #fruitmenu {display:block;}

+0

Esto es lo que hago en sitios web estáticos, pero a mí (1) no me gusta el volumen de las reglas que tengo que escribir y (2) me siento un poco culpable cada vez que cambiar la propiedad 'cursor' para pretender que no se puede hacer clic en el elemento del menú actual :) – zoul

+0

No entiendo por qué tendrías que cambiar el cursor - seguramente se puede hacer clic en el encabezado en la parte superior de una lista oculta? ¡Y puedes combinar reglas en CSS! Una regla larga con comas. – AmbroseChapel

+0

Disculpa, extrañé tu comentario. A veces, todo el menú es visible, solo el elemento actual se resalta y no se puede hacer clic. Aquí es cuando tengo que 'hacer trampas' con la propiedad 'cursor'. Y no hay forma de combinar las reglas 'body.foo # foo', ¿o sí? Si hubiera 10 páginas con un submenú, tendría que escribir 10 reglas 'body.foo # foo'. (Con una cláusula 'display' compartida, claro.) Esto se hace viejo rápidamente, prefiero escribir una clase reutilizable que genere los menús de un archivo. – zoul

Cuestiones relacionadas