Mega Menu do Shopify no tema Dawn

< nav class = "megaContainer--tablet" > 
< div class = "megaHeader megaHeader--tablet" >
 { % para bloco na seção. blocos % }
 { % atribuir blockIndex = forloop. índice0 % } 
{ % se bloco. configurações . título == 'Página inicial' % } 
< a class = "megaA" href = "/" style = "largura: 100%; alinhamento de texto: esquerda;" > { { bloco. configurações . título } } < / a >
 { % outro % } 
< div class = "megaDrawer" estilo = "largura: 100%;" >
 { % se bloco. configurações . mega_url ! = em branco % } 
< a class = "drawerbtn megaA" href = " {{block.settings.mega_url}} " style = "largura: 100%; justificar-conteúdo: espaço entre;" > { { bloco. configurações . título } } < / a > 
{ % outro % }
 < label for = "megaDrawerInput-- {{forloop.index0}} " class = "drawerbtn gavetabtn--tablet" style = "largura: 100%; justificar-conteúdo: espaço entre;" >
 { { bloquear. configurações . título } } 
{ % se bloco. configurações . mega_link ! = em branco % }
 < svg viewBox = "0 0 10 10" class = "svgDd megaSvg" dados - svg = "svgDd-- {{forloop.index0}} " > 
< caminho d = "M5,6 L5,6 L2,3 L5,6 L5,6 L8,3" / >
 < / svg >
 < svg viewBox = "0 0 10 10" class = "svgClose megaSvg" dados - svg = "svgClose-- {{forloop.index0}} " > 
< caminho d = "M2,2 L5,5 L8,8 L5,5 L8,2 L2,8" / >
 < / svg >
 { % fim se % }
 < / etiqueta > 
< input type = "checkbox" id = "megaDrawerInput-- {{forloop.index0}} " onclick = "checkInput(this)" data - input = " {{forloop.index0}} " >
 < div class = "megaDrawerContent--tablet" > 
{ % se bloco. configurações . título ! = em branco % }
 < div class = "megaDrawerHeader megaDrawerHeader--tablet" style = "cor de fundo: {{block.settings.header_bg}} " > 
<h2> { { bloco . configurações . header_title } } < / h2 >
 < / div >
 { % outro % } 
< div class = "megaDrawerHeader megaDrawerHeader--tablet" style = "cor de fundo: herdar;" > </div> _ _
 { % fim se % }
 < div class = "megaDrawerWrapper--tablet" > 
{ % se bloco. configurações . mega_link ! = em branco % }
 < div class = "megaLinkContainer" style = "flex-direction: coluna; largura: 100%;" > 
{ % para link no bloco. configurações . mega_link . ligações % } 
< div class = "megaLinkBox--tablet" { % if link. links == em branco % } estilo = "preenchimento: 0 5%" { % endif % } > 
{ % se link. links == em branco % }

 <a class = "megaLink" href = " {{link.url}} " > { { link . {{link.url}} _ _ _ título | escapar } } < / a > 
{ % outro % }
 < rótulo para = "megaLink-- {{blockIndex}} - {{forloop.index0}} " >

 < span > { { link. título | escape } } < / span > 
< span class = "arrowDown" >
 < svg viewBox = "0 0 10 10" class = "childSvgDd megaSvg" dados - svg = "childSvgDd-- {{blockIndex}} - {{forloop.index0}} " >
 < caminho d = "M5,6 L5,6 L2,3 L5,6 L5,6 L8,3" / > 
< / svg >
 < svg viewBox = "0 0 10 10" class = "childSvgClose megaSvg" dados - svg = "childSvgClose-- {{blockIndex}} - {{forloop.index0}} " >
 < caminho d = "M2,2 L5,5 L8,8 L5,5 L8,2 L2,8" / > 
< / svg >
 < / intervalo >
 < / etiqueta > 
< input type = "checkbox" id = "megaLink-- {{blockIndex}} - {{forloop.index0}} " onclick = "checkInput(this)" data - child - input = " {{blockIndex}} - {{forloop.index0}} " >
 { % fim se % } 
