Tutorial: Mostrar un menú en páginas Web

  • Artículo

Actualización: noviembre 2007

Este tutorial muestra cómo colocar y configurar un control ASP.NET Menu en una página Web.

Un aspecto común de los sitios Web, independientemente de su complejidad, es un menú de navegación. Puede utilizar el control Menu en ASP.NET para configurar de una manera muy sencilla un complejo menú de navegación sin necesidad de escribir código.

El control Menu permite varias opciones de presentación, incluyendo una presentación estática en la que los menús están totalmente expuestos y una dinámica en la que parte de los menús aparecen al pasar el puntero del mouse por encima del elemento de menú principal. El control también proporciona una combinación de modos de presentación estática y dinámica que permiten una serie de elementos raíz que son estáticos, pero con elementos de menú secundarios que aparecen dinámicamente.

Puede configurar el control Menu de ASP.NET en el diseñador con vínculos estáticos a las páginas, o bien, puede enlazarlo automáticamente a un origen de datos jerárquico, como un control XmlDataSource o SiteMapDataSource.

Las tareas ilustradas en este tutorial incluyen:

  • Crear un menú básico y configurarlo de forma estática para vincularlo a sus páginas.

  • Crear un menú más complejo que esté enlazado a un archivo XML Web.sitemap.

  • Ajustar la orientación de un menú.

  • Configurar varios niveles de presentación estática frente a presentación dinámica.

Requisitos previos

Para poder completar este tutorial, necesitará:

  • Microsoft Visual Web Developer (Visual Studio).

  • .NET Framework.

Crear el sitio Web

Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, siguiendo los pasos en Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio Web y pasar a la siguiente sección, "Creación de un menú básico". De lo contrario, cree un sitio y una página Web nuevos siguiendo estos pasos.

Para crear un sitio Web de sistema de archivos

  1. Abra Visual Web Developer.

  2. En el menú Archivo, haga clic en Nuevo y después en Sitio Web.

    Aparecerá el cuadro de diálogo Nuevo sitio Web.

  3. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.

  4. En el cuadro Ubicación, escriba el nombre de la carpeta en la que desea guardar las páginas de su sitio Web.

    Por ejemplo, escriba el nombre de carpeta C:\WebSites.

  5. En la lista Lenguaje, haga clic en el lenguaje de programación con el que desee trabajar.

  6. Haga clic en Aceptar.

    Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.

Crear un menú básico

El primer paso en la creación de un menú para la página es la colocación de un control Menu.

Para agregar un control Menú en la página

  1. Cambie al archivo Default.aspx, o ábralo y después cambie a la vista Diseño.

  2. Desde el grupo de control Navegación del Cuadro de herramientas, arrastre un control Menú a la página.

Para este ejemplo, orientará el menú de forma horizontal en vez de vertical.

Para colocar el control Menú horizontalmente

  • Haga clic con el botón secundario del mouse en el control Menú, haga clic en Propiedades y después establezca la Orientación en Horizontal.

Configurar un menú básico

En esta sección, definirá los elementos de menú utilizando el Editor de elementos de menú.

Para editar elementos del control Menú

  1. Haga clic con el botón secundario del mouse en el control Menú y luego haga clic en Editar elementos de menú.

    Aparece el Editor de elementos de menú.

  2. Debajo de Elementos, haga clic en el icono Agregar un elemento de raíz.

  3. Debajo de Propiedades para el nuevo elemento, establezca Texto en Principal y NavigateURL en Default.aspx.

  4. Debajo de Elementos, haga clic en el icono Agregar un elemento de raíz.

  5. Debajo de Propiedades, establezca Texto en Productos y NavigateURL en Products.aspx.

  6. Debajo de Elementos, haga clic en el icono Agregar un elemento de raíz.

  7. Debajo de Propiedades, establezca Texto en Servicios y NavigateURL en Services.aspx.

  8. Haga clic en Aceptar.

Si se fija en el código para Default.aspx, verá que los elementos de menú y vínculos están definidos de forma declarativa en el control.

Para crear las páginas de destino

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en la raíz del sitio Web y, a continuación, seleccione Agregar nuevo elemento.

  2. Haga clic en Web Forms, llame al archivo Products.aspx, y después haga clic en Agregar.

  3. Repita los pasos anteriores y cree un archivo llamado Services.aspx.

Probar el menú

Con las páginas y el menú en su sitio, puede probarlo.

Para probar el control Menú

  1. Haga clic en Default.aspx en el Explorador de soluciones y luego presione CTRL+F5 para ejecutar la página Default.aspx.

  2. Pase el puntero por encima de los elementos; la barra de estado del explorador en la parte inferior de la página (si está visible) mostrará la página que está vinculada.

  3. Haga clic en un vínculo para saltar a la página.

Crear un menú enlazado a un mapa del sitio

El la última sección, creó un simple menú estático configurado de forma declarativa dentro de la página. En esta sección, omita la edición de los elementos de control Menu directamente y en su lugar enlace el control a un archivo Web.sitemap como un origen de datos XML. Esto permite mantener la estructura del control Menu en un archivo XML separado que se puede actualizar fácilmente sin modificar la página o utilizar el diseñador.

Para este ejemplo utilizará un segundo control Menu.

Para crear un segundo control Menú

  • Desde el grupo Navegación del Cuadro de herramientas, arrastre un control Menú a la página Default.aspx.

A continuación, necesitará un archivo Web.sitemap al que enlazarlo.

Para crear un archivo de mapa de sitio

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en la raíz del sitio Web y, a continuación, seleccione Agregar nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento <nombre del sitio Web>, haga clic en Mapa del sitio.

  3. Haga clic en Agregar.

  4. Coloque el siguiente código XML en el archivo Web.sitemap.

    El código XML representa la estructura del menú. Los nodos anidados se convierten en elementos de menú secundarios de elementos de menús nodos principales.

    <siteMap>
  <siteMapNode title="Home" description="Home" url="default.aspx" >
    <siteMapNode title="Products" description="Our products" 
     url="Products.aspx">
      <siteMapNode title="Hardware" 
       description="Hardware choices"
       url="Hardware.aspx" />
      <siteMapNode title="Software" 
       description="Software choices" 
       url="Software.aspx" />
    </siteMapNode>
    <siteMapNode title="Services" 
     description="Services we offer" 
     url="Services.aspx">
      <siteMapNode title="Training" 
       description="Training classes" 
       url="Training.aspx" />
      <siteMapNode title="Consulting" 
       description="Consulting services" 
       url="Consulting.aspx" />
      <siteMapNode title="Support" 
       description="Support plans" 
       url="Support.aspx" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

  5. Guarde el archivo.

Enlazar a un mapa del sitio

Ahora puede crear un origen de datos de navegación que señale al archivo Web.sitemap y enlazar su control Menu con éste.

Para enlazar un control Menú con un mapa del sitio

  1. Abra el archivo Default.aspx y después cambie a la vista Diseño.

  2. Haga clic en la etiqueta inteligente para mostrar el cuadro de diálogo Tareas de menú.

  3. En el cuadro de diálogo Tareas de menú, en la lista desplegable Elegir origen de datos, haga clic en Nuevo origen de datos.

    Aparece el cuadro de diálogo Asistente para la configuración del origen de datos.

  4. Haga clic en Mapa del sitio.

    Debajo de Especificar un id. para el origen de datos, aparece el nombre predeterminado, SiteMapDataSource1.

  5. Haga clic en Aceptar.

Probar el enlace del mapa del sitio

Con las páginas y el menú en su sitio, puede probarlo.

Para probar el enlace del mapa del sitio

  1. Presione CTRL+F5 para ejecutar la página Default.aspx.

  2. Pase el puntero sobre el elemento de menú Principal del segundo menú vertical.

    Aparecen Productos y Servicios.

  3. Mueva el puntero sobre Productos.

    Aparecen Hardware y Software.

    Si se fija en el código de origen para Default.aspx, se dará cuenta de que a diferencia del primer elemento de menú, los elementos no están especificados de forma declarativa; sino que el control Menu es el que hace referencia al origen de datos .

Ajustar los niveles estáticos y dinámicos

El menú vertical que creó en la sección anterior utiliza una presentación totalmente dinámica, tan solo el nivel superior permanece estático. Con el control Menu, tiene la posibilidad de especificar cómo se comporta el puntero del mouse al pasarlo sobre los elementos y si el menú debe o no ser dinámico o estático. En esta sección, ajustará las cualidades dinámicas y estáticas del control Menu.

Para hacer que el control Menú sea estático en dos niveles

  1. En la página Default.aspx en la vista Diseño, haga clic con el botón secundario del mouse en el segundo control Menú y luego haga clic en Propiedades.

  2. Establezca StaticDisplayLevels en 2.

Probar el menú dinámico

Con las páginas y el menú en su sitio, puede probarlo.

Para probar el menú dinámico

  • Presione CTRL+F5 para ejecutar la página Default.aspx.

    Se muestran los dos primeros niveles del menú mientras que el tercero es dinámico.

Pasos siguientes

El control Menu le permite crear fácilmente menús de navegación. Puede configurar el control para una presentación dinámica o estática y enlazarlo a un archivo XML del mapa del sitio. Asimismo, es posible que desee experimentar con las siguientes opciones adicionales:

Vea también

Tareas

Tutorial: Controlar los menús de ASP.NET mediante programación

Conceptos

Información general sobre el control Menu