Bem-vindo de volta ao curso da KnowledgeCity em folhas de estilo em cascata. Eu sou Cliff Brozo, sou seu instrutor. E hoje, você adivinhou, vamos falar sobre menus. Veremos alguns menus suspensos, veremos a animação na forma de um círculo, vamos deslizar o menu da barra lateral, vamos explorar o que é um menu inferior fixo, e haverá um bônus no final. Você está com fome de aprender? Eu estou, vamos Vamos começar com um menu suspenso simples. E o menu suspenso pode apresentar tantos menus suspensos Como você quiser. Neste caso, este do lado direito da tela, veremos a animação. E quando você pode clicar em um menu de hambúrguer, e, de repente, temos submenus que aparecem. E vou pedir que tente se lembrar um pouco de sua geometria do 10º ano conforme discutimos os planos x, y e z no espaço 3D. As navegações deslizantes saem do lado quando você clica em um menu aberto, e você tem uma escolha de submenus assim que os menus forem abertos. Claro, então você pode fechar o menu. Menus fixos na parte inferior são coisas a que estamos acostumados se você já usou seu telefone, todas as navegações na parte inferior. E, como era de se esperar, também podemos fazer isso em uma página da web. Por fim, falei um pouco sobre um bônus, veremos como colocar ícones como parte de seu menu. Vamos dar uma olhada em como tudo isso funciona. Vamos começar com um menu suspenso. O código para ele tem uma lista não ordenada de HTML direto, que apresenta um, dois, três itens, e um quarto item que faz o menu suspenso. Eu criei uma classe chamada botão de soltar. E isso está em CSS. E é sobre isso que vou recorrer, para fazer esse recurso suspenso funcionar. Vamos dar uma olhada em como isso funciona. Nada acontece quando eu pairo sobre a cidade do conhecimento. Nada acontece quando eu passo o mouse sobre a programação do computador. Nada acontece para o ícone da barra de navegação. Mas quando chego ao CSS, esse é o que tem o botão de soltar classe. O que me permite fazer, é escolher os submenus desta lista. Conforme eu passo sobre eles, as cores mudam, e isso é o que é tratado em CSS. Aqui está o código. A parte principal deste código trata do conteúdo suspenso. O resto é semelhante aos menus de navegação normais. Mas nosso conteúdo suspenso me permite pairar sobre algo e mude as cores por causa desta seção de foco. Considerando que normalmente minha cor de fundo é chiffon de limão na lista suspensa. Ao passar o mouse, mudei a cor de fundo para Dodger blue. Isso acontece na linha 56. No CSS, a cor se torna chiffon limão, e a cor de fundo é azul Dodger. Conforme eu me afasto, e eu não estou pairando sobre esses itens, então a cor de fundo é chiffon limão, e a cor do texto é azul Dorger. Mais uma coisa sobre esta caixa de lista suspensa. Temos algumas sombras de fundo. E como você pode ver, eu tenho uma sombra de caixa na linha 41 aqui. Você se lembrará da sombra da caixa de uma lição anterior onde falamos sobre quão longe a sombra vai para a direita, quão longe, quanta dispersão, e qual é realmente a cor da sombra. E isso nos permite criar um menu de lista suspensa. O próximo é o nosso menu circular. Nosso menu circular é exibido em um navegador de tamanho completo. No meio, tenho um círculo com três linhas nele, e isso parece um menu de hambúrguer normal. E eu adicionei no plano x, y e z para mostrar como essas linhas realmente se moverão. Quando passo o mouse sobre o menu, ele aumenta de tamanho. Quando eu clico nele, os submenus aparecem. Quando eu clico novamente para fechá-lo, os menus desaparecem. Vamos dar uma olhada no código HTML por trás disso. O código é padrão. Eu começo com a imagem que me mostra meu pequeno gráfico de x, y e z. E então eu uso o tipo de entrada da caixa de seleção para que eu saiba quando algo foi clicado e quando clicam no menu Abrir, Eu sei que devo chamar essa função, quando eles clicam no X, Eu sei que devo fechar o menu. A parte sobre a geometria do 10º ano vem agora. Temos três linhas, e essas três linhas vão se mover, o do meio vai desaparecer. Os outros dois vão girar para cima e para baixo. E você tem que observar cuidadosamente enquanto isso acontece. Os itens que irão aparecer são os itens em meus links para outras páginas. Vamos clicar aqui várias vezes para ver acontecer. Agora você tem que observar com atenção, o que vai acontecer é o canto superior direito vai cair 45 graus. O canto inferior direito vai subir 45 graus, e isso formará a letra X. Enquanto isso acontece, a linha do meio vai desaparecer. Vamos assistir algumas vezes. Observe atentamente enquanto clico nisso algumas vezes. (Música animada) Vejamos o código CSS. Começamos com o nosso botão de abertura. E o botão Abrir é codificado com um raio de borda de 100%. E isso me dá um círculo perfeito. Eu crio a largura e a altura desse círculo a 80 pixels, e eu o coloco em uma posição absoluta. Estou movendo 85 pixels da margem esquerda, e quando ele abrir, quero facilitar a transição. Agora você notará que este código da linha 32 a 37 parece ter sido escrito duas vezes. E isso porque diferentes navegadores precisa ver o código de maneiras diferentes. A seção do WebKit do painel é projetado para navegadores que precisam ver dessa forma, como os outros navegadores pode apenas lidar com uma transformação direta. Vou traduzir as coisas para o espaço tridimensional. E eu tenho um local x, um local y, e localização az. Se você pensar em x como para trás e para frente, y é a esquerda e a direita, e z é para cima e para baixo, você terá uma ideia de como essas coisas se movem no espaço tridimensional.
