Estilo de material de navegación desplegable adaptable con CSS puro

Vista prévia

Descripción

Un enfoque CSS/CSS3 puro para crear un menú de navegación de diseño de materiales, totalmente adaptable con menús desplegables de múltiples columnas y alineados inteligentemente.

Funcionamiento

Cree un menú de navegación de 2 niveles a partir de DIVs anidados.

<header>

<nav>


<div>



 <a><span>Menu </span>1</a>



<div>




 <a>Submenu 1</a>




 <a>Submenu 2</a>




 <a>Submenu 3</a>




 <a>Submenu 4</a>




 <a>Submenu 5</a>




 <a>Submenu 6</a>



 </div>


</div>


<div>



 <a><span>Menu </span>2</a>



<div>




 <a>Submenu 1</a>




 <a>Submenu 2</a>




 <a>Submenu 3</a>




 <a>Submenu 4</a>




 <a>Submenu 5</a>




 <a>Submenu 6</a>



 </div>


</div>


<div>



 <a><span>Menu </span>3</a>



<div>




 <a>Submenu 1</a>




 <a>Submenu 2</a>




 <a>Submenu 3</a>




 <a>Submenu 4</a>




 <a>Submenu 5</a>




 <a>Submenu 6</a>



 </div>


</div>

</nav>
</header>

El núcleo CSS/CSS3 estilos para el menú de navegación en pantallas anchas.

header {

width: 100%;

height: 50px;

background-color: #3498DB;

box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

header > nav > div {

float: left;

width: 16.6666%;

height: 100%;

position: relative;
}

header > nav > div > a {

text-align: center;

width: 100%;

height: 100%;

display: block;

line-height: 50px;

color: #fbfbfb;

transition: background-color 0.2s ease;

text-transform: uppercase;
}

header > nav > div:hover > a {

background-color: rgba(0, 0, 0, 0.1);

cursor: pointer;
}

header > nav > div > div {

display: none;

overflow: hidden;

background-color: white;

min-width: 200%;

position: absolute;

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

padding: 10px;
}

header > nav > div:not(:first-of-type):not(:last-of-type) > div {

left: -50%;

border-radius: 0 0 3px 3px;
}

header > nav > div:first-of-type > div {

left: 0;

border-radius: 0 0 3px 0;
}

header > nav > div:last-of-type > div {

right: 0;

border-radius: 0 0 0 3px;
}

header > nav > div:hover > div { display: block; }

header > nav > div > div > a {

display: block;

float: left;

padding: 8px 10px;

width: 46%;

margin: 2%;

text-align: center;

background-color: #3498DB;

color: #fbfbfb;

border-radius: 2px;

transition: background-color 0.2s ease;
}

header > nav > div > div > a:hover {

background-color: #212121;

cursor: pointer;
}

Optimice el menú de navegación en una pantalla pequeña.

@media (max-width:600px) {

header > nav > div > div > a {

margin: 5px 0;

width: 100%;
}

header > nav > div > a > span { display: none; }

}