CSS Slide In Menu
Today we are going to look at how to create an CSS Slide in Menu using only css code…no javascript at all! These menu designs are becoming more popular these days as more people are using tablets or mobile phones to access the internet. By using smaller screens, we need to find a way to save space…that is where these menus step in and shine.
To HTML used for the slide in menu is below, you’ll see that we are using a checkbox to determine if the menu is going to be visible or not, this is achieved using the :checked pseudo selector. We are using the html entity ≡ to create our 3 horizontal lines.
<div id="container">
<input id="toggle" type="checkbox"><label for="toggle">≡</label>
<div class="content">
<h1>CSS Slide In Menu Example</h1>
</div>
<div class="slide-menu">
<h1>Menu</h1>
<nav class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Sign In</a></li>
</nav>
</div>
</div> The css code which can be seen below is what is used to style our slide in menu. We have also added some animation using translate3d and transform properties. The translate3d property is used to give the menu the ‘slide in’ effect and the transform property is used for the timing of the ‘slide in’, which is set at .4s
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
#container {
display: flex;
min-height: 100%;
}
input[type=checkbox] {
position: absolute;
opacity: 0;
}
label {
position: absolute;
top: 10px;
left: 40px;
z-index: 1;
display: block;
font-size:3em;
color: #444;
cursor: pointer;
transform: translate3d(0, 0, 0);
transition: transform .4s;
}
input[type=checkbox]:checked ~ label {
transform: translate3d(250px, 0, 0) rotate(90deg);
}
.content {
width:100%;
padding: 40px;
background: #f2f2f2;
transform: translate3d(0, 0, 0);
transition: transform .4s;
}
input[type=checkbox]:checked ~ .content {
transform: translate3d(250px, 0, 0);
}
input[type=checkbox]:checked ~ .slide-menu {
transform: translate3d(0, 0, 0);
}
input[type=checkbox]:checked ~ .slide-menu .menu li {
width: 100%;
}
.slide-menu {
transform: translate3d(-250px, 0, 0);
position: absolute;
width: 250px;
background: #4f6b81;
color: #ddd;
left: 0;
height: 100%;
transition: all .4s;
}
.slide-menu h1 {
margin: 10px;
text-shadow: 1px 1px 1px #000;
}
.menu {
list-style: none;
padding: 0;
margin: 0;
}
.menu a {
display: block;
text-decoration: none;
color: #fff;
font-size: 1.1em;
padding: 15px;
background: linear-gradient(#628297, #4f6b81);
border-bottom: 1px solid #1e222b;
box-shadow: inset 0px 1px 1px #8b9db3;
}
.menu a:hover {
background: linear-gradient(#3b3f48, #3c434d);
box-shadow: inset 0px 1px 1px #475059;
}The above code will result in the menu sliding in from the left hand side of the page, if however you would prefer the menu on the right hand side of the page, just change the following code.
label {
right: 40px;
}
input[type=checkbox]:checked ~ label {
transform: translate3d(-250px, 0, 0) rotate(90deg);
}
input[type=checkbox]:checked ~ .content {
transform: translate3d(-250px, 0, 0);
}
.slide-menu {
transform: translate3d(250px, 0, 0);
right: 0;
}Enjoy using this code, to see the menu in action click the button below, you’ll also be able to experiment with the code.