< div class = "childLinkContainer" >
 { % para child_link no link. ligações % } 
<a href = "{{child_link.url}}" > { { child_link . {{child_link.url}} título | escapar } } < / a >
 { % fim para % }
 < / div > 
< / div >
 { % fim para % }
 < / div >
 { % fim se % }
 < / div >
 < / div > 
{ % fim se % }
 < / div >

 { % fim se % }
 { % fim para % }
 < / div >
 < / navegação >

{ % atribuir mega_img_file = seção. configurações . mega_drawer_image | tira_html | maleta | parse_json | acrescentar : '}' | prefixar : '{' % }
 { % atribuir amostra_img = amostra | url_arquivo % }
 
< nav class = "megaContainer" style = " {% if section.settings.logo_position == 'top-center' %} grid-area: 2/-3; {% endif %} " >
 < div class = "megaHeader alinhamentoCenter" >
 { % para bloco na seção. blocos % } 
{ % se bloco. configurações . título == 'Página inicial' % } 
<a class = "megaA gavetabtn" href="/pt" > { { bloco . _ _ _ _ configurações . título } } < / a >
 { % outro % }
 
< div class = "megaDrawer alignCenter" style = "height: 50px" >
 { % se bloco. configurações . mega_url == em branco % } 
< botão class = "drawerbtn" > { { bloco. configurações . título } }
 < span > < svg viewBox = "0 -.5 11 10" class = "megaSvg" > 
< caminho d = "M5,6 L5,6 L2,3 L5,6 L5,6 L8,3" / >
 < / svg >
 < / intervalo >
 < / botão >
 { % outro % } 
<a class = "megaA gavetabtn" href = " {{block.settings.mega_url}} " > { { bloco . {{block.settings.mega_url}} _ _ _ configurações . título } } < / a >
 { % fim se % } 
{ % se bloco. configurações . mega_link ! = em branco % }
 < div class = "megaDrawerContent AbsolutPosition"
 style = "largura: {% if block.settings.mega_width == true %} 95% {% else %} min-content {% endif %} ; 
{% if section.settings.logo_position != 'middle-left' %} topo: 100% {% endif %} " >
 { % se bloco. configurações . título ! = em branco % }
 < div class = "megaDrawerHeader"
 style = "cor de fundo: {{block.settings.header_bg}} " > 
<h2> { { bloco . configurações . header_title } } < / h2 >
 < / div >
 { % outro % } 
< div class = "megaDrawerHeader"
 style = "cor de fundo: herdar;" > </div> _ _
 { % fim se % }

 < div class = "megaDrawerWrapper" > 
{ % se bloco. configurações . mega_link ! = em branco % }
 < div class = "megaLinkContainer" >
 { % para link no bloco. configurações . mega_link . ligações % } 
< div class = "megaLinkBox" style = "preenchimento: 10px" >
 < div class = "megaLinkImage" data - mega - image = " {{link.title | downcase | replace: ' ', '-' }} " >

 < / div > 
< a { % se link. links == em branco % }
 classe = "megaLink" 
href = " {{link.url}} " { % else % } style = "font-weight:600; text-align: center" { % endif % } > { { link. título | escapar } } < / a > 
{ % para child_link no link. ligações % }
 <a href = "{{child_link.url}}" > { { child_link . {{child_link.url}} título | escapar } } < / a >
 { % fim para % } 
< / div >
 { % fim para % }
 < / div >
 { % fim se % }
 { % se bloco. configurações . mega_produto ! = em branco % } 
<a href = "{{block.settings.mega_product.url}} " style = "text-decoration: none" > _ {{block.settings.mega_product.url}} _ _ _
 < div class = "megaProduto" > 
{ %- atribuir produto_media = bloco. configurações . mega_produto . selecionado_ou_primeira_variável_disponível . destaque_media | padrão : bloco. configurações . mega_produto . destaque_media -% }
 < div class = "megaProductImage" > 
< img src = " {{product_media | img_url: master }} " alt = " {{product_media.alt | escape }} " >
 < / div >

 < div class = "megaProductInfo" > 
