Cuando no hay suficiente espacio, se pueden usar los elementos del menú horizontal desplazable. Da capacidad de respuesta a las páginas web.
Para crear un menú horizontal desplazable, agregue la clase pure-menu-scrollable . Pure.CSS proporciona menús verticales por defecto. Puede cambiar el menú vertical a un menú horizontal agregando los menús desplegables pure-menu-horizontal de nombre de clase que no son compatibles con el menú horizontal desplazable.
Clase de menú horizontal desplazable CSS puro:
- pure-menu-scrollable : esta clase se utiliza para crear un menú horizontal desplazable.
Sintaxis:
<div class="pure-menu pure-menu-scrollable">
...
</div>
Ejemplo 1: el siguiente código demuestra el menú desplegable desplazable usando las clases anteriores.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Pure CSS Scrollable horizontal 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"> </head> <body> <div class="pure-menu pure-menu-horizontal pure-menu-scrollable"> <ul class="pure-menu-list"> <li class="pure-menu-heading"> <a href="#" class="pure-menu-link"> GeeksforGeeks </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link" >Data Structures </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Algorithms </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Interview Preparation </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Topic-wise Practice </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> C++ </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Java </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Python </a> </li> <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"> Machine Learning </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Web Development </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Puzzles </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Project Ideas </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> GFG School </a> </li> </ul> </div> </body> </html>
Producción:
Menú horizontal desplazable CSS puro
Ejemplo 2:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Pure CSS Scrollable horizontal 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"> </head> <body> <div class="pure-menu pure-menu-horizontal pure-menu-scrollable"> <ul class="pure-menu-list"> <li class="pure-menu-heading"> <a href="#" class="pure-menu-link"> GeeksforGeeks </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link" >Data Structures </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Algorithms </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Interview Preparation </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Topic-wise Practice </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> C++ </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Java </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Python </a> </li> <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"> Machine Learning </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Web Development </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Puzzles </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> Project Ideas </a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link"> GFG School </a> </li> </ul> </div> </body> </html>
Producción:
Menú horizontal desplazable CSS puro
Referencia: https://purecss.io/layouts/tucked-menu/
Publicación traducida automáticamente
Artículo escrito por sahilsulakhe3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA