Sliding Sidebar as Snippet

Sliding Sidebar as Snippet

Create A Snippet for Sidebar

See video on what it looks like but follow instructions below on how to implement the code.


1. First, we have to add a Sidebar menu in the Navigation
Go to Online Store >Navigation> Click Add menu.
2. Make sure you write title "Sidebar Menu"
3. Link collections you want to show
4. Click "save menu"
5. Then, we need to go to Online store> Themes> Actions> Edit code>
6. Go to Snippets folder, create a new snippet and name it custom-sidenav. Replace the code below, then click SAVE

<style>
.sidenav {
height: 90%;
width: 0;
position: fixed;
z-index: 5;
top: 100;
left: 10;
background-color: {{ background_color }};
overflow-x: hidden;
transition: 0.3s;
padding-top: 10px;
}

.sidenav a {
padding: 8px 8px 8px 15px;
text-decoration: none;
font-size: 20px;
color: {{ font_color}};
line-height: 20px;
display: block;
transition: 0.3s;
}

.sidenavTitle {
color: {{ title_font_color }};
font-size: 20px;
}
.sidenav a:hover {
color: {{ title_hover_color }};
}
/* Dancing Title */
.dancing {
height: 10%;
width: 50%;
font-size:20px;
color: {{ dancing_title_color }};
border: 0;
padding: 10px 20px;
position: relative;
padding-left: 40px;
word-wrap: break-word;
animation-name: shake;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
cursor:pointer;
}

.dancing :hover {
color: {{ dancing_title_hoover_color }};
animation-duration: 5s;

}

@keyframes shake {
0% { transform: translate(2px, 2px) rotate(0deg); }
10% { transform: translate(-2px, -3px) rotate(-3deg); }
20% { transform: translate(-4px, 1px) rotate(3deg); }
30% { transform: translate(4px, 3px) rotate(2deg); }
40% { transform: translate(2px, -5px) rotate(3deg); }
50% { transform: translate(-2px, 3px) rotate(-3deg); }
60% { transform: translate(-4px, 2px) rotate(0deg); }
70% { transform: translate(4px, 2px) rotate(-3deg); }
80% { transform: translate(-2px, -5px) rotate(3deg); }
90% { transform: translate(2px, 3px) rotate(0deg); }
100% { transform: translate(4px, -2px) rotate(-3deg); }
}

.dropdown-btn {
text-decoration: none;
font-size: 30px;
color: {{ dropdown_color }};
border: none;
background: none;
cursor: pointer;
outline: none;
margin-left: 0;
padding: 0;
margin-right: 25px;
}

.dropdown-container {
display: none;
padding-left: 30px;
}

@media screen and (max-height: 450px) {
.sidenavTitle {
font-size: 10px; };
.sidenav {padding-top: 10px;
padding-left: 10px;
z-index: 9999;}
.sidenav a {font-size: 20px;
z-index: 9999;}
}

</style>

<div id="mySidenav" class="sidenav" onmouseleave="closeNav()" onclick="closeNavClick()">
<div class="grid grid__item small-up--two-thirds" >
<h3 class="sidenavTitle text-center" > {{ sidenav_title }} </h3>

{% assign sidebar_link = linklists.sidebar-menu.links %}
<ul> {% for sidebar in sidebar_link %}
<li> <a href="{{ sidebar.url }}">{{ sidebar.title }}</a>
<button class="dropdown-btn">
{% assign child_list_handle = sidebar.title | handleize %}
{% assign child_list = linklists[child_list_handle] %}
{% for child_link in child_list.links %}
{% if child_list != blank %}
<strong>+</strong>
</button>
<ul class="dropdown-container">
<li><a href="{{ child_link.url }}">{{ child_link.title }}</a></li>
</ul>
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>

</div>
</div>

<div class= "dancing">
<span onclick="openNav()">
<h3>{{ dancing_title }}</h3>
</span>
</div>

<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.body.style.backgroundColor = 'rgba(0,0,0,0)';
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}

document.addEventListener('mousedown',function(event){
var side_dom = document.getElementById("mySidenav")
if(side_dom.style.width == '250px'){
if(!side_dom.contains(event.target)){
document.getElementById("mySidenav").style.width = "0";
}
}
})

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");

var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
this.innerHTML = "<strong>+</strong>";
} else {
dropdownContent.style.display = "block";
this.innerHTML = "<strong>-</strong>";

}
});
}
</script>

7. Replace the code in green to real value. 
8. Go to Section folder and open header.liquid. Before </header>, place the code below, then click SAVE
{% render 'custom-sidenav' %}

Scheduled Bar or Banner Section

Add multiple bar section in your website. Works with most all of Shopify themes.

Color Swatch for Dawn with Images- No App or Subscription needed

Add a color swatch to your Dawn Theme for FREE. Color swatch comes with image. Multiple design av...

Add Custom Textfield / Dropdown in Dawn Theme Shopify 2.0 - No APP needed

Add a personalize textbox to Dawn product page. You can add dropdown, radio buttons and many more...

Convert Dawn Product Page Like Debut Theme with Product Slider

Product slider but counter does not make sense? See my way around. Transform your Dawn product pa...

How to make hero image the background for header - DAWN Theme

Hero image to be the background for header. It is possible. Just follow the steps below. I recomm...

Featured collection slider for Dawn Theme Shopify 2.0

Add a collection slider for your home page. This only works with Dawn Theme.

2 comments

@Terry Marie This is the other way of adding a sliding bar extension on my previous video. I did attached the video but do not follow the video for instructions

Made4uo

Is there no video or image of what it looks like??

Terry Marie

Leave a comment