사이드바 토글메뉴 예제
html
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Quattrocento" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="menu-icon">
<div id="hamburger"></div>
</div>
<div id="sidebar">
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Gallery</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<script type="text/javascript" src="js/main.js"> </script>
</body>
</html>css
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #FAFAFA;
color: #22313F;
font-family: 'Quattrocento', serif;
}
#menu-icon {
position: fixed;
right: 60px;
top: 40px;
height: 50px;
width: 60px;
}
#menu-icon:hover {
cursor: pointer;
}
#menu-icon #hamburger {
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 4px;
width: 50px;
background-color: #22313F;
transition: all .3s;
}
#menu-icon #hamburger:before {
position:absolute;
content: '';
height: 4px;
width: 40px;
top: -10px;
background-color: #22313F;
transition: all .4s;
}
#menu-icon #hamburger:after {
position:absolute;
content: '';
height: 4px;
width: 40px;
top: 10px;
background-color: #22313F;
transition: all .3s;
}
#menu-icon:hover #hamburger::after,#menu-icon:hover #hamburger::before {
width: 50px;
}
#menu-icon:hover #hamburger{
width: 40px;
}
#menu-icon #hamburger.active{
background-color: rgba(0,0,0,0);
}
#menu-icon #hamburger.active:before{
transform: rotate(45deg);
top:0px;
width: 40px;
}
#menu-icon #hamburger.active:after{
transform: rotate(135deg);
top:0px;
width: 40px;
}
#sidebar {
position:fixed;
width: 300px;
left: -300px;
height: 100vh;
background-color:#22313F;
color:#FAFAFA;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%);
transition: all .5s;
}
#sidebar nav ul {
position: absolute;
top: 50%;
left: 50%;
list-style:none;
transform:translate(-50%, -50%);
text-align:center;
}
#sidebar nav ul li {
font-weight: 590;
font-size: 1.1em;
margin: 24px;
}
#sidebar nav ul li:hover {
cursor:pointer;
}
#sidebar.show-sidebar {
left: 0px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
transition: all .5s;
}
/*
#sidebar.hide-sidebar {
left: -300px;
-webkit-clip-path: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%);
transition: all .5s;
}
#sidebar.original-sidebar {
position:fixed;
width: 300px;
left: -300px;
height: 100vh;
background-color:#22313F;
color:#FAFAFA;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%);
transition: all .5s;
}
*/jquery
$(document).ready(function() {
$("#menu-icon").click(function(){
$("#hamburger").toggleClass('active');
$("#sidebar").toggleClass('show-sidebar');
});
});https://codepen.io/anon/pen/PeWERy
sidebar
...
codepen.io
반응형