Los menús son las principales herramientas para que los visitantes naveguen por un sitio web. Pure.CSS presenta menús verticales y horizontales muy simples que el desarrollador puede personalizar fácilmente.
Clases de menú CSS puro:
- Menú vertical
- Menú horizontal
- Elementos seleccionados y deshabilitados dentro de un menú
- Menú desplegable
- Menú vertical con submenú anidado
Menú Vertical: Los Menús provistos por Pure.CSS son verticales por defecto. El estilo predeterminado es mínimo para que el desarrollador pueda personalizarlo fácilmente. El menú vertical predeterminado generalmente contiene el ancho completo de su contenedor, pero el desarrollador puede especificarlo. El desarrollador también puede establecer el atributo de visualización en consecuencia.
- pure-menu es la clase predeterminada que genera el menú horizontal. Puede contener los elementos del menú y los encabezados en forma de lista.
- pure-menu-list es la clase para la lista desordenada que contiene los elementos del menú. Los elementos de la lista dentro de esta lista deben tener la clase ‘ pure-menu-item’.
- pure-menu-link es la clase que se agrega a los enlaces dentro de los elementos del menú.
- pure-menu-heading es la clase que se agrega para los encabezados dentro o fuera de la lista del menú. De forma predeterminada, escribe en mayúscula el texto interior.
Sintaxis:
<div class="pure-menu">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
Some Text Here
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Some Text Here
</a>
</li>
</ul>
</div>
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Menus</title>
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.custom-width {
display: inline-block;
}
.pure-menu-heading{
color: #308d46;
}
</style>
</head>
<body>
<div class="pure-menu custom-width">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
GeeksforGeeks
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Tutorials
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Students
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Jobs
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Courses
</a>
</li>
</ul>
</div>
</body>
</html>
Producción:
Menú horizontal: agregue la clase ‘pure-menu-horizontal’ al menú vertical predeterminado ‘ pure-menu’ para convertirlo en un menú horizontal. Los elementos secundarios como pure-menu-list , pure-menu-item , pure-menu-link y pure-menu-heading siguen siendo los mismos que el menú vertical predeterminado.
Sintaxis:
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-heading">Some Text Here</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Some Text Here
</a>
</li>
</ul>
</div>
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Menus</title>
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.pure-menu-heading{
color: #308d46;
}
</style>
</head>
<body>
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
GeeksforGeeks
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Tutorials
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Students
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Jobs
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Courses
</a>
</li>
</ul>
</div>
</body>
</html>
Producción:
Elementos seleccionados y deshabilitados dentro del menú: Pure CSS proporciona clases predeterminadas que nos permiten resaltar un elemento del menú como deshabilitado o seleccionado. El nombre de clase ‘ pure-menu-disabled ‘ se agrega después de ‘ pure-menu-item ‘ para deshabilitar un elemento y el nombre de clase ‘ pure-menu-selected ‘ se agrega para que el elemento parezca seleccionado.
Sintaxis:
<li class="pure-menu-item pure-menu-disabled">
Inner Elements
</li>
<li class="pure-menu-item pure-menu-selected">
Inner Elements
</li>
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure.CSS | Menus</title>
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.pure-menu-heading {
color: #308d46;
}
</style>
</head>
<body>
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
GeeksforGeeks
</li>
<li class="pure-menu-item pure-menu-selected">
<a href="#" class="pure-menu-link">
Selected
</a>
</li>
<li class="pure-menu-item pure-menu-disabled">
<a href="#" class="pure-menu-link">
Disabled
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Normal
</a>
</li>
</ul>
</div>
</body>
</html>
Producción:
Menú desplegable: los elementos desplegables solo se pueden agregar al menú horizontal. Los pasos para crear un menú desplegable se describen a continuación.
- Elija el elemento de la lista al que desea agregar elementos desplegables y agregue la clase ‘ pure-menu-has-child ‘.
- Cree una lista desordenada dentro de ese elemento con una clase de ‘ pure-menu-child ‘.
- Agregue los elementos de la lista dentro de ella con una clase de ‘ pure-menu-item ‘.
- Agregue la clase ‘ pure-menu-allow-hover ‘ al elemento de la lista principal para que el menú desplegable se produzca al pasar el mouse.
Sintaxis:
<li class="pure-menu-item
pure-menu-has-children pure-menu-allow-hover">
Some Inner Elements
<ul class="pure-menu-children">
<li class="pure-menu-item">
Inner Elements
</li>
</ul>
</li>
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure.CSS | Menus</title>
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.pure-menu-heading {
color: #308d46;
}
</style>
</head>
<body>
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
GeeksforGeeks
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#" class="pure-menu-link">
Tutorials
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Data Structures and Algorithms
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
GATE 2021
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Practice
</a>
</li>
</ul>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Students
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Jobs
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Courses
</a>
</li>
</ul>
</div>
</body>
</html>
Producción:
Menú vertical con submenú anidado: el método para crear un menú vertical con un submenú anidado es muy similar al del menú desplegable. Solo el menú tiene que ser un menú vertical predeterminado en lugar de un menú horizontal.
Sintaxis:
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
Some Inner Elements
<ul class="pure-menu-children">
<li class="pure-menu-item">
Inner Elements
</li>
</ul>
</li>
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Menus</title>
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.pure-menu-heading {
color: #308d46;
}
.custom-display {
display: inline-block;
}
</style>
</head>
<body>
<div class="pure-menu custom-display">
<ul class="pure-menu-list">
<li class="pure-menu-heading">
GeeksforGeeks
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#" class="pure-menu-link">
Tutorials
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Data Structures and Algorithms
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
GATE 2021
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Practice
</a>
</li>
</ul>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Students
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Jobs
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Courses
</a>
</li>
</ul>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por akashkumarsen4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA