Los menús verticales desplazables son muy útiles para hacer que nuestras páginas web sean compactas, ya que puede que no sea factible mostrar todos los elementos de la lista que ocuparían toda la altura de la ventana gráfica. Vamos a crear un menú vertical desplazable usando CSS puro .
A continuación se mencionan y describen las clases que se requieren para crear este diseño.
- pure-menu: Es la clase por defecto que genera el menú horizontal. Puede contener los elementos del menú y los encabezados en forma de lista.
- pure-menu-horizontal: Es la clase añadida al ‘pure-menu’ vertical predeterminado para convertirlo en un menú horizontal.
- 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-item: Es la clase añadida a los elementos de la lista dentro de esta lista.
- 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-scrollable: Es la clase que hace que el pure-menu-horizontal se desplace o pase rápidamente cuando el ancho del sitio web no se ajusta al tamaño del menú.
- pure-menu-link: Es la clase que se agrega a los enlaces dentro de los elementos del menú.
- menu-custom: una clase definida por el usuario para especificar la altura de nuestro menú desplazable. Si no se especifica, el menú ocupará toda la altura que necesita para que se muestren todos sus elementos.
Sintaxis:
<div class="pure-menu pure-menu-scrollabe menu-custom">
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
...
</a>
</li>
</ul>
</div
Nota: No olvide agregar el CDN de CSS puro para poder usar el marco de CSS puro
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Pure CSS CDN-->
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css"
integrity=
"sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
crossorigin="anonymous">
<!-- Internal CSS -->
<style>
.menu-custom {
height: 150px;
}
</style>
<title>Scrollable-vertical-menu</title>
</head>
<body>
<div class="pure-menu pure-menu-scrollable menu-custom">
<ul class="pure-menu-list">
<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">
Bootstrap
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
Javascript
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
JQuery
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
React JS
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
SQL
</a>
</li>
<li class="pure-menu-item">
<a href="#"
class="pure-menu-link">
MongoDB
</a>
</li>
</ul>
</div>
</body>
</html>
Producción:
menú vertical desplazable
Referencia: https://purecss.io/menus/
Publicación traducida automáticamente
Artículo escrito por suavethapa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA