Como criar um menu lateral para abas minimizadas?

08/03/2024

Como o t�tulo sugere quero criar uma esp�cie de menu lateral. Quando um form for minimizado, quero que aparece uma pequena aba no lado esquerdo contendo o nome dele para facilitar a minha visualiza��o.

N�o sei se consegui ser clara com o que preciso.

Maria Elisa

Curtir t�pico + 0

Responder

Posts

19/03/2024

ɐɾǝɹƃi

Sim, voc� foi clara! A funcionalidade que voc� deseja � similar a abas em navegadores web, onde voc� pode minimizar e maximizar formul�rios com um clique. Vamos explorar como criar esse menu lateral com algumas op��es:

Op��o 1: Usando CSS e JavaScript puro:

Estrutura HTML:

Crie uma div para o menu lateral e divs para cada aba. Dentro das divs das abas, inclua o nome do formul�rio e um �cone.

CSS:

Posicione o menu lateral � esquerda da tela e defina a altura e largura das abas. Utilize a propriedade display: none para ocultar as abas minimizadas.

JavaScript:

Crie uma fun��o para minimizar e maximizar cada aba. Ao minimizar, altere a propriedade display da aba para none e adicione a aba ao menu lateral. Ao maximizar, remova a aba do menu lateral e altere a propriedade display para block.

Exemplo de c�digo:

HTML

<div id="menu-lateral">
  <div class="aba">
    <span class="nome">Formul�rio 1</span>
    <i class="icone"></i>
  </div>
  <div class="aba">
    <span class="nome">Formul�rio 2</span>
    <i class="icone"></i>
  </div>
</div>

CSS

#menu-lateral {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 50px;
}

.aba {
  height: 50px;
  width: 100%;
  background-color: #ccc;
  margin-bottom: 10px;
  cursor: pointer;
}

.aba.minimizado {
  display: none;
}

JavaScript

function minimizarAba(aba) {
  aba.classList.add('minimizado');
  document.getElementById('menu-lateral').appendChild(aba);
}

function maximizarAba(aba) {
  aba.classList.remove('minimizado');
  menuLateral.removeChild(aba);
}

Op��o 2: Usando bibliotecas JavaScript:

Existem diversas bibliotecas JavaScript que facilitam a cria��o de menus laterais, como:

jQuery UI: https://jqueryui.com/accordion/
Bootstrap: https://getbootstrap.com/docs/4.6/components/collapse/
Materialize: https://materializecss.com/collapsible.html
Essas bibliotecas fornecem componentes prontos para uso e facilitam a implementa��o da funcionalidade desejada.

Considera��es:

Adapte o c�digo e as bibliotecas de acordo com suas necessidades e estilo do seu projeto.
Teste a funcionalidade em diferentes navegadores e dispositivos para garantir a compatibilidade.
Recursos Adicionais:

Responder

Gostei + 0