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' %}

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription neede...

Tab Component Section - Pure CSS

Add a tab component as a section which means, you can add it to any pages in Shopify 2.0, like pr...

Add WhatsApp to Shopify for Free - No App or Subscription

Add WhatsApp to your Shopify website without app or subscription. Personalize the icon with your ...

Product / Card Automatic Swipeable Carousel / Slider for Most of Shopify Theme

Add a carousel / slider for your product or card without an app or external library. This work in...

Awesome slideshow for most of Shopify Themes - Work well with Dawn

Awesome slideshow with 11 unique designs to choose from. No app or subscription needed. No coding...

Adding a Gallery Section for Shopify Website

Add your images as a gallery using grid. This should work in most of the shopify theme.

Update your Product Page to Shopify 2.0 - Just like Dawn

Not ready for Dawn Theme but would like to update your Debut theme's product page just like Dawn?...

Create a Collage with Repositionable or Dynamic Blocks in Shopify Page

Positional items using grid. You can add video, images, custom content and product.

2 comentários

@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

Deixe um comentário