Menu dinâmico dropdown com jQuery e CSS no sistema Dotstore

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.