HTML es un lenguaje de marcado utilizado para crear páginas web y CSS es un lenguaje de hoja de estilo utilizado para diseñar un documento escrito en un lenguaje de marcado como HTML. En este artículo, vamos a saber cómo podemos crear un mega menú en nuestra página web con la ayuda de solo HTML y CSS. Los mega menús son un tipo de menú expandible en el que se muestran muchas opciones en una fila. Tenemos que crear un menú que aparece cuando el usuario mueve el mouse sobre un elemento dentro de una barra de navegación .
Pasos para crear un mega menú
Cree un archivo HTML: cree un menú de navegación y use un botón como menú en la barra de navegación para que funcione como un mega menú, como se muestra a continuación.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Mega Menu</title> <link rel="stylesheet" href="menu.css"> </head> <body> <!-- Created a div for navigation bar--> <div class="navigationBar"> <!-- Created a button to work as a menu--> <div class="downMenu"> <button class="downBtn"> <a href="#">Mega Menu 1</a> </button> <div class="downMenu-content"> <!-- Added items in mega menu 1--> <div class="megaMenu"> <!-- Column 1--> <div class="menuCol"> <a href="#">Menu 1 Col 1 Item 1</a> <a href="#">Menu 1 Col 1 Item 2</a> <a href="#">Menu 1 Col 1 Item 3</a> <a href="#">Menu 1 Col 1 Item 4</a> <a href="#">Menu 1 Col 1 Item 5</a> </div> <!-- Column 2--> <div class="menuCol"> <a href="#">Menu 1 Col 2 Item 1</a> <a href="#">Menu 1 Col 2 Item 2</a> <a href="#">Menu 1 Col 2 Item 3</a> <a href="#">Menu 1 Col 2 Item 4</a> <a href="#">Menu 1 Col 2 Item 5</a> </div> <!-- Column 3--> <div class="menuCol"> <a href="#">Menu 1 Col 3 Item 1</a> <a href="#">Menu 1 Col 3 Item 2</a> <a href="#">Menu 1 Col 3 Item 3</a> <a href="#">Menu 1 Col 3 Item 4</a> <a href="#">Menu 1 Col 3 Item 5</a> </div> </div> </div> </div> <!-- Created another button to work as a menu--> <div class="downMenu"> <button class="downBtn"> <a href="#">Mega Menu 2</a> </button> <div class="downMenu-content"> <!-- Added items in mega menu 2--> <div class="megaMenu"> <!-- Column 1--> <div class="menuCol"> <a href="#">Menu 2 Col 1 Item 1</a> <a href="#">Menu 2 Col 1 Item 2</a> <a href="#">Menu 2 Col 1 Item 3</a> <a href="#">Menu 2 Col 1 Item 4</a> <a href="#">Menu 2 Col 1 Item 5</a> </div> <!-- Column 2--> <div class="menuCol"> <a href="#">Menu 2 Col 2 Item 1</a> <a href="#">Menu 2 Col 2 Item 2</a> <a href="#">Menu 2 Col 2 Item 3</a> <a href="#">Menu 2 Col 2 Item 4</a> <a href="#">Menu 2 Col 2 Item 5</a> </div> <!-- Column 3--> <div class="menuCol"> <a href="#">Menu 2 Col 3 Item 1</a> <a href="#">Menu 2 Col 3 Item 2</a> <a href="#">Menu 2 Col 3 Item 3</a> <a href="#">Menu 2 Col 3 Item 4</a> <a href="#">Menu 2 Col 3 Item 5</a> </div> </div> </div> </div> </div> </body> </html>
Cree un archivo CSS: diseñe su barra de navegación y mega menú a través de CSS y vincule ese archivo a su página HTML. El siguiente es el contenido del archivo «menu.css» utilizado en el archivo HTML anterior.
menu.css
/* For navigation menu */
.navigationBar {
background-color: rgb(65, 122, 230);
overflow: hidden;
}
/* For texts in navigation bar */
.navigationBar a {
font-size: 20px;
color: white;
}
/* The dropdown div */
.downMenu {
float: left;
overflow: hidden;
}
/* For downButton to work as menu */
.downMenu .downBtn {
padding: 15px 15px;
background-color: inherit;
}
/* For hover effect on button */
.navigationBar a:hover, .downMenu:hover .downBtn {
background-color: rgb(65, 61, 61);
}
/* To hide mega menu */
downMenu-content {
position: absolute;
display: none;
width: 100%;
}
/* To show mega menu on hover */
.downMenu:hover .downMenu-content {
display: block;
}
/* Create columns in mega menu*/
.menuCol {
float: left;
width: 30%;
padding: 10px;
background-color: rgb(197, 189, 189);
}
/* Style the columns */
.menuCol a {
float: none;
color: black;
padding: 10px;
margin-bottom: 20px;
display: block;
}
/* Add hover */
.menuCol a:hover {
background-color: rgb(223, 223, 223);
}
Producción:
Publicación traducida automáticamente
Artículo escrito por iamabhijha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA