lojaTec-landingPage
GalaxyTec - Projeto Front-end👨💻
Site de uma loja de tecnologia.
Ferramentas utilizadas🛠️
Para a elaboração do projeto, foram usadas as tecnologias:
-
JavaScript
-
HTML
-
CSS
Sobre o projeto📃
Esse é um projeto feito inteiramente com HTML, CSS e um pouco de Javascript. Sendo um site de vendas e exposição de tecnologia, de aparelhos tecnologicos. Sua estrutura foi feita inspirada em diversos sites referência na área, como Dell e Samsung.
Fiz esse projeto com intuito de treinar e aplicar meus conhecimentos em HTML e CSS.
Acessar projeto ✈
◻GalaxyTec - site de Tecnologia
JavaScript
Menu mobile
Para fazer o menu mobile para aparelhos menores, foi feito de forma bem simples. Primeiro, o botão foi colocado diretamente no HTML. No CSS, em telas maiores o botão é definido como "display: none" para não aparecer em tela, quando a largura da tela alcança 900px, ele é definido como "display: block".
HTML & CSS do botão
Variáveis Importantes
Para a funcionalidade do menu mobile, primeiro foram criadas as variáveis mais importantes. Que são elas:
- menuMobile - Armazena o conteiner de todo o menu;
- botaoMobile - Botão que vai abrir e fechar o menu;
Abrir e fechar menu
Para criar a funcionalidade de abrir e fechar o menu, fiz de forma bem simples. No botão para abrir o menu, que é a variável botaoMobile, foi definido um evento de click usando o "addEventListener()" que chamará a função abrirEFecharMenu()
Com o clique, a função e ativada. A função é responsável por adicionar ou remover a classe “ativo” do elemento HTML que contém os botões de acesso do menu mobile e do botão mobile. Essa classe é responsável por mostrar ou esconder o menu mobile. Fazendo assim, quando o clique for dado no botão o menu apareça, quando outro clique for dado o menu vai fechar.
A classe ativo no botão mobile foi colcada para fazer a alteração do texto no botão. Isso porque o botão é da biblioteca do google icons, e alterando o conteúdo do botão é possivel mudar sua aparência.
Para fazer essa alteração, na função "abrirEFecharMenu" utilizei a estrutura condicional IF. Fazendo da sequinte forma: Quando se botaoMobile tiver a classe ativo, troque seu conteúdo por "close", se ela não tiver a classe ativo, troque por "menu". Fazendo a alteração do icone do menu mobile.