El menú desplegable es un patrón de interfaz de usuario común que hemos visto en la web hoy en día. Es útil para mostrar información relacionada en partes sin abrumar al usuario con botones, textos y opciones. La mayoría de las veces se ve dentro de la barra de navegación o en los encabezados de los sitios web.
Con la ayuda de Pure CSS, podemos crear fácilmente dichos menús desplegables.
Enfoque: Se consideran los siguientes puntos para crear un menú horizontal con menú desplegable.
- Todos los componentes del menú deben estar encerrados dentro de una división con una clase llamada “ puro-menú puro-menú-horizontal ” .
- Agregue la clase « pure-menu-heading « en el elemento <span> para el encabezado o título principal.
- Luego agregue todos los elementos después del encabezado dentro del elemento <ul> con la clase « pure-menu-list « . Cada elemento debe encerrarse dentro del elemento <li> con la clase « pure-menu-item « .
- Para crear un menú desplegable para un elemento de lista en particular, agregue la clase « pure-menu-has-children « dentro del elemento <li>. Agregue el nombre de clase « pure-menu-allow-hover « para mostrar el submenú al pasar el mouse. Agregue todos los elementos del submenú dentro del elemento <ul> con la clase « pure-menu-children « . Cada elemento debe encerrarse dentro del elemento <li> con la clase « pure-menu-item « .
- Si desea vincular un elemento con una sección de su página web, puede incluirlo dentro del elemento <a> con la clase « pure-menu-link « .
Ejemplo: En este ejemplo crearemos un menú horizontal.
HTML
<!DOCTYPE html> <html> <head> <!--Import Pure Css files--> <link rel="stylesheet" href= "https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity= "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"/> <!-- Let browser know website is optimized for mobile --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <div class="pure-menu pure-menu-horizontal"> <!--Main heading of menu--> <span class="pure-menu-heading"> GEEKFORGEEKS </span> <ul class="pure-menu-list"> <!--List items of menu--> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Home </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> About Us </a> </li> <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover"> <a href="#" class="pure-menu-link"> Tutorial </a> <!--Submenus of Tutorial--> <ul class="pure-menu-children"> <li class="pure-menu-item"> <a href="#" class="pure-menu-link">C</a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link">C++</a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link">Java</a> </li> </ul> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Privacy Policy </a> </li> </ul> </div> </body> </html>
Salida :
Para crear un menú vertical con menú desplegable: Para crear dicho menú, elimine el nombre de la clase « puro-menú-horizontal « de la división al principio. De manera predeterminada, los elementos del menú toman el 100 % del ancho del contenedor, por lo que debemos limitar el ancho configurando la visualización en bloque en línea.
Ejemplo: En este ejemplo crearemos un menú vertical.
HTML
<!DOCTYPE html>
<html>
<head>
<!--Import Pure Css files-->
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous" />
<!-- Let browser know website is
optimized for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<style>
.custom-restricted-width {
/* To limit the menu width to
the content of the menu: */
display: inline-block;
}
</style>
<div class="pure-menu custom-restricted-width">
<!--Main heading of menu-->
<span class="pure-menu-heading"> GEEKFORGEEKS </span>
<ul class="pure-menu-list">
<!--List items of menu-->
<li class="pure-menu-item">
<a href="#" class="pure-menu-link"> Home </a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link"> About Us </a>
</li>
<li class="pure-menu-item pure-menu-has-children
pure-menu-allow-hover">
<a href="#" class="pure-menu-link"> Tutorial </a>
<!--Submenus of Tutorial-->
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">C</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">C++</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Java</a>
</li>
</ul>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Privacy Policy
</a>
</li>
</ul>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ankushingle8523 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA