Un menú horizontal a desplazable es un tipo de barra de menú receptiva en Pure.CSS , que cambia la barra de menú horizontal a una barra de menú desplazable horizontalmente. Se utiliza para hacer que la barra de menú responda cuando el ancho del sitio web aumenta o disminuye de un dispositivo a otro, por ejemplo, tabletas, teléfonos inteligentes, etc. El menú Pure.CSS horizontal a desplazable no necesita ninguna función de JavaScript, su Las clases CSS incorporadas son suficientes para ello.
Clases: Las clases mencionadas y descritas a continuación son necesarias 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ú.
Sintaxis:
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
.....
</div>
Ejemplo 1: este ejemplo muestra una barra de menú simple horizontal a desplazable.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Responsive horizontal-scrollable menu</title>
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
<style>
.menu{
background-color: green;
}
.menu h3, .menu a{
color: white;
}
a:hover{
background-color: white;
color: green;
}
body{
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo-300x300.png");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="pure-menu pure-menu-horizontal
pure-menu-scrollable menu">
<h3 class="pure-menu-heading">GeeksforGeeks</h3>
<ul class="pure-menu-list">
<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">
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>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
React
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Angular
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Nodejs
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Express
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Mongodb
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
About
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Contact
</a>
</li>
</ul>
</div>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código demuestra que cuando el ancho del sitio web disminuye a 72 em, los elementos de la lista horizontal a desplazable en la barra de menú se separarán del encabezado. Deberíamos usar la regla @mean() para detectar los cambios en el ancho del sitio web. El código bajo la regla @mean() se ejecutará cuando la condición sea «verdadera».
HTML
<!DOCTYPE html>
<html>
<head>
<title>Responsive horizontal-scrollable menu</title>
<link rel="stylesheet"
href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous">
<style>
.menubar {
background-color: green;
position: relative;
}
.menu {
display: inline-block;
width: auto;
vertical-align: middle;
}
.menu a {
color: white;
}
.menu a:hover {
background-color: white;
color:green;
}
.website_name {
display: block;
text-align: center;
position: relative;
}
body{
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo-300x300.png");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
/* To toggle the normal menu bar to
Horizontal-scrollable menu bar
when the window size reduced to particular size*/
@media (max-width: 72em)
{
.menu
{
display:block;
}
.menubar_top
{
position: relative;
padding: 0.5em;
}
.scrollable_links
{
position: absolute;
width: 100%;
background-color: transparent;
background-color: black;
}
}
</style>
</head>
<body>
<div class="menubar">
<div class="pure-menu menu menubar_top">
<a href="#" class="pure-menu-heading website_name">
GeeksforGeeks
</a>
</div>
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable
menu scrollable_links">
<ul class="pure-menu-list">
<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">
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>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
React
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Angular
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Nodejs
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Express
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Mongodb
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
About
</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
Contact
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ashwin13602 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA