Barra lateral deslizante como snippet

Sliding Sidebar as Snippet

O código pode não ser compatível com o seu tema.

Veja o vídeo sobre sua aparência, mas siga as instruções abaixo sobre como implementar o código.


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 em Loja online> Temas> Ações> Editar código>
6. Vá para a pasta Snippets, crie um novo snippet e nomeie-o como custom-sidenav. Substitua o código abaixo e clique em SALVAR

<estilo>
.sidenav {
altura: 90%;
largura: 0;
posição: fixa;
índice z: 5;
Os 100 melhores;
esquerda: 10;
cor de fundo: {{ background_color }} ;
overflow-x: oculto;
transição: 0,3s;
preenchimento superior: 10px;
}

.sidenav a {
preenchimento: 8px 8px 8px 15px;
decoração de texto: nenhuma;
tamanho da fonte: 20px;
cor: {{ font_color}} ;
altura da linha: 20px;
exibição: bloco;
transição: 0,3s;
}

.sidenavTitle {
cor: {{ title_font_color }} ;
tamanho da fonte: 20px;
}
.sidenav a:hover {
cor: {{ title_hover_color }} ;
}
/* Título de dança */
.dançando {
altura: 10%;
largura: 50%;
tamanho da fonte: 20px;
cor: {{ dancing_title_color }} ;
borda: 0;
preenchimento: 10px 20px;
posição: relativa;
preenchimento à esquerda: 40px;
quebra de linha: quebra de palavra;
nome da animação: shake;
duração da animação: 1s;
contagem de iterações de animação: infinito;
função de temporização de animação: facilidade;
cursor:ponteiro;
}

.dançando: pairar {
cor: {{ dancing_title_hoover_color }} ;
duração da animação: 5s;

}

@keyframes agitar {
0% {transformar: traduzir(2px, 2px) girar(0deg); }
10% {transformar: traduzir(-2px, -3px) girar(-3deg); }
20% {transformar: traduzir(-4px, 1px) girar(3deg); }
30% {transformar: traduzir(4px, 3px) girar(2deg); }
40% {transformar: traduzir(2px, -5px) girar(3deg); }
50% {transformar: traduzir(-2px, 3px) girar(-3deg); }
60% {transformação: traduzir(-4px, 2px) girar(0deg); }
70% {transformação: traduzir(4px, 2px) girar(-3deg); }
80% {transformar: traduzir(-2px, -5px) girar(3deg); }
90% {transformação: traduzir(2px, 3px) girar(0deg); }
100% {transformação: traduzir(4px, -2px) girar(-3deg); }
}

.dropdown-btn{
decoração de texto: nenhuma;
tamanho da fonte: 30px;
cor: {{ dropdown_color }} ;
fronteira: nenhuma;
histórico: nenhum;
cursor: ponteiro;
esboço: nenhum;
margem esquerda: 0;
preenchimento: 0;
margem direita: 25px;
}

.dropdown-container {
Mostrar nenhum;
preenchimento à esquerda: 30px;
}

@media screen e (altura máxima: 450px) {
.sidenavTitle {
tamanho da fonte: 10px; };
.sidenav {preenchimento superior: 10px;
preenchimento à esquerda: 10px;
índice z: 9999;}
.sidenav a {tamanho da fonte: 20px;
índice z: 9999;}
}

</estilo>

<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> {{ 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> {{ child_link.url }} {{ child_link.title }} </a></li>
</ul>
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>

</div>
</div>

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

<roteiro>
função openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.body.style.backgroundColor = 'rgba(0,0,0,0)';
}

função fecharNav() {
document.getElementById("mySidenav").style.width = "0";
}

document.addEventListener('mousedown',function(evento){
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 suspenso = document.getElementsByClassName("dropdown-btn");
var eu;
for (i = 0; i <dropdown.length; i++) {
dropdown[i].addEventListener("clique", function() {
this.classList.toggle("ativo");

var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "bloquear") {
dropdownContent.style.display = "nenhum";
this.innerHTML = "<strong>+</strong>";
} outro {
dropdownContent.style.display = "bloquear";
this.innerHTML = "<strong>-</strong>";

}
});
}
</script>


7. Substitua o código em verde pelo valor real.
8. Vá para a pasta Seção e abra header.liquid. Antes de </header>, coloque o código abaixo e clique em SALVAR

{% render 'custom-sidenav' %}

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

Anonymous •

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

Terry Marie •

Deixe um comentário