🎬#parte1: Continue Assistindo! • Com fazer menu com HTM...
Menu Hambúrguer: O menu hambúrguer é uma opção mais compacta e minimalista, ideal para sites com layout responsivo. Ele é composto por três linhas horizontais que se transformam em um menu vertical quando clicadas, revelando as opções de navegação. É uma opção prática e popular para sites que são acessados principalmente em dispositivos móveis.
No HTML, foi criado um container que envolve um menu de navegação.
O menu de navegação consiste em um input do tipo checkbox e um label que atua como botão.
O label contém três elementos span, que representam as linhas do ícone de menu hamburger.
O CSS define o estilo padrão do documento, zerando as margens e paddings e especificando a caixa de modelagem como border-box.
Define também a cor de fundo para o corpo e html.
O JavaScript adiciona um evento de escuta para o carregamento do DOM.
Quando o checkbox do menu é alterado, uma classe active-line é alternada para as linhas do ícone de menu, criando um efeito de ativação visual.
Esses são os principais elementos criados em cada parte do código. Cada parte desempenha um papel crucial na funcionalidade e aparência do menu de navegação.
✨ Compre na Amazon:
amzn.to/3UgqOhL
Saiba mais
📌 / webonlinedesenvolve
📌github.com/Web...
🎵 Música: Back to future - Ofshane
✨IDE: ( Integrated Development Environment )Microsoft Visual Studio.
✨IDE: ( Integrated Development Environment ) Visual Studio Code.
EXTENSÕES VISUAL STUDIO CODE:
LIVE SERVER: Carrega a página automaticamente.
BEAUTIFY : Padroniza a formatação do código
COLOR HIGHLIGHT : Mostra as cores que você está criando no arquivo css.
INTELLISENSE FOR CSS: Fornece o auto completo da classe que você escreveu no seu código.
✨Tema do VS Code: Escuro+ (Escuro padrão)
✨Software Editor de videos: Shotcut.
✨Software para gravar a tela do computador: OBS Studio.
Google Fontes:
fonts.google.com/
⭐ Biblioteca JavaScript
cdnjs.cloudfla...
Fontes de ícones
🔎fontawesome.co...
🔎fontawesome.com/
Ambiente de Desenvolvimento:
codepen.io
HTML E CSS:
🔎www.w3schools....
Site de verificação de erro:
🔎validator.w3.org/
Tabelas de cores:
🔎www.flextool.c...
Imagem para baixar:
🔎pixabay.com/pt/
Site para criar Thumbnails:
🔎www.canva.com/
7 сен 2024
