A sidebar is a combination of various navigation links that are aligned on the left or right side of a web page that helps users to move more quickly from one page to another.
The main purpose of creating a sidebar is for small screen devices such as tablets, mobile phones.There is only one difference between side navigation bar and navigation bar, navigation bar is a large screen size device like laptop, computer and side navigation of small size devices. Then how to make a responsive sidebar menu?
How to create responsive side bar menu ?
Here are the steps:
Step 1. Go to your blogger admin dashboard. Select "Theme" menu >> select down arrow beside "Customize" then select "Edit HTML".
Step 2. In the box press "CTRL + F" to search type "navbar" find next until you see code like below.
<b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'>
Change the code become :
<b:section class='navbar' id='navbar' maxwidgets='2' name='Navbar' showaddelement='yes'>
and then save your theme.
Step 3. Select "Layout" menu, in the navbar select "Add Widget" then select "HTML/Javascript".
Step 4. Copy css code below to your widget content.
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
.sidebar2{
position: fixed;
left: 0;
top: 40px;
height: 100%;
width: 50px;
background: #6c757d;
padding: 6px 1px;
z-index: 99;
transition: all 0.5s ease;
}
.sidebar2.open{
width: 250px;
}
.sidebar2 .logo-details{
height: 60px;
display: flex;
align-items: center;
position: relative;
}
.sidebar2 .logo-details .icon{
opacity: 0;
transition: all 0.5s ease;
}
.sidebar2 .logo-details .logo_name{
color: #fff;
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.5s ease;
}
.sidebar2.open .logo-details .icon,
.sidebar2.open .logo-details .logo_name{
opacity: 1;
}
.sidebar2 .logo-details #btn{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 22px;
transition: all 0.4s ease;
font-size: 23px;
text-align: center;
cursor: pointer;
transition: all 0.5s ease;
}
.sidebar2.open .logo-details #btn{
text-align: right;
}
.sidebar2 i{
color: #fff;
height: 60px;
min-width: 30px;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.sidebar2 .nav-list{
margin-top: 20px;
height: 100%;
}
.sidebar2 li{
position: relative;
margin: 8px 0;
list-style: none;
}
.sidebar2 li .tooltip{
position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;
}
.sidebar2 li:hover .tooltip{
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar2 .logo-details .tooltip{
position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;
}
.sidebar2 .logo-details #btn:hover{
}
.sidebar2 .logo-details #btn:hover .tooltip{
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar2 li:hover i{
background: #FFF;
color: #11101d;
}
.sidebar2.open li .tooltip{
display: none;
}
.sidebar2 input{
font-size: 15px;
color: #FFF;
font-weight: 400;
outline: none;
height: 50px;
width: 100%;
width: 30px;
border: none;
border-radius: 12px;
transition: all 0.5s ease;
background: #1d1b31;
}
.sidebar2.open input{
padding: 0 20px 0 50px;
width: 100%;
}
.sidebar2 .bx-search{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 22px;
background: #6c757d;
color: #FFF;
}
.sidebar2.open .bx-search:hover{
background: #1d1b31;
color: #FFF;
}
.sidebar2 .bx-search:hover{
background: #FFF;
color: #11101d;
}
.sidebar2 li a{
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #6c757d;
}
.sidebar2 li a:hover{
background: #FFF;
}
.sidebar2 li a .links_name{
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.4s;
}
.sidebar2.open li a .links_name{
opacity: 1;
pointer-events: auto;
}
.sidebar2 li a:hover .links_name,
.sidebar li a:hover .sidebar2 li i{
transition: all 0.5s ease;
color: #02050B;
}
.sidebar2 li i{
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 12px;
}
.sidebar2 li.profile{
position: fixed;
height: 60px;
width: 50px;
left: 0;
bottom: -8px;
padding: 10px 14px;
background: #6c757d;
transition: all 0.5s ease;
overflow: hidden;
}
.sidebar2.open li.profile{
width: 250px;
}
.sidebar2 li .profile-details{
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sidebar2 li img{
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 6px;
margin-right: 10px;
}
.sidebar2 li.profile .name,
.sidebar li.profile .job{
font-size: 15px;
font-weight: 400;
color: #fff;
white-space: nowrap;
}
.sidebar2 li.profile .job{
font-size: 12px;
}
.sidebar2 .profile #log_out{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: #6c757d;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar2.open .profile #log_out{
width: 50px;
background: none;
}
.content{
position: relative;
top: 0;
left: 40px;
width: calc(100% - 40px);
transition: all 0.5s ease;
z-index: 2;
}
.sidebar2.open .content {
left: 250px;
width: calc(100% - 250px);
}
@media (max-width: 420px) {
.sidebar2 {
display: none;
}
.content-inner{
left: auto;
width: auto;
}
}
</style>
Step 5. Copy html code below and paste to widget content after css code.
<div class="sidebar2">
<div class="logo-details">
<i class='bx bxl-google icon'></i>
<div class="logo_name">Hide Menu</div>
<i class='bx bx-menu' id="btn" ></i>
<span class="tooltip">Open</span>
</div>
<ul class="nav-list">
<li>
<i class='bx bx-search' ></i>
<input type="text" placeholder="Search..." />
<span class="tooltip">Search</span>
</li>
<li>
<a href="#">
<i class='bx bx-home-alt'></i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
<li>
<a href="#">
<i class='bx bx-user' ></i>
<span class="links_name">User</span>
</a>
<span class="tooltip">User</span>
</li>
<li>
<a href="#">
<i class='bx bx-chat' ></i>
<span class="links_name">Messages</span>
</a>
<span class="tooltip">Messages</span>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="links_name">Analytics</span>
</a>
<span class="tooltip">Analytics</span>
</li>
<li>
<a href="#">
<i class='bx bx-folder' ></i>
<span class="links_name">File Manager</span>
</a>
<span class="tooltip">Files</span>
</li>
<li>
<a href="#">
<i class='bx bx-cart-alt' ></i>
<span class="links_name">Order</span>
</a>
<span class="tooltip">Order</span>
</li>
<li>
<a href="#">
<i class='bx bx-heart' ></i>
<span class="links_name">Saved</span>
</a>
<span class="tooltip">Saved</span>
</li>
<li>
<a href="#">
<i class='bx bx-cog' ></i>
<span class="links_name">Setting</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<div class="profile-details">
<!--<img src="profile.jpg" alt="profileImg">-->
<div class="name_job">
<div class="name">Nano Mh</div>
<div class="job">Web designer</div>
</div>
</div>
<i class='bx bx-log-out' id="log_out" ></i>
</li>
</ul></div>
<script>let sidebar2 = document.querySelector(".sidebar2");let closeBtn = document.querySelector("#btn");let searchBtn = document.querySelector(".bx-search");closeBtn.addEventListener("click", ()=>{sidebar2.classList.toggle("open");menuBtnChange();});searchBtn.addEventListener("click", ()=>{sidebar2.classList.toggle("open");menuBtnChange();});function menuBtnChange() {if(sidebar2.classList.contains("open")){closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");}else {closeBtn.classList.replace("bx-menu-alt-right","bx-menu");}}</script>
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'/>
Okay, that's enough for now from me, if you have any questions, please comment in the comments column. If something goes wrong I apologize. Hopefully helpful, and thank you.
"Look for someone who is willing to accept your situation, your family and your job. In fact, happiness is about being together and being grateful."
Reference:
https://www.codinglabweb.com