Menú desplegable Html con submenú
HTML is a cakewalk if you’re a web development enthusiast. HTML stands for HyperText Markup Language, and it is the most widely used language for developing web applications. There are several tags provided by HTML for almost all use cases for a web application. One such tag is the <select> tag that we use to define dropdowns on a web page or application.
HTML is critical for web development, and if you’ve ever thought about choosing that career path, you’d unquestionably have come across this language. And that’s probably why you are here in the first place.
By now, you must have a much better understanding of what the <select> tag is used for. So, let’s dive into the practical aspect of this HTML <select> tag and code a simple web page that gives the user some choices in the form of a dropdown list to choose an option from.
There are several tags provided by HTML for text formatting. <h1> and <h2> are the two of those tags. These tags mean “heading 1” and “heading 2” respectively. There are several other tags like “heading 3” and “paragraph” that are abbreviated as <h3> and <p> respectively.
Evento de clic del menú desplegable Html
The above example shows typical <select> usage. It is given an id attribute to enable it to be associated with a <label> for accessibility purposes, as well as a name attribute to represent the name of the associated data point submitted to the server. Each menu option is defined by an <option> element nested inside the <select>.
Each <option> element should have a value attribute containing the data value to submit to the server when that option is selected. If no value attribute is included, the value defaults to the text contained inside the element. You can include a selected attribute on an <option> element to make it selected by default when the page first loads.
The <select> element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and size to specify how many options should be shown at once. It also accepts most of the general form input attributes such as required, disabled, autofocus, etc.
This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example <fieldset>; if there is no containing element with the disabled attribute set, then the control is enabled.
Generador de menús desplegables Html
El sitio web de comercio electrónico Designer Junkie Apparel utiliza un menú desplegable para mostrar todas sus categorías de productos, por ejemplo. De este modo, los visitantes pueden comprar toda la colección o pasar el ratón por encima del menú y hacer clic en una de las opciones para limitarse a los productos que más les interesan.
Un menú desplegable es una lista de opciones que se revela sólo cuando el usuario interactúa con el menú, ya sea haciendo clic en él o pasando el cursor por encima. Las opciones del menú descienden verticalmente y vuelven a desaparecer una vez que el usuario se retira del menú.
Dado que los menús desplegables permiten colocar más contenido y enlaces en una página sin saturarla, se suelen utilizar en sitios y aplicaciones web para ocultar elementos que los usuarios no necesitan ver después de la carga inicial de la página, pero que aún pueden querer utilizar.
Los menús desplegables contienen varias partes móviles que deben funcionar juntas para que la experiencia del usuario sea perfecta. Si su menú desplegable no funciona como se espera, los usuarios pueden molestarse fácilmente. Por eso es tan importante implementarlos correctamente en HTML.
Comentarios
Un menú desplegable html suele contener una lista de páginas de su sitio que sus visitantes pueden seleccionar de una lista desplegable. El siguiente tutorial le guía a través de la adición de un menú desplegable html a su página. Hagámoslo para comprobarlo.
Haga clic en el botón Carpeta para elegir un directorio para guardar el archivo js generado para el menú desplegable html. Aquí establecemos la ruta como “E:\tutorial\menu\topmenu.js”. Pero asegúrese de establecer la ruta del archivo js dentro de la carpeta raíz del sitio, o tendrá que modificar la ruta del archivo js manualmente.
A continuación, haga clic en el segundo botón “Copiar todo” para copiar el código del menú dentro de la etiqueta <BODY> del código HTML, encontrar el tage <Body> y </Body> en su página HTML, y pegar el código del menú entre <body> y </body> allí.
P.D. Un menú desplegable en html es cuando tienes múltiples opciones almacenadas en un menú accesible mediante el uso de la flecha de la barra de desplazamiento. Usted puede referirse a la página aquí para el video tutorial sobre la adición del menú desplegable html a la página web.