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-->
<
link
rel
=
"stylesheet"
href
=
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"
>
<!--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"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Contact
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
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-->
<
link
rel
=
"stylesheet"
href
=
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"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Contact
</
a
>
</
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