Página 1 de 1

Menu vertical com ícones

Enviado: 05 Dez 2012, 19:15
por eugeniopaccelli
Meus amigos bom dia, gostaria de saber se alguém já implementou a seguinte ideia:
Como exemplo do site das lojas americanas, alguém já fez um menu vertical com ícones? se tiverem e quiserem compartilhar fico muito grato, abraços!
Ex: http://www.americanas.com.br/

Re: Menu vertical com ícones

Enviado: 10 Dez 2012, 12:26
por andersonnarciso
Da para fazer com puro CSS + os icones png. Poderias ter resultado com qualquer tutorial de menus com imagem.. http://cherry-liah.blogspot.com.br/2012 ... hover.html

Re: Menu vertical com ícones

Enviado: 19 Dez 2012, 09:37
por eugeniopaccelli
Fiz de outra forma meu caro, mas obrigado pela atenção! vou postar como fiz, é realmente útil!

Re: Menu vertical com ícones

Enviado: 19 Dez 2012, 09:45
por eugeniopaccelli
Por volta linha 119 do header.php (controller), você verá algo parecido com isso:
Código: Selecionar todos
// Level 1
				$this->data['categories'][] = array(
					'name'     => $category['name'],					
					'children' => $children_data,
					'column'   => $category['column'] ? $category['column'] : 1,
					'href'     => $this->url->link('product/category', 'path=' . $category['category_id'])
				);
o que você deve fazer é adicionar abaixo (escolha minha) do método 'name' => $category['name'], a chamada da imagem da categoria, 'image' => $category['image'], ficaria assim:
Código: Selecionar todos
// Level 1
				$this->data['categories'][] = array(
					'name'     => $category['name'],
					'image'     => $category['image'],
					'children' => $children_data,
					'column'   => $category['column'] ? $category['column'] : 1,
					'href'     => $this->url->link('product/category', 'path=' . $category['category_id'])
				);

e na header.tpl (view) você modifica a chamada da categoria pelo método image, eu fiz assim:
Código: Selecionar todos
<ul>
    <li><a class="fstChild" href="index.php">home</a></li>
    <?php foreach ($categories as $category) { ?>
    <li><a href="<?php echo $category['href']; ?>"><img src="image/<?php echo $category['image']; ?>" alt="<?php echo $category['name']; ?>" title="<?php echo $category['name']; ?>"></a><!-- aqui está a mágica -->
      <?php if ($category['children']) { ?>
      <div>
        <?php for ($i = 0; $i < count($category['children']);) { ?>
        <ul>
          <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
          <?php for (; $i < $j; $i++) { ?>
          <?php if (isset($category['children'][$i])) { ?>
          <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
          <?php } ?>
          <?php } ?>
        </ul>
        <?php } ?>
      </div>
      <?php } ?>
    </li>
    <?php } ?>
  </ul>
feito isso, é só adicionar icones ao categorias, que automaticamente eles vão pra o menu, qualquer dúvida, só falar!

Re: Menu vertical com ícones

Enviado: 29 Out 2016, 12:24
por lucasyanbr
Alguém saberia me dizer como faço isso com o menu horizontal?
Segue o link da minha loja: http://gurugame.com.br/
gostaria de fazer algo como o menu do walmart: https://www.walmart.com.br/