collapsed sidebar
Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.
revision:
Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.
code:
<div class="ex1">
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">Photography</a>
<a href="#">History</a>
<a href="#">Photographers</a>
<a href="#">Regions</a>
<a href="#">Celebs</a>
<a href="#">Foodstuff</a>
<a href="#">Plants</a>
<a href="#">Videos</a>
<a href="#">Blog</a>
<a href="#">Your comments</a>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>
<h3>collapsed sidebar</h3>
<p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "10vw";
document.getElementById("main").style.marginLeft = "10vw";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
<style>
.ex1{display: flex; height: 25vw;}
.sidebar{height: 20vw; width: 0; position: fixed; z-index: 1; top: 30vw; left: 0;
background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 2vw; }
.sidebar a {padding: 0.25vw 0.25vw 0.25vw 2vw; text-decoration: none; font-size: 1vw;color: burlywood; display: block; transition: 0.3s; }
.sidebar a:hover { color: cyan; }
.sidebar .closebtn {position: absolute;top: 0; right: 1vw; font-size: 1vw; margin-left: 1vw;}
.openbtn {font-size:1vw;cursor:pointer;background-color:#111; color:white; padding: 1vw 1vw; border:none; }
.openbtn:hover {background-color: lightgreen; }
h3, p{margin-left:1vw;}
#main {height: 25vw; transition: margin-left .5s;}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
code:
<div class="container">
<div class="lines-box">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<ul class="menu">
<li><a href="#" class="outer">Coverage</a></li>
<li><a href="#" class="outer blog">Blog</a>
<ul class="blog-child">
<li><a href="#" class="inner">Coding</a></li>
<li><a href="#" class="inner">Events</a></li>
<li><a href="#" class="inner">Culture</a></li>
</ul>
</li>
<li><a href="#" class="outer sports">Sports</a>
<ul class="sports-child">
<li><a href="#" class="inner">Cycling</a></li>
<li><a href="#" class="inner">Soccer</a></li>
<li><a href="#" class="inner">Tennis</a></li>
</ul>
</li>
<li><a href="#" class="outer news">News</a>
<ul class="news-child">
<li><a href="#" class="inner">International</a></li>
<li><a href="#" class="inner">National</a></li>
<li><a href="#" class="inner">Local</a></li>
</ul>
</li>
<li><a href="#" class="outer contact">Contacts</a>
<ul class="contact-child">
<li><a href="#" class="inner">Email</a></li>
<li><a href="#" class="inner">Social Media</a></li>
<li><a href="#" class="inner">Address</a></li>
</ul>
</li>
<li><a href="#" class="outer">About</a></li>
</ul>
<div class="pointer"></div>
</div>
<script>
let cont = document.querySelector(".lines-box");
let menu = document.querySelector(".menu");
let pointer = document.querySelector(".pointer");
let blog = document.querySelector(".blog");
let sports = document.querySelector(".sports");
let news = document.querySelector(".news");
let contact = document.querySelector(".contact");
let blogChild = document.querySelector(".blog-child");
let sportsChild = document.querySelector(".sports-child");
let newsChild = document.querySelector(".news-child");
let contactChild = document.querySelector(".contact-child");
cont.addEventListener("click", () => {
blog.classList.remove("content");
sports.classList.remove("content");
news.classList.remove("content");
contact.classList.remove("content");
if(menu.style.maxHeight){
menu.style.maxHeight = null;
blogChild.style.maxHeight = null;
sportsChild.style.maxHeight = null;
newsChild.style.maxHeight = null;
contactChild.style.maxHeight = null;
pointer.style.display = "none";
setTimeout(() => {
pointer.classList.remove("pointer-up");
pointer.style.display = "block";
}, 500);
}else{
menu.style.maxHeight = menu.scrollHeight + "px";
pointer.style.display = "none";
setTimeout(() => {
pointer.classList.toggle("pointer-up");
pointer.style.display = "block";
}, 500);
}
})
pointer.addEventListener("click", () => {
blog.classList.remove("content");
contact.classList.remove("content");
if(menu.style.maxHeight){
menu.style.maxHeight = null;
blogChild.style.maxHeight = null;
sportsChild.style.maxHeight = null;
newsChild.style.maxHeight = null;
contactChild.style.maxHeight = null;
pointer.style.display = "none";
setTimeout(() => {
pointer.classList.remove("pointer-up");
pointer.style.display = "block";
}, 500);
}else{
menu.style.maxHeight = menu.scrollHeight + "px";
pointer.style.display = "none";
setTimeout(() => {
pointer.classList.toggle("pointer-up");
pointer.style.display = "block";
}, 500);
}
})
blog.addEventListener("click", () => {
if(blogChild.style.maxHeight){
blogChild.style.maxHeight = null;
blog.classList.add("btn-anime");
blog.classList.remove("content");
setTimeout(() => {
blog.classList.remove("btn-anime");
}, 100);
}else{
blogChild.style.maxHeight = blogChild.scrollHeight + "px";
menu.style.maxHeight = menu.scrollHeight + blogChild.scrollHeight + "px";
blog.classList.add("btn-anime");
blog.classList.add("content");
setTimeout(() => {
blog.classList.remove("btn-anime");
}, 100);
}
})
sports.addEventListener("click", () => {
if(sportsChild.style.maxHeight){
sportsChild.style.maxHeight = null;
sports.classList.add("btn-anime");
sports.classList.remove("content");
setTimeout(() => {
sports.classList.remove("btn-anime");
}, 100);
}else{
sportsChild.style.maxHeight = sportsChild.scrollHeight + "px";
menu.style.maxHeight = menu.scrollHeight + sportsChild.scrollHeight + "px";
sports.classList.add("btn-anime");
sports.classList.add("content");
setTimeout(() => {
sports.classList.remove("btn-anime");
}, 100);
}
})
news.addEventListener("click", () => {
if(newsChild.style.maxHeight){
newsChild.style.maxHeight = null;
news.classList.add("btn-anime");
news.classList.remove("content");
setTimeout(() => {
news.classList.remove("btn-anime");
}, 100);
}else{
newsChild.style.maxHeight = newsChild.scrollHeight + "px";
menu.style.maxHeight = menu.scrollHeight + newsChild.scrollHeight + "px";
news.classList.add("btn-anime");
news.classList.add("content");
setTimeout(() => {
news.classList.remove("btn-anime");
}, 100);
}
})
contact.addEventListener("click", () => {
if(contactChild.style.maxHeight){
contactChild.style.maxHeight = null;
contact.classList.add("btn-anime");
contact.classList.remove("content");
setTimeout(() => {
contact.classList.remove("btn-anime");
}, 100);
}else{
contactChild.style.maxHeight = contactChild.scrollHeight + "px";
menu.style.maxHeight = menu.scrollHeight + contactChild.scrollHeight + "px";
contact.classList.add("btn-anime");
contact.classList.add("content");
setTimeout(() => {
contact.classList.remove("btn-anime");
}, 100);
}
})
</script>
<style>
.lines-box{width:6vw; margin-left:0; cursor:pointer; border:0.2vw solid turquoise; border-radius:1vw;}
.lines-box:hover{background-color:darkgrey;border:0.2vw solid burlywood;}
.line{height:0.3vw; margin:0.5vw;border-radius:5%; background-color: white;margin-right:auto;transition:width 0.5s ease-out;}
.line-1{width:5vw;}
.line-2{width:4vw;}
.line-3{width:3vw;}
.lines-box:hover .line-1{width:3vw; background-color: cyan;}
.lines-box:hover .line-2{width:4vw; background-color: cyan;}
.lines-box:hover .line-3 {width:5vw; background-color: cyan;}
.menu{width:60vw; list-style-type:none; border-bottom:0.1vw solid black; max-height:0; overflow:hidden; transition:max-height 0.5s linear;position:relative; margin: 0 auto;}
.pointer{width: 0; border-width: 1vw; border-style: solid; border-color: white #171618 #171618 #171618 ; margin-left: 50%; transform: translateX(-50%);
cursor: pointer;}
.pointer:hover{border-color:cyan #171618 #171618 #171618;}
.pointer-up{border-color:#826e53 #826e53 white #826e53;transform: translateY(-2vw);}
.pointer-up:hover{border-color: #826e53 #826e53 cyan #826e53;}
.blog-child, .contact-child, .sports-child, .news-child{max-height: 0vw; overflow: hidden; transition: all 0.5s linear;}
a.outer{display: block; color:whitesmoke; text-decoration: none; margin-top: 0.2vw; background-color:DarkSlateGray; padding: 1vw; transition: all 0.5s linear;}
a.inner{text-decoration: none; color: whitesmoke; display: block; padding: 0.5vw 3vw; border: 1px solid #171618; opacity: 0.8; transition: all 0.5s linear;}
a.inner:hover{border:1px solid wheat; opacity: 1; }
.blog, .sports, .news, .contact{position: relative;cursor: inherit;pointer-events: none;}
.blog::after, .sports::after, .news::after, .contact::after{content: "+"; cursor: pointer; pointer-events: all; width: 2vw;height: 2vw; color: black;
background-color: white; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; position: absolute; right: 5%;
box-shadow: 1px 3px 1px 1px #171618 ; transition: background-color 0.5s linear;}
.blog:hover::after, .sports:hover::after, .news:hover::after, .contact:hover::after{background-color: cyan;}
.btn-anime::after{right: 4.8%; bottom: 20%; box-shadow: 0px 0px 0px 0px #171618 ;}
.content::after{content: "\2212";}
</style>