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:
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