8 etapas para adicionar barra de navegação lateral deslizante personalizada de dança

Crie uma navegação lateral deslizante personalizável e atraente. Personalize a barra lateral sem destruir seu código. Abaixo estão as etapas para adicionar a barra lateral deslizante ao seu Shopify - Debut Theme. Esta barra deslizante será exibida em todas as páginas do seu site.

Para iniciar:

1. Primeiro, temos que adicionar um menu da Barra Lateral na Navegação
Vá para Loja Online > Navegação > Clique no menu Adicionar.
2. Certifique-se de escrever o título "Menu da barra lateral"
3. Vincule as coleções que você deseja mostrar
4. Clique em "salvar menu"
5. Em seguida, precisamos ir para Loja online> Temas> Ações> Editar código>
6. Vá para a pasta Seção, crie uma nova seção e nomeie-a como custom-sidenav. Substitua o código abaixo e clique em SALVAR

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

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

.sidenavTitle {
color: {{ section.settings.color_sidenav_title}};
font-size: 20px;
}
.sidenav a:hover {
color: {{ section.settings.color_sidenav_hoover }};
}
/* Dancing Title */
.dancing {
height: 10%;
width: 50%;
font-size:20px;
color: {{ section.settings.color_heading }};
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: {{ section.settings.color_title_hoover }};
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: {{ section.settings.color_sidenav_contents}};
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" > {{ section.settings.sidenav_title | escape }} </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>{{ section.settings.title | escape }}</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>


{% schema %}
{
"name": {
"en": "Sliding Side Nav"
},
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": {
"en": "Slide Title"
},
"default": {
"en": "See Collection"

}
},
{
"type": "color",
"id": "color_heading",
"label": "Slide Title Font Color",
"default": "#2C2828"
},
{
"type": "color",
"id": "color_title_hoover",
"label": "Title Hoover Color",
"default": "#30e3ca"
},
{
"type": "text",
"id": "sidenav_title",
"label": {
"en": "Inside Nav Title"
},
"default": {
"en": "Collection"

}
},
{
"type": "color",
"id": "color_sidenav_title",
"label": "Inside Nav Title Font Color",
"default": "#2C2828"
},
{
"type": "color",
"id": "color_sidenav_contents",
"label": "Inside Nav Font Color",
"default": "#2C2828"
},
{
"type": "color",
"id": "color_sidenav_hoover",
"label": "SideNav Hoover Color",
"default": "#30e3ca"
},
{
"type": "color",
"id": "sidenav_bg_color",
"label": "SideNav Background Color",
"default": "#D4FDF6"
}
]

}
{% endschema %}

7. Vá para a pasta Layout e abra theme.liquid. Após o cabeçalho da seção, coloque o código abaixo e clique em SALVAR {% section 'custom-sidenav' %} 8. Adicione a seção e personalize a seção.

Dicas: A barra lateral é criada como uma seção, então a personalização será fácil. Se você sabe um pouco sobre codificação.

Você pode criar um snippet e renderizar o código na seção de cabeçalho. Você pode substituir o código em rosa pelo valor real. Em seguida, exclua todo o código do esquema em azul. Para renderizar o código no header.liquid, basta colocar este código {% render 'custom-sidenav' %} antes do </header>.

Para obter instruções completas sobre como criar uma barra lateral de snippets, visite o link com um código.


Não se esqueça de me seguir em minha jornada para transformar meu site da Shopify.

Você pode me enviar um e-mail para yoursupport@made4uo.com se tiver alguma dúvida.

Atualizado: 31/07/2021 - adicionado algumas animações no título e um submenu
13/08/2021 - instruções de dicas adicionadas sobre como adicionar um snippet