Como criar um menu lateral para abas minimizadas?

Delphi

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

Maria Elisa

Curtidas 0

Respostas

ɐɾǝɹƃi

ɐɾǝɹƃi

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.



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:



GOSTEI 0
POSTAR