<body>
<div class="siderbar-gnb">
<div class="siderbar-content">
</div>
<!--.siderbar-content-->
<div class="sidebarbtn-wrap">
<div class="sidebar-btn">
<button class="sidebar-flip"></button>
</div>
</div>
</div>
<!--.siderbar-gnb-->
</body>
button {
border: 0 none;
background:0;
color:white;
outline:none;
display:block;
width:100%;
padding:20px 0;
text-align:center;
}
.sidebarbtn-wrap {
background-color: #323232;
position: absolute;
width: 39px;
padding: 20px 0;
top: 50%;
left: -40px;
}
.siderbar-gnb {
position: fixed;
right: -191px;
top:0px;
width: 190px;
background-color: #fff;
border: 1px solid #e5e5e5;
height: 100%;
box-shadow: 5px 1px 20px 0px #000;
}
.siderbar-gnb.open {
right: 0px;
}
.siderbar-content {
width: 100%;
height: 100%;
position: relative;
margin: 0 auto;
}
// cookie.js file
var cookieToday = new Date();
var expiryDate = new Date(cookieToday.getTime() + (365 * 86400000));
function setCookie(name, value, expires, path, theDomain, secure) {
value = escape(value);
var theCookie = name + "=" + value +
((expires) ? "; expires=" + String(expires) : "") +
((path) ? "; path=" + path : "") +
((theDomain) ? "; domain=" + theDomain : "") +
((secure) ? "; secure" : "");
document.cookie = theCookie;
}
function getCookie(Name) {
var search = Name + "="
if (document.cookie.length > 0) { // if there are any cookies
var offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
var end = document.cookie.indexOf(";", offset)
// set index of end of cookie value
if (end == -1) end = document.cookie.length
return unescape(document.cookie.substring(offset, end))
}
}
}
function delCookie(name, path, domain) {
if (getCookie(name)) document.cookie = name + "=" +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
";expires=Thu, 01-Jan-70 00:00:01 GMT";
}
function CookieUse(x) {
var x = String(x);
if (x === "close" || x === "undefined") {
$('.sidebar-flip').text('close');
$('.siderbar-gnb').removeClass('open');
return setCookie('dayCookie', 'close', 1, '/');
} else if (x === "open") {
//쿠키가 없으면 설정해줌
$('.sidebar-flip').text('open');
$('.siderbar-gnb').addClass('open');
return setCookie('dayCookie', 'close', 1, '/');
}
}
window.onload = function() {
CookieUse(getCookie('dayCookie'));
}
function CookieFilter(y) {
var y = String(y);
if (y === "close" || y === "undefined") {
$('.sidebar-flip').text('open');
$('.siderbar-gnb').stop().animate({
right: 0
});
return setCookie('dayCookie', "open");
} else {
$('.sidebar-flip').text('close');
$('.siderbar-gnb').stop().animate({
right: -192 + 'px'
});
return setCookie('dayCookie', "close");
}
}
document.querySelector('.sidebar-btn > .sidebar-flip').addEventListener('click', function(e) {
e.preventDefault();
CookieFilter(getCookie('dayCookie'));
});
This Pen doesn't use any external CSS resources.