Como Criar um Submenu

Para inserirmos os submenus nos templates Master e Plumas. Para criar os submenus primeiro vamos adicionar um módulo de imports para introduzir a biblioteca de jQuery com os seguintes passos:

 Hotsite > conteúdo > administrar Módulos > Novo > Inserir Título e o tipo de módulo como HTML
Captura de Tela 2021-08-13 às 15.23.01.png

Vamos acessar a aba Conteúdo HTML e vamos procurar o conteúdo Imports como a imagem a seguir:

Captura de Tela 2021-08-13 às 16.58.23.png

A partir desse passo vamos copiar o código.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Agora após inserido vamos salvar o módulo e ir até o módulo de menu continuar a configuração.

Podemos inserir o novo menu depois o último menu da seguinte forma em HTML(Conteúdo) CSS(estilização) e Javascript(função) Agora vamos acessar o módulo do menu com o seguinte caminho:

Hotsite > conteúdo > administrar Módulos > Menu > editar > Conteúdo HTML.

E colocar a estilização no topo da página. CSS

           <style>
               .esconde, .esconde1{
                    display: none;
               }
           </style>

Vamos inserir o html logo abaixo do menu que queremos inserir
< li class="nav-item"><a class="nav-link active" href="#" onclick="muda();">INTERNET</a> < ul>

< li class="esconde"><a href="#">Teste</a> < li class="esconde1"><a href="#">Teste1</a>

</ ul> </ li>
Javascript

        <script>
           var x = 0;
           function muda(){
       
            if(x == 0){
                document.querySelector('.esconde').style.display = "block";
                document.querySelector('.esconde1').style.display = "block";
                x=1;
            }
            else{
              document.querySelector('.esconde').style.display = "none";
              document.querySelector('.esconde1').style.display = "none";
              x = 0;
            }
           }
        </script>


Dessa forma vamos incluir esse código no módulo e a partir desse momento nosso código está funcionando e temos um submenu totalmente funcional.

Podemos criar um submenu da seguinte maneira (só irá funcionar para os templates master e plumas) :

Ao acessar os Módulos, selecione o módulo de menu e edite para acrescentamos no codígo-fonte o submenu dropdown.

Captura de Tela 2021-10-19 às 09.40.24.png

No módulo selecionado iremos em Conteúdo html e clicaremos no botão de F3 no teclado para poder editar, e depois clique no botão Código-fonte e então iniciaremos o seguinte procedimento:

Iremos selecionar na barra de menu onde ficará o submenu dropdown, no qual ao passar o ponteiro do mouse irá abrir o submenu, na tag <li class="nav-item"><a class="nav-link active" href="#">Contratos</a> iremos selecionar para acrescentar o submenu.

Na tag <ul style="width:300px;"> iremos definir a largura do submenu.

Dentro da tag <ul style="width:300px;"> iremos acrescetar os seguintes código-fontes para que tenhamos 2 duas seleções de opçõe para o submenu:

<li><a href="link" target="_blank">contrato</a></li>

<li><a href="link" target="_blank">contrato</a></li>

Não deixe de fechar as tags no final do código-fonte com </ul> e </li>.

Captura de Tela 2021-10-19 às 09.54.41.png

Agora iremos acrescentar o style do submenu clique aqui para poder baixar o style.css do submenu:

Captura de Tela 2021-10-19 às 10.03.52.png

O resultado final será esse:

Captura de Tela 2021-10-19 às 10.07.44.png



Voltar ao menu Administrar módulos