In this post we are going to see how to create full screen menu using only css code. This is very simple concept to display menu in full screen mode, This is also like mobile toggle menu. Now a days all are want different types of designing concept in websites. This menu one of the different menu concept for websites. This menu contains the three bar in the right side corner when you click that particular menu it hiding the all home page contents and displays the menus. When you want to close the menu you should click the right corner close icon.
Now a days this type of common menu is using in the websites. This is also one of the user friendly. This menu fully done by using pure css3 code, Without any help of javascript and jquery. I hope this example is very useful for the developers. Here we have the demo page, Please check out the demo page in the below link.
Html Code for Full Screen Menu:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Full Screen Menu using Css3 | sanwebcorner.com</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<label>
<input type='checkbox'>
<span class='menu'>
<span class='fullmenu'></span>
</span>
<ul>
<li><a href='http://www.sanwebcorner.com/'>Home</a></li>
<li><a href='http://demos.sanwebcorner.com/'>Demo</a></li>
<li><a href='https://www.facebook.com/sanwebcorner/'>About</a></li>
</ul>
</label>
<h1>San Web Corner - Full Screen Menu using css</h1>
</body>
</html>
Css for Full Screen Navigation Bar:
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 18px;
}
body {
font-size: 1.2em;
line-height: 1.6;
background: #8BC34A;
overflow-x: hidden;
}
label .menu {
position: absolute;
right: -100px;
top: -100px;
z-index: 100;
width: 200px;
height: 200px;
background: #FFF;
border-radius: 50% 50% 50% 50%;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
-webkit-box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
cursor: pointer;
}
label .fullmenu {
position: absolute;
top: 135px;
left: 50px;
width: 30px;
height: 2px;
background: #000;
display: block;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
label .fullmenu:after, label .fullmenu:before {
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #000;
}
label .fullmenu:before {
top: -10px;
}
label .fullmenu:after {
bottom: -10px;
}
label input {
display: none;
}
label input:checked + .menu {
-webkit-box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;
box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;
border-radius: 0;
}
label input:checked + .menu .fullmenu {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
label input:checked + .menu .fullmenu:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
bottom: 0;
}
label input:checked + .menu .fullmenu:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: 0;
}
label input:checked + .menu + ul {
opacity: 1;
}
label ul {
z-index: 200;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: .25s 0s ease-in-out;
transition: .25s 0s ease-in-out;
}
label a {
margin-bottom: 1em;
display: block;
color: #000;
text-decoration: none;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
color:#fff;
}
0 Comments