Criando um menu horizontal com HTML e CSS

e aí e ai pessoal seja bem vindo a mais uma vídeo aula aqui no estado ela só eu segurar correia e hoje nós vamos aprender a fazer um menu horizontal tá esse aqui é uma troca então mas nós vamos fazer algo bem parecido com isso daqui né então isso é uma barra em horizontal e vários itens a lei lado a lado né então país sente pausar aqui html e css não vamos usar o script nada do tipo eu já tenho aqui a minha pasta do meu projeto tá então já queria que me a pasta você

cria sua pasta eu vou estar utilizando aqui isocold e sem enrolação a gente vai criar aqui então a alguns arquivos né nem sei se tiver a usarem medi aqui mas enfim a gente vai criar que tem uma pasta chamada descesse e outra de mg aqui em css tiver criar um arquivo que eu vou chamar de sayo pontos ss e que embaixo a gente vai ter um cara que faz chamar de inglês pão pagar remédio tá importante a gente cê tá extensão porque assim que navegador vai entender depois e aqui então meu visual code eu já

tenho aqui uma abreviação variação do emitir que ele já traz para gente aqui o alto complique site onde tem aqui um boxe thai que vocês ficam pela vereadora que nós estamos utilizando html5 definir qual que é o idioma da nossa página tá então português brasil qual que é o mapa de caracteres qual que é o uso inicial da nossa parte não é o sumo de um ponto zero ao 7 não tem que dar uns um para poder processar o elemento e que eu vou chamar de 1 - css sim - porquê - porque a gente

vai criar outros menos depois tá o melhor menu e horizontal vamos criar com menu horizontal nos manter assim vai e aqui nesse style vamos trocar para vamos manter esse mesmo my style aqui em cima espero importar aquele nosso arquivo desistiram tá mas antes disso como as abrir ele aqui para gente ver como vai ficar né vamos colocar ele aqui side by side com visual code gente vai cortando aqui e vendo esses caras aqui lado a lado né então aqui eu tenho meu style style perdão desculpa aqui a gente vai ter nosso link hair style street

style e a quinta tá dentro da pasta css tão dentro da pasta css busque para gente o arquivo chamado style pontos ss tá importante passar aqui o caminho atualizando nada acontece a gente pode ficar com o botão direito e inspecionar elemento eu tô usando ó por isso pode variar de browser para browser tá chrome tudo mais aqui network por exemplo e eu já fiquei foi carregado tu tivesse passado um arquivo existente ali ele é dar um ruim para gente tá então a gente coloca aqui cozinho certo aqui ó ele fala que ele houve uma falha

carregar esse arquivo né é esse a gente vê aqui no cabeçalho para ver que que retornou para a gente ó fala que não foi possível carregar uma requisição deixa eu ver que um por viu o espaço sentar e não retornou 404 mas ele falou que não conseguiu carregar né e pra gente ter certeza que está funcionando até tem mania de colocar aqui no bari normalmente um background-color uma cor bem forte né é tão vermelho funcionou que quer fazer primeiramente vai dar um reset no nosso style então a gente vai pegar o nosso margem passar zero

alto então gente vai fazer basicamente nosso site já fique centralizada porque ele não vai ter mais coragem e margem nenhuma né é que zero também pede só todos os elementos hospedem deles são zero a gente vai pacificar qual que é o prédio em que a gente quer a gente vai ter que um box size vai ser o powerbox então basicamente eu tenho uma div com 10 pixels e fala qual com um pé gente mais 10 aí dá que acontece que vai pegar os dez que já tem da minha diva e vai ter mentar umas dez

para cada lado e também tipo vai ficar com 20 pixels tá só desenho aqui para vocês entender que você que é extremamente importante isso impactar no projeto mais adiante tá então por exemplo tem aqui pode vir com 20 pixels e oi e aí filhota um pezinho de 10 pixels né então essa devia aqui ela vai entender mais 10 para cá e mais 10 para cá então totalizando aqui 20 com mais 10 com mais 10 então total que vai ocupar isso daqui é de 40 pixels e às vezes acabam quebrando layout mais que a gente quer

em que a gente pode fazer para resolver isso daí eu falar que eu tenho uma diva de 20 pixels é só que eu quero um espaçamento aí de 5 pixels para cada lado nas 5 pixels para esquerda e cinco para direita então o box size faz remover desse 20 então é mais 20 fixasse a diva é diva agora ela passa a ser 15 pizzas foram 10 pixels para ter de cinco espaçamento aqui e simples passo a gente aqui então leite da própria largura para colocar o espaçamento tais quem está fazendo aqui também se atualizar nossa

página 9 raps não é nada acontece por quê porque não tem nada a prova depois a gente ter nosso melãozinho aqui a gente vai usar listas não ordenadas então anderlist para onde você deve ter visto na internet várias vezes né então tem que um homem a gente tem que sobrem pequenos somos e a gente tem um contato e vamos deixar um bônus aqui né sei lá entrar tô chutando aqui tá então a gente tem aqui ou nosso carinha tá eu vou dar um identificador para esse cara um eyed porque vou dar um identificador porque se

você for pegar esse código akifusa diretamente e eu não colocar um identificador eu simplesmente vim aqui falar que todas as o eles devem deve pegar todas as todas as mulheres do meu projeto vai sumir no pode ser com seu projeto crescer funcional não tem um probleminha tá tão legal especificar quem a gente quer então para isso eu vou dar um nome de agir tá então nesse caso a gente sabe que é uma único elemento por contexto então menu horizontal tá ó o menu h vem no lugar vai ficar mais curtindo para gente né que olha

só aqui né a gente tem tudo esses caras e tem um problema né porque funciona da seguinte forma galera como a gente zerou ali ao par g1 e vai notebook e colocar aqui um hashtag me no lugar agora foi como eu dei aqui um mar de insere um pé de 10 encham tá vendo muito bem mas aqui ó tem uns boletos tá torre que a gente vai fazer eu vou vir aqui nesse meu menu h que agora ele tem acesso ao here tá então o que eu posso fazer aqui eu posso vir aqui e fala

o seguinte lista style type e passar nome tá e os bolos são removidos eu gosto de passar a lista está iônico porque remove e meio de posição tá que move tudo ali tá então eu passo não né aqui a gente tem que também um pede zero tem um espaçamento ele tá aqui um pouquinho para frente não quer isso tá então basta uma distância de equipamentos que eu faço tá é só tirei isso aqui pra gente poder ver que tá acontecendo aqui de fato legal e eu quero ter link nesses caras né então para isso a

gente vai colocar aqui uma âncora netão o chefe colocar o hashtag aqui tá home então não sei lá colocar com a nossa tps a equipe último o entrar então colocar um hashtag aqui só para explicar minha para lugar nenhum tá vamos tem aqui o nosso site tá então para onde a gente vai então vamos sobre só para dizer para a gente sempre ficar aqui que tá acontecendo tá só colocasse um pouquinho mais para cá porque eu acho que a gente consegue um pouco mais de espaço legal então a gente tem esses caras aqui então eu

tenho aqui o meu menu né gente viu aqui como funciona só que os caras estão horríveis vamos começar um pouquinho mais de carinha para ele então aqui menu h e no caso a nossa wesley tá então às vezes eu colocar o air aqui específico qual elemento eu quero trabalhar tá então por isso que a gente colocou esse aí dia que ok então ela eu quero que todos os seus filhos l eles sejam da spray a elaine ficou um ao lado do outro perfeito legal agora eu quero que o seguinte todos os seus filhos de heli

que sejam todos os filhos de eli que sejam a que seja uma âncora só quebrou aqui para gente ver melhor né todos os filhos de de ali que seja uma âncora eu quero que apliquem um novo estilo para a gente tá então para gente começar eu vou pegar esse carinha aqui do fundo eu vou colocar um beck por áudio color para ele pega onde power e eu vou colocar aqui uma cor qualquer fff só trabalho aqui para mim o color picker tá então vou pegar aqui um mais umas duas aqui vai ser uns um cinza

aqui mais ou menos é só quero essa cor de fundo contra você e olha aí legal né é tão tratar um lado do outro de certo modo já temos o nosso menu funcionando né é que quem que pode fazer aqui agora a gente pode vir aqui nesse menu l a colocar aqui um color um dois três na três branco legal eu posso vir aqui e colocar um outline o perdão outline none offline não text-decoration culpa gente text-decoration e aqui eu coloco nome sem decoração de texto tá esconder laine ali não queremos eu quero um predinho

de 10 pixels desses caras os 10 pessoas legal eu quero que eles sejam display inline o blog porque porque tá vendo aqui ó quando eu clicar nesse cara eu não quero que explicar com um pezinho vai só ver aqui ó e antes disso antes a chover aqui no google fortes que isso impacta também que a gente tá fazendo aqui né vamos procurar uma fonte que né tem um tem uma o pensa amo ou pensamos lá para o roubou aonde open sans então quero uma pensão irregular de 400 ok eu quero embedar esse cara e quero

fazer uma roupa importa então aqui no meu css eu vou copiar esse cara eu vou colocar aqui em cima tá para fazer com html também ali importante e tal então gente coloca esse cara aqui lá em cima para importar sua fonte tá é que eu coloco se eu trocar esse aqui é um bom a pessoa quiser colocar aqui font-family verdana arriar ocorre e no cortar esse cara no impacto que nada tá é que eu só quero usar uma pontizinha pouquinho mais bonitinho aqui tá mas tem que 1l a o meu pede não tá rodando aqui

deixo só colocar canuelly para a gente ver também não é deixa eu ver aqui porque não é no block só com elaine ele também não tá certo online mesmo porque pessoal fiz alguns ajustes aqui então mantivemos martin 0 alto aqui box-size não mudamos aqui o nosso menu galista ione pede 10 pegraud não houve alterações aqui o menu ela e eu acabei colocando online acho que lá no bloco não fazem muito sentido aqui tá só que vai deixar nem online e aqui no menu ela e eu coloquei pede em 20 pixels para ficar um pouquinho grandinho

e que um display inline-block pai um text-decoration acho que uma vez repetindo duas display aqui e por isso que não tava funcionando e agora a gente vai ter um outro carinha aqui que é o l a rover sabia que envolver e quando a gente colocar essa cor de passar o mouse sobre esse cara quero trocar essa cor aqui então eu quero colocar um azulzinho aqui tá então vamos vir aqui e vamos pegar um azul e pegar umas legal aqui para gente esqueci tão aqui tá interessante vamos ver agora quando a gente passar o mouse não

deixa eu vir aqui no e se bem que esse é o background color é verdade escola e agora sim olha o que acontece se a gente passar só online aqui não posso ficar em um blog e quebra e mais do que isso também trocar com online block sem face simular um probleminha só para gente tentar entender aqui acho que não vai rolar mas acontece a gente tem que colocar aqui um inline-block porque senão o nosso link ele vai ficar só com aquele pedacinho ali né por exemplo se eu vim aqui em ali colocar um pezinho

de 30 pics ou seja só vai ser consigo emular o problema está consegue aqui deixa eu ver aqui há 30 pixels na não conseguimos ao problema mas enfim a gente usa o display block aqui para que para que nosso link tá vendo que eu passe o mouse aqui esse cara também seja aplicava né é só deixar aqui tirar esse pertinho daqui deixa eu ver 30 pixels inline-block e aqui tá certo tá vendo nós que a gente quer a gente quer que se âncora que se a preocupe tudo né todo o espaço que ele tem disponível

por isso que a gente coloca um display porque senão a tabela tem que ficar bem aqui em cima para funcionar isso não é legal né então por isso que a gente coloca aqui um display blog não coloca um predinho aqui no l né para aqui ó fique desse jeitinho mas tocar só mais um cara aqui que é o transition transition se eu não me engano é o background de ponto 3 segundos isso mesmo tá vendo então tem um fade aqui para gente conseguir chover 6 a horta vendo então demora um pouquinho para mudar a cor

eu não gosto de colocar o alpen coloca o alvo aqui porque até na tá vendo na hora de criar um a página também tem essa transição e isso acaba atrapalhando um pouquinho layout depois tá então olhar a gente tem aqui vou deixar a ponta o quadro segundos e só para finalizar né que é é um crime deixar um código desse jeito a gente vai colocar escritura de nave tá então nave the navigation só pega semântica do html5 que ter feito isso no começo peço desculpas e a gente vai colocar esse cara aqui dentro né então

basicamente aí de mim no lugar aí a gente vai vir aqui agora a e no h u l u l a uellen e wellington porque agora esse mesmo lugar não tem mais acesso direto ao l ta ele é o pai eo l é o filho tá então por isso que a gente colocou aquele nada você que é uma tag ser mágico porque por exemplo o google vai ter que sair uma página do seu site ele viu lá tipo a existe quem somos só que tem somos que tem na sua página não é do conteúdo do

artigo não é uma palavra especial não é o título ao entendimento até para anúncios também né de uma biblioteca e tal você coloca enviar é uma viga este homem não é então nem coloca em coloca esse cara ali dentro tá então é basicamente isso então assim a gente encerra aqui nosso menu e como prometi deixar um bons aqui no final que a gente vai fazer né eu vou deixar pronta aqui para não ficar grande aula e já volto ok então a gente veio aqui e simplesmente e colocou menu h o l l o último filho

dessa lista o item a o filho âncora qual aquele para a direita e multi background-color dele tá vendo olha só então agora nós temos um menuzinho vamos curado na direita né é só puxa o professor mais estresse se daqui não tá legal aí você pode colocar aqui arrumasse convite nesse menu aqui né max max switching de 800 pixels e aí você consegue limitar que o tamanho desse cara tá é uma forma de fazer isso use você quer poderia vir aqui ó menu a h e coloca esse cara ali ó e você tem esse limite ele

e respeita o fundo aqui também né então com esse fundo aqui ó gente nem precisaria desse background aqui né só salvar para vocês verem olha aí ó legal né então era isso era isso a ideia da aula você pegou tenham gostado tenha curtido já deixa o seu like aqui porque eu tô pensando em deixar trazer mais um menu horizontal e mais um menu drop-down com três níveis né algo nesse estilo aqui ó então se você quer vendo o céu se você quer ver essas próximas aulas deixe o seu like deixe seu comentário e se inscreva

compartilhe com os amigos aí compartilhando a sua rede social para chegar no máximo de número de pessoas possíveis e ajudar outras pessoas assim como ajudou você quem forte abraço eu vou ficando por aqui a gente se vê em breve