Adicionando ícone/imagem dinâmica antes do título do menu - Passe o mouse para abrir

4 de março de 2022

Compatibilidade: todos os temas GRATUITOS do Shopify 2.0

Shopify é uma plataforma de comércio eletrônico popular que permite aos comerciantes online criar e gerenciar facilmente suas lojas online. Uma das maneiras de melhorar a aparência e a experiência do usuário de uma loja Shopify é adicionar ícones aos links do menu. Esses ícones podem ajudar a tornar a navegação mais intuitiva e visualmente atraente.

Além disso, a função passar o mouse para abrir é adicionada como uma ótima maneira de aprimorar a experiência do usuário e facilitar o acesso ao menu.

É importante observar que para obter melhores resultados, a imagem que você escolher adicionar deve estar no formato PNG e ter fundo transparente. Para ver o melhor resultado possível, consulte a imagem fornecida abaixo.

Propriedades da imagem

Consigo escrever um código que pode adicionar uma imagem de sua escolha antes do título do menu sem interromper a lista do menu. Não há necessidade de usar javascript, apenas HTML e CSS.

Eu adicionei a função hover to open também.

Você pode verificar a loja de demonstração usando a senha “made4uo”.

O que você está comprando:

Adicione um ícone antes do título do menu no seu cabeçalho

O que torna nosso código melhor:

Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
Não deixamos nem adicionamos códigos para anunciar em nosso site
Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.

Para iniciar:

1. Acesse Loja online > Temas > Ações > Editar código.

2. Abra a pasta Seções e encontre header.liquid. Dentro do líquido do cabeçalho, procure este trecho de código "header__inline-menu". Use Ctrl + F para localizar dentro do editor de código. Substitua o código pelo código abaixo. Consulte a imagem abaixo sobre qual código excluir.

Código para excluir

 < nav class = "header__inline-menu" style = ":root { 
{% for block in section.blocks %} --image- {{forloop.index}} : url( {{block.settings.a | img_url: " small " }} ); {% endfor %}
 };
 --menu-background: {{section.settings.menu_icon_bg}} ;
 --menu-hover: {{section.settings.menu_icon_hover}} ;
 --item-menu-hover: {{section.settings.menu_icon_bg}} ;
 " >
 < ul class = "list-menu list-menu--inline" role = "list" > 
{ %- para link na seção. configurações . cardápio . links -% }
 <li> _
 { %- se link. links ! = em branco -% } 
< div id = "Details-HeaderMenu- {{ forloop.index }} " >
 < div id = "menuDrawer" class = "header__menu-item list-menu__item link focus-inset" > 
< span class = "imageMenu" style = "imagem de fundo: var(--image- {{forloop.index}} )" </ span >
 < intervalo
 { %- se link. filho_ativo -% }
 class = "header__active-menu-item" 
{ %- fim se -% }
 >
 { { - link. título | escapar } }
 { % renderizar 'ícone-caret' -% }
 </span> _
 < ul 
id = "HeaderMenu-MenuList- {{ forloop.index }} "
 class = "menuDrawerBox header__submenu list-menu list-menu--divulgação legenda-grande redução de movimento"
 função = "lista"
 tabindex = "-1"
 >
 { %- para link infantil no link. links -% } 
<li> _
 { %- se link filho. links == em branco -% }
 < um
 href = " {{ childlink.url }} "
 class = "header__menu-item list-menu__item link link--text focus-inset caption-large {% if childlink.current %} list-menu__item--active {% endif %} " 
{ % se link filho. atual % }
 aria - atual = "página"
 { % fim se % }
 >
 { { filho link. título | escapar } } 
</a> _
 { %- outro -% }
 < div id = "Details-HeaderSubMenu- {{ forloop.index }} " >
 < div class = "menuDrawerTitle header__menu-item link link--text list-menu__item focus-inset caption-large" > 
{ { filho link. título | escapar } }
 </div> _ _
 < ul
 id = "HeaderMenu-SubMenuList- {{ forloop.index }} "
 class = "menuDrawerSub header__submenu list-menu motion-reduce"
 > 
{ %- para netolink em filholink. links -% }
 <li> _
 < um
 href = " {{ grandchildlink.url }} "
 class = "header__menu-item list-menu__item link link--text focus-inset caption-large" 
{ % se netolink. atual % }
 aria - atual = "página"
 { % fim se % }
 >
 { { netolink. título | escapar } } 
