Como criar um menu lateral para abas minimizadas?
08/03/2024
0
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.
Não sei se consegui ser clara com o que preciso.
Maria Elisa
Curtir tópico
+ 0
Responder
Posts
19/03/2024
ɐɾǝɹƃi
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.
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:
Responder
Clique aqui para fazer login e interagir na Comunidade :)