In this post service nosotros are going to encounter how to exercise amount enshroud menu using solely css code. This is real elementary concept to display carte inward amount enshroud mode, This is likewise similar mobile toggle menu. Now a days all are desire dissimilar types of designing concept inward websites. This carte ane of the dissimilar carte concept for websites. This carte contains the 3 bar inward the correct side corner when y'all click that detail carte it hiding the all abode page contents in addition to displays the menus. When y'all desire to unopen the carte y'all should click the correct corner unopen icon.
Now a days this type of mutual carte is using inward the websites. This is likewise ane of the user friendly. This carte fully done past times using pure css3 code, Without whatever help of javascript in addition to jquery. I promise this illustration is real useful for the developers. Here nosotros convey the demonstrate page, Please depository fiscal establishment represent out the demonstrate page inward 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.publishertrend.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;
}
torso {
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: