Menú lateral en expansión con CSS puro

Vista prévia

Descripción

Sólo otro menú lateral CSS puro donde se puede expandir los elementos de submenú en el mouse Hover.

Funcionamiento

Cree una casilla de verificación oculta para controlar la posición del menú. Cuando está marcada, el menú se desliza.

<input type="checkbox" id="menu-button">

Cree una etiqueta vinculada a la casilla de verificación oculta.

<label for="menu-button" class="menu-button--label">&#9636;</label>

Cree un menú lateral con la siguiente estructura HTML.

<div class="menu-wrap">

<div class="side-menu">


<ul class="side-menu--list">







<li>






<a class="subset">Company</a>






<a href="">Mission</a>






<a href="">People</a>






<a href="">Social Responsibility</a>




</li>




<li>






<a class="subset" href="">Products</a>






<a href="">Solar panels</a>






<a href="">Electronics</a>






<a href="">Utilizers</a>




</li>




<li>






<a class="subset" href="">Contacts</a>






<a href="">Staff</a>






<a href="">Contact</a>






<a href="">Media</a>




</li>



</ul>


</div>
</div>

Las reglas básicas de CSS/CSS3 para el menú lateral en expansión.

/*We are fixing a menu and pulling them out of the screen by negative 'left'*/


.side-menu {

padding: 0;

margin: 0;

font-size: 0;

position: fixed;

left: -120px;

top: 100px;

opacity: .95;

overflow: hidden;

-webkit-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;
}

/*We need to hide the default input box*/


#menu-button { display: none; }

/*if checkbox is checked next sibling's .side menu child slides in*/


#menu-button:checked + .menu-wrap .side-menu { left: 0px; }

/*this is the label for the checkbox which act as a button for our menu*/


.menu-button--label {

color: black;

position: fixed;

top: 50px;

left: 10px;

font-size: 3rem;

text-align: center;

line-height: 0;

cursor: pointer;

-webkit-transition: all 1s;

transition: all 1s;
}

/*Fancy rotation effect for our menu button. It rotates back when mouse leaves it */


.menu-button--label:hover {

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

-webkit-transition: all 1s;

transition: all 1s;
}

/*We are giving the li item a shorter width to activate 'pop-out' effect when you hover*/


.side-menu--list li {

font-size: 0;

width: 110px;
}

.side-menu--list a {

color: #fff;

display: block;

text-decoration: none;

height: 2rem;

line-height: 2rem;

background: #333;

padding-left: 1rem;

width: 180px;

font-size: 1.2rem;
}

.side-menu--list {

list-style: none;

padding-left: 0;
}

/*.subset is a sub-menu that we are styling to stand out a bit*/


.side-menu--list li a.subset {

font-size: 1.4rem;

height: 2.2rem;

line-height: 2.2rem;
 padding-left: .5rem;

background: #222;
}

/*Applying overflow:hidden to get rid of the cluttering when the height is minimized*/


.side-menu--list li {

height: 2.2rem;

overflow: hidden;

-webkit-transition: all .4s ease-in-out;

transition: all .4s ease-in-out;
}

/*when you hover a li it expands to show all the menu links(and expands itself only)*/


.side-menu--list li:hover {

height: 8.2rem;

-webkit-transition: all .4s ease-in-out;

transition: all .4s ease-in-out;

cursor: pointer;

width: 180px;
}

/*We are skipping a sub-menu link and applying transformation to the follow-ups*/


.side-menu--list li a:not(:first-child):hover {

cursor: pointer;

background-color: #fff;

color: #333;

-webkit-transition: all .3s ease-in-out;

transition: all .3s ease-in-out;

-webkit-transform: translateX(10px);

transform: translateX(10px);
}