Página 1 de 2

[TUTORIAL] Efeito no Menu de Categorias

Enviado: 14 Fev 2011, 01:25
por sitesabj
Olá galera,
meu nome é Arildo Borges Jr,
peço desculpa pela desorganização, arranjei um tempinho para postar essa mod,
fico feliz em poder contribuir :D

Fiz essa modificação na versão 1.4.9.3, mas creio que funcione em qualquer uma.
Lembre-se, sempre faça backup dos arquivos.

Você pode ver o resultado em http://www.maximoofertas.com.br

Vamos Lá:

Abra o arquivo catalog/controller/module/category.php
Localize:
Código: Selecionar todos
if ($category_id == $result['category_id']) {
            $children = $this->getCategories($result['category_id'], $new_path);
         }
E substitua por:
Código: Selecionar todos
$children = $this->getCategories($result['category_id'], $new_path);
Abra o arquivo catalog/view/theme/default/template/common/header.tpl
Localize:
Código: Selecionar todos
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/thickbox/thickbox.css" />
E adicione este código abaixo:
Código: Selecionar todos
<script type="text/javascript" src="catalog/view/javascript/ddsmoothmenu.js"></script>
<script type="text/javascript">
ddsmoothmenu.init({
	mainmenuid: "smoothmenu1",
	orientation: 'h',
	classname: 'ddsmoothmenu',
	contentsource: "markup"
})
</script>
Abra o arquivo catalog/view/theme/default/template/module/category.tpl
Localize
Código: Selecionar todos
<?php echo $category; ?>
e substitua por
Código: Selecionar todos
<div id="smoothmenu1"><?php echo $category; ?></div>
Copie o arquivo ddsmoothmenu.js(link no final) para
Código: Selecionar todos
catalog/view/javascript
Pronto. Veja como ficou seu menu de categorias.

Arquivo ddsmothmenu.js:
ddsmoothmenu.zip
Modificação Pronta:
categorias.zip

Re: [TUTORIAL] Efeito no Menu de Categorias

Enviado: 14 Fev 2011, 10:25
por Manoel Vidal
Ótima contribuição Arildo, parabéns!

Re: [TUTORIAL] Efeito no Menu de Categorias

Enviado: 15 Fev 2011, 13:17
por fpavanelli
Show de bola Arildo!!!

Muito legal mesmo! Vou colocar em minha loja!

Gostaria de te perguntar 2 coisas:

1º - como você tirou o sublinhado das categorias? ( ou ao fazer o seu Tutorial isso acontece?)
2º - como você deu este espaçamente entre as categorias? ( ou ao fazer o seu Tutorial isso acontece?)

Vou testá-lo agora!

Valeu!

Re: [TUTORIAL] Efeito no Menu de Categorias

Enviado: 15 Fev 2011, 13:56
por fpavanelli
Oi Arildo, acabei de implementar em minha loja - www.livrariapapiros.com

Funcionou e não funcionou, ou seja, ( Já limpei o cache, ok?) quando passo o mouse, não abre como a da sua loja abre... mas depois que clico a primeira vez, é como se eu habilitasse à funcionar, entende?

Verifique em minha loja a categoria "componentes". Você verá que nada acontece ao passar o mouse. Mas depois de clicar, ao passar o mouse novamente a função começa a funcionar!

Se puder ajudar, achei muito legal em sua loja, tanto que postei 02 perguntas anteriores à este post!

Valeu!

Att

Flávio

Re: [TUTORIAL] Efeito no Menu de Categorias

Enviado: 15 Fev 2011, 16:53
por sitesabj
Olá fpavanelli,
Houve um problema na seu arquivo catalog/controller/module/category.php,
pode ter sido causado por alguma modificação anterior, e modificou a linha,
mas faça o seguinte:

Volte esse arquivo para o original;

Localize:
Código: Selecionar todos
if ($category_id == $result['category_id']) {
				$children = $this->getCategories($result['category_id'], $new_path);
			}
e substitua por:
Código: Selecionar todos
$children = $this->getCategories($result['category_id'], $new_path);
Salve, envie para o servidor e teste.

E para o estilo faça o seguinte:

Para espaçar:
Abra o arquivo stylesheet.css em catalog/view/theme/default/stylesheet/
Procure:
Código: Selecionar todos
list-style: url('../image/bullet_1.png');
Adicione abaixo:
Código: Selecionar todos
line-height:20px;
Onde o 20px é a distância, você pode aumentar ou diminuir.

Se você quiser tirar aquela imagem ao lado de cada opção,
substitua
Código: Selecionar todos
list-style: url('../image/bullet_1.png');
por
Código: Selecionar todos
list-style:none;
Para tirar o sublinhado:
Ao final do arquivo stylesheet.css
adicione o seguinte:
Código: Selecionar todos
#category ul a{
	text-decoration:none;
}

Vou atualizar meu post para maior compatibilidade.

Té mais

Re: [TUTORIAL] Efeito no Menu de Categorias

Enviado: 15 Fev 2011, 17:26
por fpavanelli
É isso ai Arildo!!!

Maravilha!

Funcionou!!!

Valeu!!!

Abs!

Re: [TUTORIAL] Efeito no Menu de Categorias

Enviado: 24 Fev 2011, 18:46
por lekfly
Parabéns pelo tutorial...
ficou show!!

só tenho uma duvida porque fica aparecendo aquelas imagens a direita?
que não carrega...

e como que remove aquilo??

vlw.

Consegui!!

Bom gente não sei se é a meneira certa de fazer isso mas vamus lá...

eu verifiquei o endereço das imagens que naum carregava e encontrei:

down.gif
right.gif

então criei essas duas gifs 10x10px transparente e enviei pro diretorio raiz do site...
pelo menos resolveu meu problema.

Obrigado novamente pelo exelente post...

Re: [TUTORIAL] Efeito no Menu de Categorias

Enviado: 25 Fev 2011, 13:23
por armendane
meu amigo,

Parabéns e muito obrigado por compartilhar conosco essa maravilha, agora, aproveitando da sua boa vontade... rss... teria como compartilhar conosco também sobre como implantar aquele banner maneiríssimo que está no seu site?

Agradeço pela atenção.

Ricardo.

Re: [TUTORIAL] Efeito no Menu de Categorias

Enviado: 27 Fev 2011, 14:01
por sitesabj
Obrigado a todos,
armendane, Aquele banner tem um módulo de gerenciamento que desenvolvi, muito massa, não precisa ficar trocando manualmente, ;) ,
Não posso colocar agora porque é um tutorial um pouco grande e estou terminando um serviço aki,
mas essa semana ainda coloco o tutorial aqui no forum. :)

Abrass :)

Re: [TUTORIAL] Efeito no Menu de Categorias

Enviado: 27 Fev 2011, 16:39
por Manoel Vidal
Aguardaremos por mais uma contribuição sitesabj :mrgreen: