Como projetar menus suspensos no bootstrap 5
Um menu suspenso permite que o usuário de um site escolha uma opção/ação específica da lista fornecida de opções/ações. Esse menu é alterado e consiste em links organizados como itens de lista. Esses links envolvem uma enorme quantidade de conteúdo dentro deles, fazendo o layout de um limpador de página da web. Fazer um menu suspenso usando o bootstrap 5 é feito através do uso de várias classes associadas a ele. Aqui apresentamos como você pode criar um menu suspenso usando o bootstrap 5 e várias maneiras de estilizá -lo.
Como criar um menu suspenso usando o bootstrap 5
Com o objetivo de fazer um menu suspenso através do bootstrap 5, use o .suspenso aula. Aqui mostramos como um simples menu suspenso é criado.
Html
O contêiner div foi atribuído o .suspenso classe que representa um menu suspenso. Para permitir que o usuário possa abrir o menu suspenso, use um botão ou um link e atribua -o a .Classe suspensa E definir data-bs-toggle = "suspenso" Para tornar o menu alterável. Depois, crie uma lista não ordenada e atribua -a a .classe suspensa-menu, Considerando que atribua o .Classe suspensa-item a cada item da lista para fornecer opções ao usuário no menu.
Saída
Um menu suspenso foi criado com sucesso.
Como criar um divisor suspenso
Se você deseja separar os links ou opções presentes no menu com uma linha horizontal, use o .divisor suspenso aula. Isso pode ser útil em cenários em que os links presentes no menu pertencem a várias categorias.
Html
O restante do código é o mesmo que acima, com a única diferença que, a fim de separar o último link do restante dos links, estamos usando o
elemento para criar uma regra horizontal e atribuí -la .divisor suspenso aula. Observe que este divisor está sendo aninhado dentro de um item da lista.
Saída
É assim que criar um divisor horizontal.
Como criar um cabeçalho suspenso
Se você deseja adicionar um título a várias categorias de links dentro do menu, use o .cabeçalho suspenso aula.
Html
No código acima, antes de cada categoria de links, estamos aninhando um elemento dentro de um elemento e atribuindo o .cabeçalho suspenso aula. Dessa forma, um título será inserido antes de cada categoria de opções.
Saída
A saída exibe um menu suspenso com dois cabeçalhos.
Como atribuir estados ativos e deficientes aos itens em um menu suspenso
Para adicionar estados ativos e deficientes a links específicos dentro do menu, basta usar o .ativo e .desabilitado Aulas.
Html
No código acima, o primeiro link está sendo atribuído um estado ativo, enquanto o segundo link está sendo dado o estado deficiente. Um link com um estado ativo tem cor azul enquanto isso, um link com um estado com deficiência tem cor cinza claro.
Saída
O .ativo e .As aulas desativadas estão funcionando corretamente.
Como atribuir várias posições aos menus suspensos
Para estilizar seu menu suspenso, você pode atribuir várias posições, como END, Start, Right ou Up. Aqui cada uma dessas posições foi demonstrada.
Como atribuir a posição ascendente ao menu suspenso
Com o objetivo de atribuir uma direção ascendente ao menu, use o .Soltar-se aula.
Html
Algum texto.
Algum texto.
Algum texto.
O div que representa o menu suspenso foi atribuído o .Soltar-se classe que fará o menu abrir em uma direção ascendente quando o botão for clicado. Observe que adicionamos alguns Saída A saída mostra um menu que abre para cima. Como atribuir a posição final ao menu suspenso Para abrir o menu no final do botão suspenso, use o .soltar classe junto com o .suspenso aula. Html O código acima gerará um menu suspenso que será aberto no final do botão suspenso assim que o botão for clicado. Saída Aqui fizemos com sucesso o menu suspenso para abrir no final do botão. Como atribuir a posição inicial ao menu suspenso Esta posição funcionará de maneira oposta à posição discutida no exemplo anterior e essa posição pode ser alcançada usando o .dropstart aula. Html Para um menu suspenso com uma posição inicial, ele precisa ser colocado no final de uma página da web. Portanto, estamos usando o .Text-end classe junto com o .dropstart e .suspenso Aulas. Além disso, a seta será inserida antes do texto dentro do botão automaticamente. Saída O .A classe DropStart está funcionando corretamente. Como atribuir a posição correta ao menu suspenso Para fins de alinhar o menu suspenso ao lado direito, use o .End do menu suspenso aula. Html Se você deseja abrir seu menu suspenso no lado direito, em vez de cobrir todo o espaço abaixo do botão, atribua o .End do menu suspenso classe junto com o .classe suspensa. Observe que, para demonstrar corretamente o funcionamento desta classe, adicionamos um texto alongado dentro do botão. Saída O menu suspenso estava alinhado à direita com sucesso. Como adicionar texto simples a um menu suspenso Em alguns cenários, você deseja adicionar texto simples no menu suspenso, portanto, use o .suspenso-item-text aula. Html No código acima, um menu suspenso simples foi criado, enquanto no final dos links outro item da lista foi criado; No entanto, para adicionar texto simples em vez de usar a tag de âncora o A tag foi usada e foi atribuída o .suspenso-item-text aula. O texto foi colocado dentro do marcação. Saída Aqui está como você adiciona texto simples dentro do menu suspenso. Como criar um suspensão com botões agrupados Outra coisa interessante que pode ser feita usando menus suspensos é adicionar esses menus dentro de botões agrupados. Abaixo, demonstramos como isso pode ser feito. Html O código acima gera dois grupos de botões, cada um consiste em um único botão e cada botão tem um menu suspenso associado a ele. Cada um dos menus suspensos foi criado de maneira semelhante à demonstrada nos exemplos anteriores. Saída O menu suspenso vinculado ao primeiro grupo de botões. O menu suspenso vinculado ao segundo grupo de botões. Conclusão Com o objetivo de criar um menu suspenso, atribua o .suspenso menu para um contêiner de div que terá o menu suspenso dentro dele. Posteriormente, use um botão ou um link para permitir que o usuário possa abrir o menu suspenso e atribui -lo .Classe suspensa e Definir data-bs-toggle = "suspenso" Para tornar o menu alterável. Depois, crie uma lista não ordenada e atribua -a a .classe suspensa-menu, Considerando que atribua o .Classe suspensa-item a cada item da lista para fornecer opções ao usuário no menu. Este post discute como criar e estilizar um menu suspenso em detalhes.