</a> _
 </ li >
 { %- fim para -% }
 </ul> _
 </div> _ _
 { %- fim se -% }
 </ li > 
{ %- fim para -% }
 </ul> _
 </div> _ _
 </div> _ _
 { %- outro -% }
 < um
 href = " {{ link.url }} " 
class = "header__menu-item header__menu-item list-menu__item link link--text focus-inset"
 { % se link. atual % }
 aria - atual = "página"
 { % fim se % }
 > 
< span class = "imageMenu" style = "imagem de fundo: var(--image- {{forloop.index}} )" </ span >
 < intervalo
 { %- se link. atual % }
 class = "header__active-menu-item" 
{ %- fim se -% }
 >
 { { - link. título | escapar - } }
 </span> _
 </a> _
 { %- fim se -% }
 </ li > 
{ %- fim para -% }
 </ul> _
 </nav> _
 <estilo> _
 . imagemMenu {
 largura : 50px ;
 altura : 50px ;
 margem direita : 10px ;
 background - repetir : não - repetir ; 
posição de fundo : centro ;
 tamanho do plano de fundo : contém ;
 borda - raio : 50 %;
 cor de fundo : var ( -menu - fundo ) ;
 }
 . header__menu -item : hover. imagemMenu { 
cor de fundo : var ( -menu - hover ) ;
 }
 . header__menu - item : pairar {
 cor de fundo : var ( -item - menu - hover ) ;
 }
 #menuDrawer:hover .header__submenu { 
exibição : flexível ! importante ;
 }
 #menuDrawer::antes {
 contente : "" ;
 posição : absoluta ;
 altura : 100 %;
 preenchimento inferior : 100px ;
 largura : 100 %;
 }
 #menuDrawer {
 posição : relativa ; 
}
 . menuDrawerBox {
 lacuna : 10px ;
 }
 . cabeçalho__submenu {
 superior : 70px ;
 Mostrar nenhum ;
 largura mínima : conteúdo máximo ! importante ;
 largura : conteúdo máximo ! importante ;
 transição : todos os 0,5s de facilidade ; 
animação : menu suspenso avança 0,5s ;
 }
 . menuDrawerSub {
 flex - direction : coluna ;
 }
 . menuDrawerTitle {
 peso da fonte : 600 ;
 }
 Menu suspenso @keyframes - menu {
 0 % { 
superior : 25px ;
 opacidade : 0 ;
 }
 100 % {
 superior : 70px ;
 opacidade : 1 ;
 }
 }
 #menuDrawer > span > svg {
 largura : 15px ;
 }
 </ estilo >

3. Precisamos adicionar uma imagem dinâmica, portanto precisamos de blocos para a imagem. Vá até o esquema e encontre o último "]." Substitua o colchete pelo código abaixo. Consulte a imagem abaixo sobre qual suporte excluir e substituir.

Substitua o último colchete

 , {
 "tipo" : "cabeçalho" ,
 "content" : "Ícone do menu/configurações de imagem"
 } ,
 {
 "tipo" : "cor" , 
"id" : "menu_icon_bg" ,
 "label" : "Fundo do ícone"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "menu_icon_hover" ,
 "label" : "Foco no plano de fundo do ícone"
 }
 ] , 
"blocos" : [
 {
 "nome" : "imagem do menu" ,
 "tipo" : "menu_imagem" ,
 "configurações" : [
 {
 "type" : "image_picker" , 
"id" : "uma" ,
 "rótulo" : "imagem"
 }
 ]
 }
 ]
 }

Tudo que você precisa fazer é adicionar suas imagens e alterar as configurações no cabeçalho. Clique no cabeçalho e você verá o ÍCONE DO MENU / CONFIGURAÇÕES DE IMAGEM na parte inferior.

Adicione a imagem/ícone utilizando o bloco de acordo com a posição no menu. Arraste para reposicionar.

É isso (",)