< estilo h4 = "margem: 0 0 5%;" > { { bloco. configurações . mega_produto . título | escapar } } < / h4 > 
< p estilo = "margem: 0;" > { { bloco. configurações . mega_produto . preço | dinheiro } } < / p >
 < / div >
 < / div > 
< / a >
 { % fim se % }
 { % se bloco. configurações . mega_imagem ! = em branco % } 
{ % se bloco. configurações . mega_image_link ! = em branco % }
 <a href="{{block.settings.mega_image_link}}" > _ {{block.settings.mega_image_link}} _
 { % fim se % }
 < div class = "megaImagem" > 
< img src = " {{block.settings.mega_image | img_url: 'master'}} " alt = " {{block.settings.mega_image.alt | escape }} " style = "largura: {{block.settings.mega_image_size}} %;" >
 < / div > 
{ % se bloco. configurações . mega_image_link ! = em branco % } < / a > { % endif % }
 { % fim se % }
 < / div > 
< / div >
 { % fim se % }

 < / div >
 { % fim se % }
 { % fim para % }
 < / div > 
< / navegação >
 <roteiro> _
 function verificaçãoEntrada ( entrada ) {
 const inputNum = entrada. conjunto de dados . entrada ;
 const childInputNum = entrada. conjunto de dados . filhoInput ;
 if ( NumEntrada ) { 
console. log ( Numentrada ) ;
 if ( entrada. verificado == verdadeiro ) {
 documento. querySelector ( ` [ dados - svg = "svgDd--${inputNum}" ] ` ) . estilo . exibir = "nenhum" ; 
documento. querySelector ( ` [ dados - svg = "svgClose--${inputNum}" ] ` ) . estilo . exibir = "bloco" ;
 } outro { 
documento. querySelector ( ` [ dados - svg = "svgDd--${inputNum}" ] ` ) . estilo . exibir = "bloco" ; 
documento. querySelector ( ` [ dados - svg = "svgClose--${inputNum}" ] ` ) . estilo . exibir = "nenhum" ;
 }
 }
 if ( filhoInputNum ) {
 console. log ( filhoInputNum ) ; 
if ( entrada. verificado == verdadeiro ) {
 documento. querySelector ( ` [ dados - svg = "childSvgDd--${childInputNum}" ] ` ) . estilo . exibir = "nenhum" ; 
documento. querySelector ( ` [ dados - svg = "childSvgClose--${childInputNum}" ] ` ) . estilo . exibir = "bloco" ;
 } outro { 
documento. querySelector ( ` [ dados - svg = "childSvgDd--${childInputNum}" ] ` ) . estilo . exibir = "bloco" ; 
documento. querySelector ( ` [ dados - svg = "childSvgClose--${childInputNum}" ] ` ) . estilo . exibir = "nenhum" ;
 }
 }
 }

 const megaImgRaw = " {{mega_img_file}} " ; 
const megaImgSplit = megaImgRaw. dividir ( / [ , ] / ) . mapa ( col => col. substituir ( / [ \ "\s{}]/g, '')).map(s => s.split('.'));
 const megaImgJSON = Object.fromEntries(megaImgSplit);

 const megaLink = " { { sample_img } } ";
 
janela.onload=função(){
 const megaImage = document.querySelectorAll('.megaLinkImage');
 megaImagem.forEach(função(imagem) {
 for(const img em megaImgJSON) {
 const imageBox = document.querySelector(`[data-mega-image=" $ { img } "]`);
 if (imagem.dataset.megaImage == img) {
 const imgUrl = `${[img]}.${megaImgJSON[img]}`
 const assetImgUrl = megaLink.split('?')[0] + `${imgUrl}`;
 imageBox.insertAdjacentHTML(
 'antes do fim',
 `<img src=" $ { assetImgUrl } "alt=" $ { assetImgUrl } + '.' + 'alt' ">`);
 }
 }
 })
 }
 </script>

, {
 "type" : "richtext" ,
 "id" : "mega_drawer_image" ,
 "label" : "Insira as imagens do mega-link" ,
 "default" : "<p> primeiro-segundo-terceiro.jpg, primeironome.png, primeironome.gif<\/p>" ,
 "info" : "Use '-' se for um nome de imagem com duas palavras. A extensão do arquivo deve corresponder ao arquivo enviado. Separe a imagem com vírgula. Veja o padrão"
 } 
] ,
 "blocos" : [
 {
 "nome" : "mega cabeçalho" ,
 "tipo" : "mega_header" ,
 "configurações" : [
 {
 "tipo" : "caixa de seleção" ,
 "id" : "mega_largura" ,
 "padrão" : falso , 
"label" : "Gaveta em largura total"
 } ,
 {
 "tipo" : "url" ,
 "rótulo" : "megaurl" ,
 "id" : "mega_url" ,
 "info" : "Forneça link se não houver gaveta"
 } ,
 {
 "tipo" : "texto" , 
"label" : "título do mega url" ,
 "id" : "título"
 } ,
 {
 "tipo" : "texto" ,
 "label" : "mega cabeçalho" ,
 "id" : "header_title"
 } ,
 {
 "tipo" : "cor" , 
"label" : "cor do cabeçalho" ,
 "id" : "header_bg"
 } ,
 {
 "type" : "image_picker" ,
 "label" : "mega imagem" ,
 "id" : "mega_imagem"
 } ,
 {
 "tipo" : "intervalo" , 
"label" : "mega tamanho da imagem" ,
 "id" : "mega_image_size" ,
 "padrão" : 15 ,
 "máximo" : 100 ,
 "min" : 10
 } ,
 {
 "tipo" : "lista_links" ,
 "rótulo" : "megalink" , 
"id" : "mega_link"
 } ,
 {
 "tipo" : "produto" ,
 "rótulo" : "megaproduto" ,
 "id" : "mega_produto"
 }
 ]
 }

: raiz { 
-- gaveta - plano de fundo : #f0eff1;
 --parent - link - bg : preto ;
 - cor escura: preto ; /* cor da fonte e cor do ícone */
 - cor clara : branco ; /* cor da fonte e do ícone quando pairado */ 
-- cor cinza : #b1b0b5; /* cor de fundo quando pairado */
 }

 /* CSS no cabeçalho */
 . cabeçalho {
 preenchimento - topo : 0 ! importante ;
 preenchimento - inferior : 0 ! importante ;
 }
 
. megaContainer > * {
 -webkit - user - select : nenhum ;
 -moz - user - select : nenhum ;
 -ms - user - select : nenhum ;
 seleção de usuário : nenhum ; 
cor : var ( -cor escura ) ;
 }
 . megaContainer -- tablet > * {
 -webkit - user - select : nenhum ;
 -moz - user - select : nenhum ; 
-ms - user - select : nenhum ;
 seleção de usuário : nenhum ;
 cor : var ( -cor escura ) ;
 }

 . megaContêiner {
 exibição : flexível ;
 }
 . megaHeader {
 estouro : oculto ; 
família de fontes : Arial, Helvetica, sans - serif ;
 exibição : flexível ;
 }

 . megaHeader > a {
 flutuar : esquerda ;
 tamanho da fonte : 16px ;
 cor : var ( -cor escura ) ; 
alinhamento de texto : centro ;
 preenchimento : 0 10px ;
 decoração de texto : nenhuma ;
 }

 . megaDravela {
 flutuar : esquerda ;
 estouro : oculto ;
 exibição : flexível ;
 }


 . megaDrawer . gavetabtn { 
tamanho da fonte : 16px ;
 borda : nenhuma ;
 esboço : nenhum ;
 preenchimento : 0 10px ;
 fonte : herdar ;
 margem : 0 ;
 exibição : flexível ;
 fundo : transparente ;
 alinhar - itens : centro ;
 }
 
. megaHeader > a : passe o mouse, . megaDrawer : passe o mouse. gavetabtn {
 cor branca ;
 cor de fundo : var ( -parent - link - bg ) ; /* cor de fundo das abas quando pairado */
 }

 . megaDrawerContent { 
Mostrar nenhum ;
 largura máxima : 95 % ; /* largura de todo o contêiner suspenso */
 raio da borda : 5px ;
 estouro : oculto ;
 caixa - sombra : 0px 10px 10px 0px rgb ( 0 0 0 ) ; 
índice z : 4 ;
 cor de fundo : var ( -gaveta - fundo ) ; /* cor de fundo da gaveta */
 }
 /* ====== AJUDANTES ======*/
 . posição absoluta {
 posição : absoluta ;
 esquerda : 50 % ; 
topo : 70 % ;
 transformar : traduzirX ( -50 % ) ;
 }
 . alinharCenter {
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }

 /* ====== AJUDANTES ======*/
 
. megaDrawerContent . megaDrawerHeader {
 preenchimento : 5px 10px ;
 cor : var ( -cor clara ) ;
 }
 . megaDrawerHeader {
 espaço em branco : nowrap ;
 }

 . megaDrawerHeader h2 {
 margem : 0 ; 
tamanho da fonte : 20px ;
 }

 Tela @media somente e ( largura mínima : 1000px ) {
 . megaDrawer : passe o mouse. megaDrawerContent {
 exibição : bloco ;

 }
 }
 . megaLinkBox {
 flutuar : esquerda ; 
altura da linha : 1 ;
 }
 . megaLinkContainer {
 exibição : flexível ;
 justificar - conteúdo : centro ;
 }
 . megaLink {
 peso da fonte : 600 ;
 }
 . megaLink : pairar { 
decoração de texto : sublinhado ;
 }

 . megaLinkBox > a {
 float : nenhum ;
 cor : var ( -parent - link - bg ) ;
 preenchimento : 5px ;
 decoração de texto : nenhuma ; 
exibição : bloco ;
 tamanho da fonte : braçadeira ( 14px, 1vw, 16px ) ;
 overflow - wrap : break - word ;
 }

 
. megaLinkBox a : not ( : primeiro - do - tipo ) : not ( : primeiro - filho ) : hover {
 cor de fundo : var ( -cor cinza ) ;
 } 
. megaLink {
 alinhamento de texto : centro ;
 }

 . megaDrawerWrapper {
 exibição : flexível ;
 justificar - conteúdo : espaço ao redor ;
 flex - direction : coluna ;
 estouro : automático ;
 }

 . megaProduto { 
exibição : flexível ;
 lacuna : 15px ;
 margem : 10px ;
 }

 . megaProductImage {
 exibição : flexível ;
 flex - direction : coluna ;
 justificar - conteúdo : centro ;
 }

 . megaProductInfo {
 exibição : flexível ; 
flex - direction : coluna ;
 justificar - conteúdo : centro ;
 espaço em branco : nowrap ;
 }
 . megaProductInfo > * {
 tamanho da fonte : braçadeira ( 1rem, 1vw, 1,6rem ) ;
 }
 . megaImagem { 
largura : 100 % ;
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }
 . megaImagem img {
 margem : 1 % ;
 }
 
@media screen e ( largura máxima : 1000px ) {
 . megaContêiner {
 Mostrar nenhum ;
 }
 }

 /*==== Tamanho do tablet ====*/

 . megaHeader -- tablet {
 largura : 100 % ; 
flex - direction : coluna ;
 alinhar - itens : flex - start ;
 preenchimento : 5 % ;
 }

 . megaA {
 decoração de texto : nenhuma ;
 cor : var ( -cor escura ) ;
 }
 
. megaDravela {
 alinhar - itens : flex - start ;
 flex - direction : coluna ;
 }
 . megaDrawer > entrada {
 Mostrar nenhum ;
 }
 . megaDrawer > entrada : verificado + . megaDrawerContent -- tablet { 
exibição : bloco ;
 }
 . megaDrawerContent -- tablet {
 Mostrar nenhum ;
 largura : 100 % ;
 preenchimento : 5 % ;
 }
 . megaDrawerHeader -- tablet {
 exibição : flexível ; 
justificar - conteúdo : centro ;
 }
 . megaDrawer : passe o mouse. gavetabtn svg {
 traço : var ( -cor clara ) ;
 }


 . megaDrawerWrapper -- tablet {
 exibição : flexível ;
 }
 
. seta para baixo > * {
 largura : 20px ;
 margem - esquerda : 5px ;
 }
 . childLinkContainer {
 Mostrar nenhum ;
 flex - direction : coluna ;
 margem esquerda : 10 % ; 
espaço em branco : inicial ;
 }
 . megaLinkBox -- tablet a {
 decoração de texto : nenhuma ;
 cor : var ( -cor escura ) ;
 }
 . megaLinkBox -- tablet > a { 
peso da fonte : 600 ;
 }

 . megaLinkBox -- tablet a : hover {
 decoração de texto : sublinhado ;
 }

 . megaLinkBox -- tablet > entrada {
 Mostrar nenhum ;
 } 
. megaLinkBox -- tablet > rótulo > span {
 peso da fonte : 600 ;
 }
 . megaLinkBox -- tablet > etiqueta {
 exibição : flexível ;
 preenchimento : 0 5 % ; 
justificar - conteúdo : espaço entre ;
 }
 . megaLinkBox -- tablet > rótulo : hover {
 cor : var ( -cor clara ) ;
 cor de fundo : var ( -cor cinza ) ;
 }
 
. megaLinkContainer > . megaLinkBox -- tablet > entrada : verificado + . childLinkContainer {
 exibição : flexível ;
 }


 /*======= ÍCONES ======*/

 . megaSvg {
 preencher : nenhum ; 
traço : var ( -cor escura ) ;
 exibição : flexível ;
 largura : 25px ;
 }
 . gavetabtn -- tablet svg > caminho {
 transição : todos os 700 ms de atenuação ;
 }
 . svgFechar {
 Mostrar nenhum ; 
}

 . megaDrawer : passe o mouse. caminho svgDd {
 d : caminho ( "M2,2 L5,5 L8,8 L5,5 L8,2 L2,8" ) ;
 }
 . gavetabtn : passe o mouse. svgFechar caminho {
 d : caminho ( "M5,6 L5,6 L2,3 L5,6 L5,6 L8,3" ) ;
 }
 
. megaDrawer : passe o mouse. gavetabtn -- tablet > svg {
 traço : var ( -cor clara ) ;
 }

 . megaLinkBox -- tablet : rótulo flutuante {
 cor : var ( -cor clara ) ; 
cor de fundo : var ( -cor cinza ) ; /* cor de fundo das abas quando pairado */
 }

 . gavetabtn -- tablet {
 largura : 30px ;
 altura : 30px ;
 posição : relativa ;
 }

 . seta para baixo { 
largura : 30px ;
 altura : 30px ;
 posição : relativa ;
 exibição : flexível ;
 }

 . arrowDown svg > caminho {
 transição : todos os 1s desaparecem ;
 }
 . childSvgClose {
 Mostrar nenhum ;
 }
 
. megaLinkBox – tablet : passe o mouse. caminho childSvgDd {
 d : caminho ( "M2,2 L5,5 L8,8 L5,5 L8,2 L2,8" ) ;
 }
 . megaLinkBox – tablet : passe o mouse. childSvgFechar caminho {
 d : caminho ( "M5,6 L5,6 L2,3 L5,6 L5,6 L8,3" ) ;
 }
 
. megaLinkBox – tablet : passe o mouse. seta para baixo > svg {
 traço : var ( -cor clara ) ;
 }

 . megaLinkBox -- tablet > input : verificado ~ label > span. seta para baixo > svg. filhoSvgDd { 
Mostrar nenhum ;
 }
 . megaLinkBox -- tablet > input : verificado ~ label > span. seta para baixo > svg. childSvgClose {
 exibição : bloco ;
 }
 . megaLinkImage {
 largura : 100 % ;
 exibição : flexível ; 
justificar - conteúdo : centro ;
 }
 . megaLinkImage img {
 largura : 100px ;
 proporção de aspecto : 1 ;
 }