Crie uma barra lateral deslizante sem limites de CSS puro, SEM APP ou assinatura

< div class = "sideBar_container" >
 < tipo de entrada = "caixa de seleção" classe = "menu_btn" id = "menu_toggle" >

 < rótulo para = "menu_toggle" class = "menu_icon" > 
< span class = "menu" >< / span >
 < / etiqueta >

 < div class = "sideBar_overlay" id = "sideBar_overlay" >
 
< div class = "sideBar" id = "sideBar" >

 < h4 class = "sideBar_title" > { { seção. configurações . sideBar_title } } < / h4 >
 
< input type = "checkbox" class = "menu_btn" id = "menu_toggle" verificado >

 < rótulo para = "menu_toggle" class = "inside_menu_icon menu_icon" >
 
< span class = "menu inside_menu" >< / span >

 < / etiqueta >

 < div class = "sideBar_inner" >

 < div class = "top_menu" >
 
{ % atribuir link = listas de links [ seção. configurações . sidebar_top_link_list ] . link % }

 <ul> { % para link em listas de links [ seção. configurações . sidebar_top_link_list ] . ligações % }
 
< div class = "link_details" >

 < li >< a class = "link_title" href = " {{ link.url }} " > { { link. título } } < / a >
 
{ % atribuir child_list_handle = link. título | manipular % }

 { % atribuir lista_filho = listas de links [ handle_lista_filho ] % }

 { % se lista_crianças ! = em branco % }
 
{ % atribuir link_filho = lista_filho. ligações % }

 < tipo de entrada = "caixa de seleção" class = "dropDown_btn" id = { { link. título } } >
 
< rótulo para = { { link. título } } classe = "dropDown_icon" >

 < span class = "dropDown" >< / span >

 < / etiqueta >
 
{ % para child_link em child_list. ligações % }

 < ul class = "dropDown_container" >
 
< li >< a class = "child_title" href = " {{ child_link.url }} " > { { child_link. título } } < / a >< / li >


 
{ % atribuir neto_lista_handle = link_filho. título | manipular % }

 { % atribuir lista_neto = listas de links [ manual_lista_neto ] % }
 
{ % se lista_netos ! = em branco % }

 { % atribuir neto_link = neto_lista. ligações % }
 
< tipo de entrada = "caixa de seleção" class = "dropDown_btn" id = { { child_link. título } } >
 
< rótulo para = { { filho_link. título } } classe = "gCdropDown_icon dropDown_icon" >

 < span class = "dropDown" >< / span >
 
< / etiqueta >

 { % para grandchild_link em grandchild_list. ligações % }

 < ul class = "dropDown_container" >
 
< li >< a class = "grandchild_title" href = " {{ grandchild_link.url }} " > { { grandchild_link. título } } < / a >< / li >
 
< / ul >

 { % fim para % }

 { % fim se % }

 < / ul >

 { % fim para % }
 
{ % fim se % }

 < / li >

 < / div >

 { % fim para % }

 < / ul >

 < / div >
 
< div class = "bottom_menu" >

 { % atribuir link = listas de links [ seção. configurações . sidebar_bottom_link_list ] . link % }
 
<ul> { % para link em listas de links [ seção. configurações . sidebar_bottom_link_list ] . ligações % }

 < div class = "link_details" >
 
< li >< a class = "link_title" href = " {{ link.url }} " > { { link. título } } < / a >
 
{ % atribuir child_list_handle = link. título | manipular % }



 { % atribuir lista_filho = listas de links [ handle_lista_filho ] % }





 { % se lista_crianças ! = em branco % }
 
{ % atribuir link_filho = lista_filho. ligações % }



 < tipo de entrada = "caixa de seleção" class = "dropDown_btn" id = { { link. título } } >


 
< rótulo para = { { link. título } } classe = "dropDown_icon" >



 < span class = "dropDown" >< / span >


 
< / etiqueta >



 { % para child_link em child_list. ligações % }

 < ul class = "dropDown_container" >
 
< li >< a class = "child_title" href = " {{ child_link.url }} " > { { child_link. título } } < / a >< / li >


 
{ % atribuir neto_lista_handle = link_filho. título | manipular % }

 { % atribuir lista_neto = listas de links [ manual_lista_neto ] % }
 
{ % se lista_netos ! = em branco % }

 { % atribuir neto_link = neto_lista. ligações % }
 
< tipo de entrada = "caixa de seleção" class = "dropDown_btn" id = { { child_link. título } } >
 
< rótulo para = { { filho_link. título } } classe = "gCdropDown_icon dropDown_icon" >

 < span class = "dropDown" >< / span >
 
< / etiqueta >

 { % para grandchild_link em grandchild_list. ligações % }

 < ul class = "dropDown_container" >
 
