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. El menú vertical con submenús es similar al menú vertical anidado.
Clases de menú vertical CSS puro:
- 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.
- 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-allow-hover: es la clase para mostrar el submenú al pasar el mouse.
- pure-menu-has-child: Es la clase para mencionar que el menú tiene algunos submenús.
- pure-menu-children: Es la clase para mencionar submenús.
Sintaxis:
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#" class="pure-menu-link">...</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">...</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">..</a>
</li>
</ul>
</li>
Ejemplo 1: en este ejemplo, crearemos un menú vertical con un solo submenú.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Vertical Menu</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.pure-menu-heading {
color: #308d46;
}
.custom-display {
/* To limit the menu width to
the content of the menu: */
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 2022
</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:
Ejemplo 2: en este ejemplo, crearemos un menú vertical de demostración con un submenú anidado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Vertical Menu</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.pure-menu-heading {
color: #308d46;
}
.custom-display {
/* To limit the menu width to
the content of the menu: */
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 2022
</a>
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#"
class="pure-menu-link">
Practice
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
HTML
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
CSS
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
JavaScript
</a>
</li>
</ul>
</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:
Ejemplo 3: en este ejemplo, crearemos un menú vertical de demostración con varios submenús.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Vertical Menu</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.pure-menu-heading {
color: #308d46;
}
.custom-display {
/* To limit the menu width to
the content of the menu: */
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 2022
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Practice
</a>
</li>
</ul>
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#"
class="pure-menu-link">
Students
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Competitive Programming
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Geeks of the Month
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Placement Courses
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Internship
</a>
</li>
</ul>
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#"
class="pure-menu-link">
Jobs
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Apply for Jobs
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Post a Jobs
</a>
</li>
</ul>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Courses
</a>
</li>
</ul>
</div>
</body>
</html>
Producción:
Ejemplo 4: en este ejemplo, crearemos un menú vertical de demostración con varios submenús y un submenú anidado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Vertical Menu</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.pure-menu-heading {
color: #308d46;
}
.custom-display {
/* To limit the menu width to
the content of the menu: */
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 2022
</a>
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#" class="pure-menu-link">
Practice
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
HTML
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
CSS
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
JavaScript
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#"
class="pure-menu-link">
Students
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Competitive Programming
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Geeks of the Month
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Placement Courses
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Internship
</a>
</li>
</ul>
</li>
<li class="pure-menu-item
pure-menu-has-children
pure-menu-allow-hover">
<a href="#"
class="pure-menu-link">
Jobs
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Apply for Jobs
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Post a Jobs
</a>
</li>
</ul>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Courses
</a>
</li>
</ul>
</div>
</body>
</html>
Producción:
Menú vertical CSS puro con submenús
Referencia: https://purecss.io/menus/
Publicación traducida automáticamente
Artículo escrito por sahilsulakhe3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA