Como criar: botão de menu alinhado à direita
- Página anterior Link de navegação de borda inferior
- Próxima página Link de menu centralizado
Aprenda a criar uma barra de navegação com links alinhados à esquerda e à direita.
Criar barra de navegação superior
Primeiro passo - Adicionar HTML:
<div class="topnav"> <a class="active" href="#home">Início</a> <a href="#news">Notícias</a> <a href="#contact">Contato</a> <div class="topnav-right"> <a href="#search">Pesquisa</a> <a href="#about">Sobre</a> </div> </div>
Segundo passo - Adicionar CSS:
/* Adicionar cor de fundo preta para a navegação superior */ .topnav { background-color: #333; overflow: hidden; } /* Definir estilos para os links da barra de navegação */ .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Mudar a cor do link ao passar o mouse sobre ele */ .topnav a:hover { background-color: #ddd; color: black; } /* Adicionar cor para links ativos/atuais */ .topnav a.active { background-color: #04AA6D; color: white; } /* Parte alinhada à direita da navegação superior */ .topnav-right { float: right; }
Página relevante
Tutorial:Como criar uma barra de navegação superior responsiva
Tutorial:Barra de navegação CSS
- Página anterior Link de navegação de borda inferior
- Próxima página Link de menu centralizado