Desenvolvimento Web com Front-End - Aprendendo do Zero" HTML, CSS e JS - COMO FAZER MENU RESPONSIVE

MINUTAGEM DO VÍDEO 00:00 - INTRODUÇÃO 00:28 - CRIANDO UM INPUT TIPO CHECKBOX 00:45 - CRIANDO UMA LABEL HTML 01:04 - CRIANDO UMA NAV MENU 01:16 - CRIANDO AS LISTAS ( UL E LI ) 01:52 - CRIANDO UMA LISTA (UL LI DENTRO DE UMA UL LI ) 03:45 - CSS - DANDO MARGIM E ESPAÇO (NAVEGADORES) 03:52 - CLASS MENU - COM LARGURA , ALTURA E COR 04:24 - MENU UL- COMO TIRAR MARCAÇÃO DAS LISTAS E POSIÇÃO 04:36 - MENU UL LI - TAMANHO E FLUTUAÇÃO 04:52 - MENU A - ALINHAMENTO, ESPAÇAMENTO E COR 05:40 - MENU UL UL - ESCONDENDO O SUB MENU 05:54 - MENU UL LI:HOVER UL - MONSTRA UL INTERNA QUANDO MOUSE PASSA EMCIMA 06:10 - MENU A:HOVER - MUDANDO COR COM MOUSE 06:27 - MENU UL UL LI -FLUTUAÇÃO E BORDAS COM COR 06:50 - MENU UL UL LI A - COR. 07:10 - COMO CRIAR UMA LABEL 08:58 - DISPOSITIVO MAIORES 800PX BOTÃO FICA ESCONDIDO 09:10 - BOTÃO PARA LABEL 09:12 - COMO DEIXAR UM SITE RESPONSIVO HTML: Nesse video vamos trabalhar o comportamento da tela para que o site seja visualizado em dispositivos menores, como tablet e celulares. Assim, daremos responsividade ao nosso projeto. No documento index.html adicionamos um input do tipo checkbox e um label pois quando o site for visualizado numa tela menor a label ficará visível, simbolizando o menu. Após faremos a vinculação da label ao botão menu, usando na mesma opção para bt_menu, que no caso está se referindo ao id bt_menu. Uma nav com classe menu para colocar as listas ul e li e link do menu CSS: Iniciamos o css com um resete nos valores de espaçamento definindo as propriedades margin e padding com valores iguais a 0. Em seguida partiremos para a estilização de cada item do menu. Estilizando a nav da classe menu, que terá largura, altura e background com cor. Para as listas, no menu usaremos duas propriedades, uma de posição e a outra retirar marcações. Para cada item de lista li, colocaremos largura e flutuação para esquerda. Para os links, iremos definir espaçamento, alinhamento de texto, background com cor e retirar marcações. Agora, vamos esconder os sub menu adicionando posição e visibilidade Vamos fazer com que a ul interna mostre seus itens quando passarmos o mouse sobre o menu. Para isso usaremos hover para aquela propriedade e visibility: visible. Alterar a cor de fundo dos itens no momento do hover, ou seja, quando passarmos o mouse sobre o menu os subitens mudarão as propriedades background-color e a cor terá outro valor. Melhorando a visualização dos itens internos de li, alterando o valor de flutuação e com bordas Agora vamos alterar a cor dos subitens do menu para dar um efeito mais atrativo ao menu. Para isso iremos colocar um background com cor O próximo passo é estilizarmos o botão menu, seguinte como espaço, tamanho, alinhamento, cursor, cor , bordas, posição. Para deixar o site responsivo temos que fazer um @média query ,com ele a disposição do site quando a tela fica com uma dimensão inferior a 800px, mudará o formato da tela #FrontEnd #Html #Css #Tutorial #NavBar #Menu #MenuResponsive #NavigationBar Música: Sunny Travel - Nico Staf (Integrated Development Environment )IDE: Microsoft Visual Studio IDE:(Integrated Development Environment ) Microsoft Visual Studio Code Shotcut: Editor de vídeo Software para gravar a tela do computador: OBS Studio. Dicas de site: https://www.w3schools.com/default.asp Tabelas de cores: https://www.flextool.com.br/tabela_cores.html