< li >< a class = "grandchild_title" href = " {{ grandchild_link.url }} " > { { grandchild_link. título } } < / a >< / li >
 
< / ul >

 { % fim para % }

 { % fim se % }

 < / ul >

 { % fim para % }
 
{ % fim se % }

 < / li >





 < / div >

 { % fim para % }

 < / ul >
 
< / div >

 { %- atribuir redes sociais = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo" | dividir : ' ' -% }

 { %- se configurações. link_social_twitter ! = em branco
 
ou configurações. link_social_facebook ! = em branco

 ou configurações. link_social_pinterest ! = em branco

 ou configurações. link_social_instagram ! = em branco

 ou configurações. social_tumblr_link ! = em branco
 
ou configurações. link_social_snapchat ! = em branco

 ou configurações. link_social_youtube ! = em branco

 ou configurações. link_social_vimeo ! = em branco

 ou solicitação. page_type == 'artigo'

 ou solicitação. page_type == 'blog'
 
-% }

 { %- atribuir social_icons = true -% }

 < ul class = "social_icon" >

 { %- para redes sociais em redes sociais -% }
 
{ %- atribuir social_link = social | acrescentar : 'social_' | acrescentar : '_link' | minúscula -% }

 { %- atribuir icon_link = social | acrescentar : 'ícone-' | minúscula -% }
 
{ % -se configurações [ social_link ] ! = em branco -% }

 < li class = "social-icons__item" >
 
<a class = "social-icons__link" href = " {{ settings[social_link] | escape }} " > _ _ _ _ {{ settings[social_link] | escape }} _

 { % -incluir icon_link -% }
 
< span class = "icon_-text" > { { social } } < / span >

 < / a >

 < / li >

 { %- fim se -% }
 
{ % fim para % }

 < / ul >

 { %- fim se -% }

 < / div >
 < / div >
 < / div > 
< / div >
 <estilo> _

 /*======== Ícone do menu =========*/

 /* oculta a caixa de seleção de entrada */

 . menu_btn {

 Mostrar nenhum ;

 }

 . menu_icon {

 altura : 50px ;

 largura : 50px ;
 
cor de fundo : rgba ( 0 , 0 , 0 , 0,2 ) ;

 posição : relativa ;

 margem : 20px 30px ; /* ajusta o posicionamento conforme necessário */

 cursor : ponteiro ;

 índice z : 9 ;

 }
 
. menu_icon : passe o mouse {

 fundo - cor : { { seção. configurações . sideBar_bg } } ;

 }

 . cardápio {

 topo : 50 % ;

 esquerda : 50 % ;
 
transformar : traduzir ( -50 % , -50 % ) ;

 }

 /* precisa mencionar o conteúdo */

 . cardápio , . menu :: antes , . menu :: depois de {

 contente : '' ;
 
altura : 5px ;

 largura : 30px ;

 posição : absoluta ;

 transformação - origem : centro ;

 fundo - cor : { { seção. configurações . cor do link } } ;

 }

 . menu :: antes de {
 
superior : - 10px ;

 }

 . menu :: depois de {

 inferior : - 10px ;

 }

 /* tem que nomear os filhos .menu_icon para exibir já que span é neto */

 . menu_btn : verificado ~. menu_icon . cardápio {

 fundo : transparente ;
 
}


 . menu_btn : verificado ~. menu_icon . menu :: antes de {

 transformar : girar ( 45 graus ) ;

 topo : 0 ;

 posição : absoluta ;

 }
 
. menu_btn : verificado ~. menu_icon . menu :: depois de {

 transformar : girar ( -45 graus ) ;

 topo : 0 ;

 posição : absoluta ;

 índice z : 1 ;

 }

 
/* função btn do menu */

 . menu_btn : verificado ~. sideBar_overlay {

 visibilidade : visível ;

 }

 . menu_btn : verificado ~. sideBar_overlay . Barra Lateral {

 largura : 400px ;

 }

 /*======== Barra Lateral =========*/

 . inside_menu_icon {
 
margem superior : 7px ;

 margem esquerda : 7px ! importante ;

 posição : relativa ;

 }



 . sideBar_overlay {

 visibilidade : oculta ;

 largura : 100 % ;

 altura : 100 % ;
 
margem : 0 ;

 topo : 0 ;

 posição : fixa ;

 cor de fundo : rgba ( 0 , 0 , 0 , 0,7 ) ;

 índice z : 11 ;

 }



 . Barra Lateral {
 
largura : 0 ;

 altura : 100 % ;

 topo : 0 ;

 posição : fixa ;

 fundo - cor : { { seção. configurações . sideBar_bg } } ;

 estourar : rolar ;
 
posição : relativa ;

 exibição : flexível ;

 flex - direction : coluna ;

 transição : todos os .3s facilitam ;

 }



 . sideBar_title {

 altura : 10 % ;

 largura : 70 % ;

 posição : absoluta ;
 
esquerda : 50 % ;

 transformar : traduzir ( -50 % , 10 % ) ;

 cor : { { seção. configurações . cor_do_título } } ;
 
tamanho da fonte : 25px ; /* edita o tamanho da fonte */

 alinhamento de texto : centro ;

 }



 . sideBar_title : pairar {

 cor : { { seção. configurações . título_hover } } ;

 }


 
. sideBar_inner {

 altura : 100 % ;

 largura : 100 % ;

 posição : absoluta ;

 top 5 % ;

 esquerda : 50 % ;
 
transformar : traduzir ( -50 % , 0 ) ;

 preenchimento : 10 % ;

 }



 . menu de cima , . menu inferior {

 margem inferior : 20px ;

 }

 /*======== Lista de links =========*/
 
. link_title {

 cor : { { seção. configurações . cor do link } } ;

 tamanho da fonte : 18px ;

 alinhamento de texto : centro ;

 posição : relativa ;

 exibição : flexível ;

 }

 
. link_title : passe o mouse {

 cor : { { seção. configurações . ligação suspendida } } ! importante ;

 }



 . link_detalhes {

 estilo de lista : nenhum ;

 }


 /*======== Menu suspenso =========*/
 
/* se o link tiver um submenu, o menu suspenso será exibido*/

 . dropDown_btn {

 Mostrar nenhum ;

 largura : 0 ;

 altura : 0 ;

 topo : 0 ;

 }


 . dropDown_icon {

 altura : 25px ;
 
largura : 30 % ;

 posição : relativa ;

 flutuar : certo ;

 margem : - 25px ;

 }



 . gCdropDown_icon {

 esquerda : - 5px ;

 }


 
. suspenso , . suspenso :: depois de {

 contente : '' ;

 altura : 3px ;

 largura : 15px ;

 fundo - cor : { { seção. configurações . cor do link } } ;

 posição : absoluta ;
 
topo : 50 % ;

 esquerda : 50 % ;

 transformar : traduzir ( -50 % , -50 % ) ;
 }



 . suspenso :: depois de {
 
transformar : girar ( 90 graus ) ;

 visibilidade : visível ;

 topo : 0 ;

 esquerda : 0 ;

 }

 . dropDown_btn : verificado ~. dropDown_icon . suspenso :: depois de {

 visibilidade : oculta ;
 
}



 . dropDown_btn : verificado ~. dropDown_container {

 exibição : bloco ;

 transição : todos os .3s facilitam ;

 }



 . dropDown_container {

 Mostrar nenhum ;

 margem esquerda : 10 % ;

 tamanho da fonte : 16px ;
 
estilo de lista : nenhum ;

 cor : { { seção. configurações . cor do link } } ! importante ;

 }



 . dropDown_container : pairar {
 
fundo - cor : { { seção. configurações . ligação suspendida } } ! importante ;

 }



 . filho_título {

 cor : { { seção. configurações . cor do link } } ! importante ;

 }

 
/*======== Redes Sociais =========*/

 /* CSS pode ser adiado em outro tema do Shopify - ajuste CSS quando apropriado */

 . ícones_sociais {

 altura : 50px ;

 largura : 100 % ;

 inferior : 0 ;

 posição : absoluta ;

 }



 . social - ícones__item {
 
tamanho da fonte : 20px ;

 }



 . ícone_ - texto {

 margem esquerda : 10px ;

 }



 . social - ícones__item : hover {
 
fundo - cor : { { seção. configurações . ligação suspendida } } ! importante ;

 }

 < / estilo >


 { % esquema % }

 {

 "nome" : {
 
"cs" : "Nabídka v postranní liště" ,

 "da" : "Sidebjælkemenu" ,

 "de" : "Seitenleistenmenü" ,

 "pt" : "Menu da barra lateral" ,

 "es" : "Menu da barra lateral" ,

 "fi" : "Sivupalkkivalikko" ,

 "fr" : "Menu da barra lateral" ,
 
"it" : "Barra lateral do menu" ,

 "ja" : "サイドバーメニュー" ,

 "ko" : "사이드바 메뉴" ,

 "nb" : "Sidepanelmeny" ,

 "nl" : "Zijbalkmenu" ,

 "pl" : "Menu paska bocznego" ,

 "pt-BR" : "Menu lateral" ,
 
"pt-PT" : "Menu lateral" ,

 "sv" : "Sidomeny" ,

 "th" : "เมนูแถบด้านข้าง" ,

 "tr" : "Yançubuk menusü" ,

 "vi" : "Menu thanh ben" ,

 "zh-CN" : "侧边栏菜单" ,

 "zh-TW" : "側邊欄選單"
 
} ,



 "class" : "seção de menu da barra lateral" ,

 "configurações" : [

 {

 "tipo" : "lista_links" ,

 "id" : "sidebar_top_link_list" ,

 "rótulo" : {

 "cs" : "Primární nabídka" ,
 
"da" : "Primeiro menu" ,

 "de" : "Hauptmenü" ,

 "pt" : "Menu principal" ,

 "es" : "Menu primário" ,

 "fi" : "Ensisijainen valikko" ,

 "fr" : "Menu principal" ,

 "it" : "Menu principal" ,
 
"ja" : "プライマリメニュー" ,

 "ko" : "기본 메뉴" ,

 "nb" : "Primærmeny" ,

 "nl" : "Primeiro menu" ,

 "pl" : "Menu brilhante" ,

 "pt-BR" : "Menu principal" ,

 "pt-PT" : "Menu primário" ,
 
"sv" : "Primärmeny" ,

 "th" : "เมนูหลัก" ,

 "tr" : "Birincil menu" ,

 "vi" : "Menu chinh" ,

 "zh-CN" : "主菜单" ,

 "zh-TW" : "主要選單"

 } ,
 
"default" : "menu principal"

 } ,

 {

 "tipo" : "lista_links" ,

 "id" : "sidebar_bottom_link_list" ,

 "rótulo" : {

 "cs" : "Vedlejší nabídka" ,

 "da" : "Menu extra" ,
 
"de" : "Zusatzmenü" ,

 "pt" : "Menu adicional" ,

 "es" : "Menu adicional" ,

 "fi" : "Lisävalikko" ,

 "fr" : "Menu suplementar" ,

 "it" : "Menu adicional" ,

 "ja" : "追加メニュー" ,
 
"ko" : "추가 메뉴" ,

 "nota" : "Tilleggsmeny" ,

 "nl" : "Menu extra" ,

 "pl" : "Menu Dodatkowe" ,

 "pt-BR" : "Menu adicional" ,

 "pt-PT" : "Menu adicional" ,

 "sv" : "Ytterligare meny" ,
 
"th" : "เมนูเพิ่มเติม" ,

 "tr" : "Ek menu" ,

 "vi" : "Menu cantado" ,

 "zh-CN" : "其他菜单" ,

 "zh-TW" : "附加選單"

 } ,

 "padrão" : "rodapé"

 } ,

 {
 
"tipo" : "cor" ,

 "id" : "sideBar_bg" ,

 "label" : "Cor de fundo da barra lateral" ,

 "default" : "#87ceeb"

 } ,

 {

 "tipo" : "texto" ,

 "id" : "sideBar_title" ,
 
"rótulo" : {

 "pt" : "Título da barra lateral"

 } ,

 "padrão" : {

 "pt" : "Barra lateral personalizada"

 }

 } ,

 {

 "tipo" : "cor" ,

 "id" : "title_color" ,
 
"label" : "Cor da fonte do título" ,

 "padrão" : "#254145"

 } ,

 {

 "tipo" : "cor" ,

 "id" : "title_hover" ,

 "label" : "Cor do título ao passar o mouse" ,

 "padrão" : "#94F7E9"

 } ,
 
{

 "tipo" : "cor" ,

 "id" : "link_color" ,

 "label" : "Cor da fonte do link" ,

 "padrão" : "#254145"

 } ,

 {

 "tipo" : "cor" ,

 "id" : "link_hover" ,
 
"label" : "Cor do link flutuante" ,

 "padrão" : "#94F7E9"

 }

 ]

 }

 { % termina o esquema % }

< tipo de entrada = "caixa de seleção" classe = "menu_btn" id = "menu_toggle" >
 
< label class = "menu_icon" onclick = "openNav()" >

 < span class = "menu" >< / span >

 < / etiqueta > 

< input type = "checkbox" class = "menu_btn" id = "menu_toggle" verificado >

 < label class = "inside_menu_icon menu_icon" onclick = "closeNav()" >
 
< span class = "menu inside_menu" >< / span >

 < / etiqueta > 

<roteiro> _

 função openNav ( ) {
 
documento. getElementById ( "sideBar" ) . estilo . largura = "400px" ;

 documento. getElementById ( "sideBar_overlay" ) . estilo . visibilidade = "visível" ;

 }

 função fecharNav ( ) {
 
documento. getElementById ( "sideBar" ) . estilo . largura = "0" ;

 documento. getElementById ( "sideBar_overlay" ) . estilo . visibilidade = "oculto" ;

 }

 < / roteiro >