Skip to content

apaulineoliveira/dropdowns-menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Dropdown Menu

Menu Dropdown feito em Javascript (split button).

🧵 Objetivo

O propósito deste projeto foi construir um menu dropdown feito em html, css, bootstrap (framework css) e javascript.
A ideia inicial era tornar este repositório um compilador de projetos de menus estilo dropdown para reforçar cada vez mais os conhecimentos em javascript e experienciar novas formas de fazer menus com essa estética. Ao longo do tempo serão feitas atualizações dos modelos mencionados acima.

Sobre o código

Dentro do arquivo html optei em criar códigos simples e intuitivos com o objetivo de facilitar a compreensão e assertividade do mesmo; Construi os itens do menu em formato de lista com li e dentro de cada item adicionei uma tag button onclick com a função toggleDropdown() a qual será responsável por abrir e fechar o menu, e determinar o que constará dentro dele. Além disso, utilizei o elemento i para setar os ícones dos elementos com bootstrap.


Na estilização do projeto (css)



🧵 Purpose

The goal of this project was to build a dropdown menu made in html, css, bootstrap (css framework) and javascript.
The initial idea was to make this repository a compiler of projects for dropdown menus to strengthen even more the knowledge in javascript and experience new ways of making menus with this aesthetic. Over time updates will be made to the models mentioned above.

About the code

Inside the html file I chose to create simple and intuitive codes with the aim of facilitating its understanding and assertiveness; I built the menu items in list format with li and inside each item I added a button onclick tag with the function toggleDropdown() which will be responsible for opening and closing the menu, and determining what will be inside it. In addition, I used the i element to define the icons of the bootstrapped elements.


In project styling (css):

Releases

No releases published

Packages

No packages published