Se quisermos fazer uma barra de navegação em HTML, temos que seguir os passos abaixo. Usando essas etapas, podemos criar facilmente a barra de navegação.
Passo 1: Primeiramente temos que digitar o código HTML em qualquer editor de texto ou abrir o arquivo HTML existente no editor de texto no qual queremos fazer uma Barra de Navegação.
Make a Navigation Bar
Passo 2: Agora temos que definir a tag na tag onde queremos fazer a barra.
You are at JavaTpoint Site.....
Etapa 3: Depois disso, temos que definir o
- tag , que é usada para mostrar a lista não ordenada. E então temos que definir os itens da lista no
- marcação. Temos que definir os itens que queremos mostrar na barra de navegação.
<ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site.....
Passo 4: Depois disso, temos que posicionar o cursor logo após o fechamento da tag title. E então, temos que definir a tag . Passo 4: Depois disso, temos que posicionar o cursor logo após o fechamento da tag de título. E então, temos que definir a tag.
Make a Navigation Bar
Etapa 5: Agora, temos que especificar diferentes atributos de id que são usados para definir a posição e cor da barra de navegação. Então, temos que usar o seguinte código na tag head. Também podemos alterar o valor dos imóveis de acordo com as nossas necessidades.
body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } Etapa 6: Depois disso, temos que digitar a tag logo antes da tag de abertura. E também temos que fechar essa tag. E, por fim, temos que salvar o arquivo HTML e depois executá-lo no navegador.
Make a Navigation Bar body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site..... Teste agora A saída do código HTML acima é mostrada na captura de tela a seguir:
