Crear un mega menu simple con HTML/CSS puro

Vista prévia

Descripción

Una navegación desplegable HTML/CSS pura que le ayuda a implementar un mega menú de múltiples columnas para su sitio web de contenido enriquecido.

Funcionamiento

Cargue el archivo de hoja de estilos principal en la sección Head de la Página Web.

<link rel="stylesheet" href="css/menu.css">

Cree un menú de Mega navegación usando la lista HTML anidada como se muestra a continuación.

<ul class="nav">

<li>


<a href="#">Menu Item 1</a>


<div>



<div class="nav-column">




<h3>Heading 1</h3>




<ul>





<li><a href="#">Item 1</a></li>





<li><a href="#">Item 2</a></li>





<li><a href="#">Item 3</a></li>




</ul>



</div>



<div class="nav-column">




<h3>Heading 2</h3>




<ul>





<li><a href="#">Item 1</a></li>





<li><a href="#">Item 2</a></li>





<li><a href="#">Item 3</a></li>




</ul>




<h3>Heading 3</h3>




<ul>





<li><a href="#">Item 1</a></li>





<li><a href="#">Item 2</a></li>




</ul>





</div>



<div class="nav-column">




<h3>Heading 4</h3>




<ul>





<li><a href="#">Item 1</a></li>





<li><a href="#">Item 2</a></li>





<li><a href="#">Item 3</a></li>




</ul>



</div>



<div class="nav-column">




<h3 class="orange">Highlighted Heading</h3>




<ul>





<li><a href="#">Item 1</a></li>





<li><a href="#">Item 2</a></li>




</ul>




<h3 class="orange">Highlighted Heading</h3>




<ul>





<li><a href="#">Item 1</a></li>





<li><a href="#">Item 2</a></li>




</ul>



</div>


</div>

</li>

<li><a href="#">Menu Item 2</a></li>

<li><a href="#">Menu Item 3</a></li>

<li><a href="#">Menu Item 4</a></li>

<li><a href="#">Menu Item 5</a></li>

<li class="nav-search">


<form action="#">



<input type="text" placeholder="Search...">



<input type="submit" value="">


</form>

</li>
</ul>

Hecho. Puede modificar o anular el CSS para crear sus propios estilos de menú.

/* menu dropdown */
.nav > li > div {


...
}