Video není dostupné.
Omlouváme se.
Estilizando Itens de Menu [Navegação] com CSS e JavaScript
Vložit
- čas přidán 6. 08. 2024
- Vamos aprender como criar um menu de navegação dinâmico utilizando CSS e JavaScript.
Saiba como destacar a página ativa com estilo personalizado, simulando a seleção de páginas usando inputs radio e implementando visualmente a mudança da página ativa apenas com CSS.
Descubra como o JavaScript pode ser empregado para identificar a página atual, comparar informações da URL com os links do menu e automatizar o destaque da página ativa em um menu de navegação interativo. Aprimore suas habilidades de desenvolvimento web e adicione interatividade aos seus menus com as técnicas abordadas neste guia prático.
[00:00] 🖥️ Menu de navegação dinâmico com CSS
- Criar um menu de navegação com estilo,
- Usar inputs radio para selecionar páginas,
- Mudar visual da página ativa com CSS.
- [04:04] 🛠️ Implementação do menu dinâmico no VSCode
- Identificar página atual com JavaScript,
- Comparar URL e links do menu para destaque,
- Automatizar identificação da página ativa.
Mais conteúdo?
↪ maykbrito.dev
Sugestão, Topicos que um freelancer tem que ter antes de fazer o orçamento ?
Boa, Mayk! No projeto do "Beauty Salon" os títulos do menu vão mudando conforme o usuário vai "scrollando" a página e passando pelas seções; Se o usuário estiver na seção "sobre", o título no menu "sobre" fica com o estilo como se tivesse "checked", ou "mouse hover", e quando o usuário sai dessa seção, ele volta ao estado original. Vc poderia fazer um short de como faz?
Acredito que dê pra fazer com Intersection Observer, seria interessante ver o @MaykBrito desenvolvendo uma solução assim
Vou dar uma olhada pra lembrar como fizemos, e monto um conteúdo pra gente! Obg pela sugestão!
Cadê o design elegante e criativo?
Opa! Removi a thumb. Obrigado pela observação.
Infelizmente a capa não condiz com o vídeo. Eu já acompanho a anos e é Lamentável ver que precisa disso para atrair visualização
Obg pela observação (um pouco carregada de sentimento negativo kkkk). Removemos a thumb ;)
@@maykbrito pior que não foi ofensiva, a palavra Lamentável que pode parecer grosseira. Sei que produzir conteúdo para CZcams não é fácil e ainda conciliar com as rotinas do dia a dia / trabalho.
Mas continue da forma humilde que sempre foi, é dessa forma que a gente te admira e segue. Por mais que outros façam clickbait para atrair cliques e visitas. Atrapalham os que entram pensando em uma coisa e vê outra. As vezes temos 30 minutos para ver uns vídeos naquele momento. Lógico que depois com tempo assistimos todos os vídeos que ainda não vimos. Abraço
@@andremof bem tranquilo. É que o pessoal que monta as thumbs e títulos para o canal, inclusive os editores, não são profissionais da área e eu não consigo ver todos os vídeos, thumbs e títulos que saem. Por isso, quando usei o termo "negativo" para me referir a sua observação, eu quis me referir a sua percepção negativa das coisas, presumindo que estamos buscando click bait. E como você curte meu trabalho e me acompanha a tanto tempo, você deveria saber que eu não busco clickbait, holofotes ou coisas assim, apenas faço meu trabalho buscando ajudar pessoas. Obg pela consideração ;)
Obs.: Se bem que esse meu comentário pode parecer que fiquei ofendido ou algo assim, mas digo que não, bem tranquilo mesmo. Apenas senti vontade de conversar um pouco mais contigo, pois percebi a consideração que vc tem pelo nosso trabalho e gostaria de de explicar o motivo de ter saído de uma maneira meio fora do comum. E mesmo se um dia a decisão do time for fazer clickbait, tá tudo certo também, afinal, quanto mais pessoas a gente puder alcançar, melhor, não é mesmo? Valeu, Andrezão! Aparece mais vezes por aqui e nas lives! É muito bem vindo 💛