El menú es un componente muy importante en cualquier sitio web. Es un elemento de la interfaz de usuario dentro de una página web que contiene enlaces a otras secciones del sitio web. Puede mostrarse en forma horizontal o vertical antes del contenido principal de la página web o encabezado.
-
Para crear un menú vertical:
- Los menús son verticales por defecto en Pure CSS. Es fácil de personalizar debido al estilo predeterminado mínimo y los selectores de baja especificidad.
- Todos los componentes del menú deben estar encerrados dentro de una división con clase llamada «puro-menú» .
- 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 incluirse 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:
HTML
<!DOCTYPE html><html><head><!--Import Pure Css files--><linkrel="stylesheet"href=integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"crossorigin="anonymous"><!-- Let browser know website isoptimized for mobile --><metaname="viewport"content="width=device-width, initial-scale=1.0"/></head><body><divclass="pure-menu"><!--Main heading of menu--><spanclass="pure-menu-heading">GEEKFORGEEKS</span><ulclass="pure-menu-list"><!--List items of menu--><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">Home</a></li><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">About Us</a></li><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">Contact</a></li><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">Privacy Policy</a></li></ul></div></body></html>Producción:
-
Para crear un menú horizontal:
Puede cambiar el menú vertical anterior a un menú horizontal simplemente agregando el nombre de clase «pure-menu-horizontal» en la división al principio.
Ejemplo:
HTML
<!DOCTYPE html><html><head><!--Import Pure Css files--><linkrel="stylesheet"href=integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"crossorigin="anonymous"><!-- Let browser know website isoptimized for mobile --><metaname="viewport"content="width=device-width, initial-scale=1.0"/></head><body><divclass="pure-menu pure-menu-horizontal"><!--Main heading of menu--><spanclass="pure-menu-heading">GEEKFORGEEKS</span><ulclass="pure-menu-list"><!--List items of menu--><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">Home</a></li><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">About Us</a></li><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">Contact</a></li><liclass="pure-menu-item"><ahref="#"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