Menú Vertical: Podemos crear un menú vertical en forma de botones y un menú desplazable. Menú vertical son los botones dispuestos en la barra de menú/barra de navegación vertical.
Cómo crear un menú vertical usando botones: Podemos crearlo simplemente usando HTML y CSS. Crearemos una estructura simple de la página web usando las etiquetas <div> , <li> y <a> .
Sintaxis:
<div class="vertical-menu"> <a href="#" class="active">Home</a> <a href="#">1</a> ... <a href="#">n</a> </div>
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<style>
.vertical-menu {
width: 200px;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Vertical Menu</h3>
<div class="vertical-menu">
<a href="#" class="active">Home</a>
<a href="#">About Us </a>
<a href="#">Contact Us</a>
<a href="#">Login </a>
<a href="#">Sign Up</a>
</div>
</body>
</html>
Producción:
Cómo crear un menú vertical usando desplazable: Aquí veremos cómo crear un menú vertical usando desplazable. Para hacer esto, usaremos HTML y CSS simples.
Sintaxis:
<div class="vertical-menu">
<a href="#" class="active">Home</a>
<a href="#">1</a>
...
<a href="#">n</a>
</div>
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<style>
.vertical-menu {
width: 200px;
height: 150px;
overflow-y: auto;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<h1 style="color:green; text-align: center;">
GeeksforGeeks
</h1>
<h3>Vertical Menu</h3>
<div class="vertical-menu">
<a href="#" class="active">Home</a>
<a href="#">About Us </a>
<a href="#">Contact Us</a>
<a href="#">Login </a>
<a href="#">Sign Up</a>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por attardeurjita77 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA