Compartir a través de

Menu (control)

  • Artículo

El control Menu permite desarrollar los menús presentados tanto estática como dinámicamente en las páginas web ASP.NET. Puede configurar el contenido del control Menu directamente en el control o puede especificar el contenido enlazando el control a un origen de datos.

Para agregar un control Menu a una página

  • Arrastre el control Menu desde el panel de tareas Cuadro de herramientas hasta la página.

Definir el contenido del menú

Puede definir el contenido del control Menu de dos maneras: puede agregar elementos de menú individuales de forma interactiva (o mediante programación) o puede enlazar los datos del control a un origen de datos XML o Mapa del sitio.

Para definir elementos para el control Menu

  1. En la vista Diseño, haga clic con el botón secundario en el control Menu y, a continuación, haga clic en Mostrar tareas de control comunes.

  2. En el menú Tareas de DropDownList, haga clic en Editar elementos.

  3. En el cuadro de diálogo Editor de elementos de menú, haga clic en Agregar un elemento de raízCc295472.ceca6b3c-d5cc-48da-9bd7-fffcc486d45d(es-es,Expression.10).jpg para agregar un elemento.

  4. En el área Propiedades, establezca las propiedades Text y href, así como cualquier otra propiedad que desee establecer para el elemento de menú.

  5. Agregue más elementos raíz o elementos secundarios al elemento seleccionado; para ello, haga clic en Agregar un elemento secundarioCc295472.b6fcf26e-e12d-4faa-ad58-a448cb5d25b0(es-es,Expression.10).jpg.

  6. Cuando haya agregado varios elementos de menú, puede ajustar su orden o sangría si los selecciona y hace clic en Subir un elemento entre sus relacionadosCc295472.21730f68-38b2-45cd-980f-5a48feb6987d(es-es,Expression.10).jpg, Bajar un elemento entre sus relacionadosCc295472.4cfe2717-2851-4922-bb52-9c38fdda20c4(es-es,Expression.10).jpg, Convertir el elemento seleccionado en un relacionado de su principalCc295472.b89d598e-1bab-4ec7-a256-e769699de3e6(es-es,Expression.10).jpg, Convertir el elemento seleccionado en el secundario del elementoCc295472.5d22e6e0-3cd4-4f0a-bc7d-69cd895fff90(es-es,Expression.10).jpg o Quitar un elementoCc295472.27e0c529-accb-4203-a5de-1deb9142cea6(es-es,Expression.10).jpg.

El enlace a un archivo XML permite controlar el contenido del menú mediante modificaciones al archivo en lugar de utilizar el diseñador. Esto permite actualizar el aspecto de exploración del sitio sin necesidad de volver a visitar el control Menu o editar el código. Si tiene un sitio cuyo contenido suele cambiar, puede utilizar un archivo XML para organizarlo y enlazar el archivo al control Menu para garantizar que los usuarios del sitio web puedan tener acceso al contenido.

Para enlazar el control Menu a un origen de datos

  1. En la vista Diseño, haga clic con el botón secundario en el control Menu y, a continuación, haga clic en Mostrar tareas de control comunes.

  2. En el menú Tareas de DropDownList, seleccione un origen de datos existente o en <Nuevo origen de datos> en la lista desplegable Elegir origen de datos.

[!NOTA]

Los orígenes de datos existentes se pueden editar en el panel de tareas Biblioteca de orígenes de datos.

  1. Si elige <Nuevo origen de datos>, se abrirá el Asistente para la configuración de orígenes de datos. Haga clic en Mapa del sitio o Archivo XML en el cuadro ¿De dónde obtendrá la aplicación los datos? y asigne al origen de datos un Id. en el cuadro Especifique un Id. para el origen de datos.

  2. Si elige Archivo XML, en el cuadro de diálogo Configurar origen de datos, especifique el archivo XML en el cuadro Archivo de datos y, si lo desea, un archivo de transformación XSL o una expresión XPath para el origen de datos XML.

  3. Haga clic en Aceptar en el cuadro de diálogo y el asistente para volver al control de la vista Diseño.

  4. Haga clic con el botón secundario en el control y haga clic en la opción Editar enlaces de datos de MenuItem del menú contextual.

  5. En la lista Enlaces de datos disponibles, seleccione el campo XML al que desea enlazar el menú y haga clic en Agregar.

  6. Seleccione el campo de la lista Enlaces de datos seleccionados y establezca los valores de las propiedades del área Propiedades de enlace de datos. Por ejemplo, para especificar el texto que se mostrará en el menú, elija #InnerText en lista desplegable de la propiedad TextField para mostrar el texto entre las etiquetas inicial y final del elemento XML.

  7. Para obtener más información acerca de cómo enlazar con un origen de datos XML y cómo programar el control Menu, consulte Menu (Clase) (puede estar en inglés) en MSDN Library.

Apariencia y comportamiento

El comportamiento del control Menu se puede ajustar a través de sus propiedades. Además, puede controlar el comportamiento de la presentación dinámica, incluida la cantidad de tiempo que un nodo del menú permanece visible una vez que se muestra. Por ejemplo, para cambiar la orientación del control Menu de horizontal a vertical, puede establecer la propiedad Orientation en Vertical.

Para aplicar esquemas de formato básico al control Menu

  1. En la vista Diseño, haga clic con el botón secundario en el control Menu y, a continuación, haga clic en Mostrar tareas de control comunes.

  2. En el menú Tareas de Menu, haga clic en Autoformato.

  3. En el cuadro de diálogo Autoformato, seleccione uno de los esquemas de la lista Seleccione un esquema. El efecto del esquema en el control Menu se muestra en el área Vista previa.

  4. Haga clic en Aceptar para aplicar el esquema de formato y cerrar el cuadro de diálogo, o en Aplicar para aplicar el esquema de formato sin cerrar el cuadro de diálogo.

El control Menu está formado por varias áreas de plantilla que también puede diseñar de forma interactiva.

Para diseñar una plantilla de manera interactiva

  1. En la vista Diseño, haga clic con el botón secundario en el control Menu y, a continuación, haga clic en Mostrar tareas de control comunes.

  2. En el menú Tareas de Menu, haga clic en Editar plantillas. Esto cambia el control Menu al modo de edición de plantillas.

  3. En la lista desplegable Mostrar, seleccione la plantilla que desea editar.

  4. Agregue texto o controles, o realice cambios en la plantilla.

  5. Cuando termine de diseñar las plantillas, en el menú Tareas de Menu, haga clic en Terminar edición de plantillas para volver al modo de diseño del control Menu estándar.

Al igual que con todos los controles ASP.NET, puede definir la apariencia y el comportamiento si establece las propiedades en el panel de tareas Propiedades de etiqueta. Para obtener una descripción completa de todas las propiedades del control Menu, consulte los miembros de Menu (puede estar en inglés) en MSDN Library.

Presentación estática y presentación dinámica

El control Menu tiene dos modos de presentación: estática y dinámica. Presentación estática significa que el control Menu permanece completamente desplegado todo el tiempo. Se ve la estructura completa y el usuario puede hacer clic en cualquier parte. En un menú presentado dinámicamente, sólo son estáticas las partes que especifique, mientras sus elementos de menú secundarios se presentan cuando el usuario sitúa el puntero del mouse sobre el nodo primario.

Puede elegir si el control Menu de la vista Diseño se mostrará como un menú dinámico o estático.

Para diseñar menús dinámicos o estáticos

  1. En la vista Diseño, haga clic con el botón secundario en el control Menu y, a continuación, haga clic en Mostrar tareas de control comunes.

  2. En el menú Tareas de Menu, elija Dinámica o Estática en la lista desplegable Vistas. La plantilla cambia a la vista que elija.

    • Comportamiento de la presentación estática

      El comportamiento de la presentación estática puede controlarse con la propiedad StaticDisplayLevels del control Menu. La propiedad StaticDisplayLevels indica el número de niveles que se presentarán estáticamente desde la raíz del menú. Por ejemplo, si StaticDisplayLevels se establece en 3, el menú se desplegará para mostrar estáticamente sus tres primeros niveles. El nivel de presentación estática mínimo es 1; el control producirá una excepción si el valor se establece en 0 o en un número negativo.

    • Comportamiento de la presentación dinámica

      La propiedad MaximumDynamicDisplayLevels especifica el número de niveles de nodos del menú de presentación dinámica que se deben mostrar tras el nivel de presentación estática. Por ejemplo, si el menú tiene un nivel estático de 3 y un nivel dinámico de 2, los tres primeros niveles del menú se mostrarán estáticamente, mientras que los dos niveles siguientes serán dinámicos.

      Si MaximumDynamicDisplayLevels se establece en 0, no se mostrará dinámicamente ningún nodo de menú. Si MaximumDynamicDisplayLevels se establece en un número negativo, se producirá una excepción.

      Uno de los aspectos de los menús dinámicos es la cantidad de tiempo que tarda en desaparecer la parte del menú que aparece dinámicamente. Este valor puede configurarse en milisegundos por medio de la propiedad DisappearAfter; por ejemplo, se puede establecer en 1000 para que tarde un segundo.

      El valor predeterminado es 500 milisegundos, o medio segundo. Si el valor de DisappearAfter se establece en 0, las pausas que se efectúen fuera del control Menu harán que éste desaparezca de forma inmediata. Si se establece el valor en -1, la duración de la pausa será infinita y la parte dinámica sólo desaparecerá cuando se haga clic fuera del control Menu.

Vea también

Conceptos

Introducción a los controles de exploración de ASP.NET

SiteMapPath (control)

TreeView (control)