[Resolvido] Menu dinâmico dropdown com jQuery e CSS no sistema Do

[RSS iMasters 5]

Neste artigo, vamos explicar como fazer um menu dropdown sem complicações, puxando seus respectivos departamentos e seções diretamente do banco de dados com o uso da TAG especial ##Departamentos##.

Às vezes, a listagem de seções e categorias pode ser um problema para o lojista, devido à quantidade de departamentos existentes na loja. A solução mais prática para esse tipo de problema é utilizar o menu dropdown.

Primeiramente, para implantar esse recurso na loja é preciso linkar a biblioteca jQuery no topo da nossa página (BarraTopo.htm):

<script type="text/javascript" src="https://www.dotstore.com.br/dotstore/inc/extras/jquery.min.js"></script>

Em seguida, iremos carregar o nosso menu. Para isso, utilizaremos a TAG ##Departamentos## com seu estilo 14 para que o menu retorne o código html usando ul e li:

##Departamentos % alinha=h ~ estilo=14##

A TAG ##Departamentos##, usada com o estilo 14, apresentará o menu da seguinte maneira:

<div id="menu-categorizacao">

<ul class="uldep" id="uldepobj">

<li class="lidep" id="lidep1">

<a href="" title="">Departamento 1</a>

<ul class="ulsec" id="ulsecobj">

<li class="lisec" id="lisec1"><a href="" title="">Seção do departamento 1</a></li>

</ul>

</li>

<li class="lidep" id="lidep2"><a href="" title="">Departamento 2</a></li>

<li class="lidep" id="lidep3"><a href="" title="">Departamento 3</a></li>

</ul>

</div>

No exemplo acima, temos um menu contendo 3 departamentos e uma seção, ou seja, temos um menu com 3 departamentos, sendo que um deles possui um submenu.

Agora vamos por a mão na massa e fazer tudo isso funcionar como queremos: como um menu dropdown.

Vamos inserir o nosso script jQuery:

<script>

$(document).ready(function () {

$('#menu-categorizacao ul li').mouseenter(function() {

$(this).find('.ulsec').slideDown(200);

});

$('#menu-categorizacao ul li').mouseleave(function() {

$(this).find('.ulsec').css({'display':'none'});

});

 

$('.DS_BtMenuTopoSistema ul li .ulsec').mouseleave(function() {

$(this).css({'display':'none'});

});

});

 

</script>

Depois basta arrumar o CSS:

  #menu-categorizacao ul li {position:relative; display:block;}

#menu-categorizacao ul li .ulsec {display:none; position:absolute; top:20px; left:0px;}       

Pronto! Seu menu dropdown está funcionando. Agora você só precisar estilizá-lo de acordo com seu layout.

Até a próxima.

 

http://imasters.com.br/artigo/22012/dotstore/menu-dinamico-dropdown-com-jquery-e-css-no-sistema-dotstore