Sub Menu com fotos. Alguém sabe?

Layout
1

Queria colocar no meu site um sub-menu que abrisse com fotos ilustrando essas sub-categorias, tipo igual este site que, ao clicar na categoria, abre as sub-categorias com fotos. O site é este: http://temporario-comprashop.lojaintegrada.com.br/

2 curtidas
2

Olá, adoraria ter este código tambem, mas nao sei se alguem vai passar. Pelo que vi alem da empresa Entrega-se tem uma outra que foi contratada para montar o site.

Vou ficar de olho se eu souber eu aviso como fazer.

Att: Eduardo

3

Blz! Vamos ver se conseguimos.

4

Também estou em busca de como fazer isso, por favor quem souber nos ajudem! Muito obrigado!

5

Eu sei esse código, quem quiser manda o link do site de vocês para fazer um teste e mandar o código certinho!

6

@Joao_Fernando uso esse código CSS para colocar imagem de fundo no menu superior:

#cabecalho .menu.superior .nivel-um>li>a {
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 25%;
}
#cabecalho .menu.superior .nivel-um>li:first-child>a {
	background-image: url('sua imagem.png');
	padding-left: 32px;
}
#cabecalho .menu.superior .nivel-um>li:nth-child(2)>a {
	background-image: url('sua imagem.png');
	padding-left: 32px;
}
#cabecalho .menu.superior .nivel-um>li:nth-child(3)>a {
	background-image: url('sua imagem.png');
	padding-left: 32px;
}
#cabecalho .menu.superior .nivel-um>li:nth-child(4)>a {
	background-image: url('sua imagem.png');
	padding-left: 32px;
}
#cabecalho .menu.superior .nivel-um>li:nth-child(5)>a {
	background-image: url('sua imagem.png');
	padding-left: 32px;
}
#cabecalho .menu.superior .nivel-um>li:nth-child(6)>a {
	background-image: url('sua imagem.png');
	padding-left: 32px;
}
#cabecalho .menu.superior .nivel-um>li:nth-child(7)>a {
	background-image: url('sua imagem.png');
	padding-left: 32px;
}

Se seu menu tiver mais do que sete categorias é só repetir o ultimo trecho do código mudando o (7) por (8) e assim por diante. se tiver menos é só deletar o excesso de código.

Espero que seja esse efeito que você esta procurando.

3 curtidas
7

Boa noite! Estou tentando trabalhar em cima do código que você postou, mas a briga ta feia. Quero que o nome da categoria fique a baixo da imagem não ao lado. Esse código está pondo a imagem ao lado do nome da categoria. Consegue me ajudar?

1 curtida
8

Por favor! www.motivacaosuplementos.com.br

9

É só mudar o início do código para:
#cabecalho .menu.superior .nivel-um>li>a { background-position: center top 5px; background-repeat: no-repeat; background-size: 20%; padding-top: 15px;

Assim a imagem fica no centro e acima do texto, você pode distanciar o texto da imagem aumentando o valor da propriedade padding-top.

1 curtida
10

Exatamente o que eu queria. Muito obrigado!

11

Aproveitando da sua boa vontade, eu estou tentando deixar meu menu igual e esse: http://www.corpoperfeito.com.br/

Poderia me orientar no sentido do que tenho que fazer para chegar próximo?
meu link: http://www.motivacaosuplementos.com.br/

12


Grato!!!

13

@foostore1854 ainda to na espera do codigo amigo. Grato!!

14

@Gilberto e pra colocar a imagem ao lado do sub menu conforme o site: http://temporario-comprashop.lojaintegrada.com.br
Grato!!!

16

Bom dia,

poderia me passar o código do menu ? Obrigado

Meu site: www.arrisq.com.br
E-mail: contato@arrisq,com.br

17

1- Consegue codigo deixar meu menu 100%?
2- E tbm de almentar o: "Bem-vindo, identifique-se para fazer pedidos"
3- E de tirar os dois negocio do lado de “Meus Pedidos” e “Minha Conta”??
http://www.storon.com.br/

18

1- Consegue codigo deixar meu menu 100%?
2- E tbm de almentar o: "Bem-vindo, identifique-se para fazer pedidos"
3- E de tirar os dois negocio do lado de “Meus Pedidos” e “Minha Conta”?.
http://www.storon.com.br/

19

Veja se é isso que quer: http://vannik2.lojaintegrada.com.br/

Este código esta validado em minha loja

.menu.superior>ul.nivel-um>li.categoria-id-1351729 >ul {
background: url(https://cdn.awsli.com.br/403/403207/arquivos/menu-pulseira.jpg) right 50px top 5px no-repeat #FFFFFF;
height: 100px;
padding-right: 300px;
padding-bottom: 200px;

Apenas deve alterar o código da categoria com o da sua loja e o endereço da imagem de fundo.

2 curtidas
20

Consigo todas as alterações, me manda um e-mail direto no
foostore1854@gmail.com

21

Vannik, primeiramente, muito obrigado pelo código!
Voce sabe qual o código para adicionar um link à imagem? para deste modo, o cliente ter a opção de clicar na imagem e ser direcionado ao produto em destaque.

Agradeço novamente!