CURSO COMPLETO HTML5 CSS3: CSS Barra de navegação horizontal

CSS Barra de navegação horizontal

Existem duas maneiras de criar uma barra de navegação horizontal. Usando itens de lista embutidos ou flutuantes.

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

li {

display: inline;

}

</style>

</head>

<body>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#notícia">Notícia</a></li>

<li><a href="#contato">Contato</a></li>

<li><a href="#ajuda">Ajuda</a></li>

</ul>

</body>

</html>

display: inline; - Por padrão, os elementos <li> são elementos de bloco. Aqui, removemos as quebras de linha antes e depois de cada item da lista, para exibi-los em uma linha

Itens de lista flutuante

Outra forma de criar uma barra de navegação horizontal é flutuar os elementos <li> e especificar um layout para os links de navegação:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

}

li {

float: left;

}

li a {

display: block;

padding: 8px;

background-color: #dddddd;

}

</style>

</head>

<body>

<ul>

<li><a href="#noticia">Notícia</a></li>

<li><a href="#contato">Contato</a></li>

<li><a href="#ajuda">Ajuda</a></li>

</ul>

<p>Nota: Se !DOCTYPE não for especificado, itens flutuantes poderão produzir resultados inesperados</p>

<p>Uma cor de fundo é adicionada aos links para mostrar a área do link. Toda a área do link é clicável, não apenas o texto.</p>

<p>Nota: overflow:hidden é adicionado ao elemento ul para evitar que os elementos li saiam da lista.</p>

</body>

</html>

float: left;- Use float para fazer com que os elementos do bloco flutuem um ao lado do outro

display: block;- Permite-nos especificar o preenchimento (e altura, largura, margens, etc. se desejar)

padding: 8px;- Especifique algum preenchimento entre cada elemento <a>, para torná-los bonitos

background-color: #dddddd;- Adicione uma cor de fundo cinza a cada elemento <a>

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #dddddd;

}

li {

float: left;

}

li a {

display: block;

padding: 8px;

}

</style>

</head>

<body>

<ul>

<li><a href="#noticia">Notícia</a></li>

<li><a href="#contato">Contato</a></li>

<li><a href="#ajuda">Ajuda</a></li>

</ul>

<p>Uma cor de fundo é adicionada à lista em vez de cada link para criar uma cor de fundo de largura total.</p>

<p>Nota: overflow:hidden é adicionado ao elemento ul para evitar que os elementos li saiam da lista.</p>

</body>

</html>

Exemplos de barras de navegação horizontais

Crie uma barra de navegação horizontal básica com fundo escuro e altere a cor de fundo dos links quando o usuário passar o mouse sobre eles:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover {

background-color: #111;

}

</style>

</head>

<body>

<ul>

<li><a href="#noticia">Notícia</a></li>

<li><a href="#contato">Contato</a></li>

<li><a href="#ajuda">Ajuda</a></li>

</ul>

</body>

</html>

Link de navegação ativo/atual

Adicione uma classe "ativa" ao link atual para que o usuário saiba em qual página ele está:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active) {

background-color: #111;

}

.active {

background-color: #04AA6D;

}

</style>

</head>

<body>

<ul>

<li><a href="#noticia">Notícia</a></li>

<li><a href="#contato">Contato</a></li>

<li><a href="#ajuda">Ajuda</a></li>

</ul>

</body>

</html>

Links de alinhamento à direita

Alinhe os links à direita flutuando os itens da lista para a direita ( float:right;):

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active) {

background-color: #111;

}

.active {

background-color: #04AA6D;

}

</style>

</head>

<body>

<ul>

<li><a href="#noticia">Notícia</a></li>

<li><a href="#contato">Contato</a></li>

<li style="float:right"><a class="active" href="#ajuda">Ajuda</a></li>

</ul>

</body>

</html>

Divisórias de fronteira

Adicione a border-rightpropriedade a <li> para criar divisores de links:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

li {

float: left;

border-right:1px solid #bbb;

}

li:last-child {

border-right: none;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active) {

background-color: #111;

}

.active {

background-color: #04AA6D;

}

</style>

</head>

<body>

<ul>

<li><a href="#noticia">Notícia</a></li>

<li><a href="#contato">Contato</a></li>

<li style="float:right"><a href="#ajudat">Ajuda</a></li>

</ul>

</body>

</html>

Barra de navegação fixa

Faça com que a barra de navegação fique na parte superior ou inferior da página, mesmo quando o usuário rola a página:

Parte superior fixa

<!DOCTYPE html>

<html>

<head>

<style>

body {margin:0;}

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

position: fixed;

top: 0;

width: 100%;

}

li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active) {

background-color: #111;

}

.active {

background-color: #04AA6D;

}

</style>

</head>

<body>

<ul>

<li><a href="#noticia">Notícia</a></li>

<li><a href="#contato">Contato</a></li>

<li><a href="#ajuda">Ajuda</a></li>

</ul>

<h1>Barra de navegação superior fixa</h1>

<h2>Role esta página para ver o efeito</h2>

<h2>A barra de navegação permanecerá no topo da página durante a rolagem</h2>

</div>

</body>

</html>

Fundo Fixo

<!DOCTYPE html>

<html>

<head>

<style>

body {margin:0;}

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

position: fixed;

bottom: 0;

width: 100%;

}

li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active) {

background-color: #111;

}

.active {

background-color: #04AA6D;

}

</style>

</head>

<body>

<ul>

<li><a href="#noticia">Notícia</a></li>

<li><a href="#contato">Contato</a></li>

<li><a href="#ajuda">Ajuda</a></li>

</ul>

<h1>Barra de navegação inferior fixa</h1>

<h2>A barra de navegação permanecerá na parte inferior da página durante a rolagemRole esta página para ver o efeito</h2>

</div>

</body>

</html>

Barra de navegação horizontal cinza

Um exemplo de barra de navegação horizontal cinza com uma borda cinza fina:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

border: 1px solid #e7e7e7;

background-color: #f3f3f3;

}

li {

float: left;

}

li a {

display: block;

color: #666;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active) {

background-color: #ddd;

}

li a.active {

color: white;

background-color: #04AA6D;

}

</style>

</head>

<body>

<ul>

<li><a href="#noticia">Notícia</a></li>

<li><a href="#contato">Contato</a></li>

<li><a href="#ajuda">Ajuda</a></li>

</ul>

</body>

</html>

Barra de navegação pegajosa

Adicione position: sticky;a <ul> para criar uma barra de navegação fixa.

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-size: 28px;

}

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

position: -webkit-sticky; /* Safari */

position: sticky;

top: 0;

}

li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover {

background-color: #111;

}

.active {

background-color: #4CAF50;

}

</style>

</head>

<body>

<h2>Rolar para baixo</h2>

<p>Role para baixo para ver o efeito pegajoso.</p>

</div>

<ul>

<li><a href="#noticia">Notícia</a></li>

<li><a href="#contato">Contato</a></li>

</ul>

<h3>Sticky Navigation Bar Example</h3>

<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>

<p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>

<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

</body>

</html>

Navegação superior responsiva

Como usar consultas de mídia CSS para criar uma navegação superior responsiva.

<!DOCTYPE html>

<html>

<head>

<style>

body {margin: 0;}

ul.topnav {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

ul.topnav li {float: left;}

ul.topnav li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #04AA6D;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px) {

ul.topnav li.right,

ul.topnav li {float: none;}

}

</style>

</head>

<body>

<li><a href="#noticia">Notícia</a></li>

<li><a href="#contato">Contato</a></li>

<li class="right"><a href="#ajuda">Ajuda</a></li>

</ul>

div style="padding:0 16px;">

<h2>Exemplo de navegação superior responsiva</h2>

<p>Este exemplo usa consultas de mídia para empilhar o topnav verticalmente quando o tamanho da tela é 600px ou menos.</p>

<p>Você aprenderá mais sobre consultas de mídia e web design responsivo posteriormente em nosso tutorial CSS.</p>

<h4>Redimensione a janela do navegador para ver o efeito.</h4>

</div>

</body>

</html>

Sidenav responsivo

Como usar consultas de mídia CSS para criar uma navegação lateral responsiva.

<!DOCTYPE html>

<html>

<head>

<style>

body {margin: 0;}

ul.sidenav {

list-style-type: none;

margin: 0;

padding: 0;

width: 25%;

background-color: #f1f1f1;

position: fixed;

height: 100%;

overflow: auto;

}

ul.sidenav li a {

display: block;

color: #000;

padding: 8px 16px;

text-decoration: none;

}

ul.sidenav li a.active {

background-color: #4CAF50;

color: white;

}

ul.sidenav li a:hover:not(.active) {

background-color: #555;

color: white;

}

div.content {

margin-left: 25%;

padding: 1px 16px;

height: 1000px;

}

@media screen and (max-width: 900px) {

ul.sidenav {

width: 100%;

height: auto;

position: relative;

}

ul.sidenav li a {

float: left;

padding: 15px;

}

div.content {margin-left: 0;}

}

@media screen and (max-width: 400px) {

ul.sidenav li a {

text-align: center;

float: none;

}

</style>

</head>

<body>

<li><a href="#noticia">Notícia</a></li>

<li><a href="#contato">Contato</a></li>

<li><a href="#ajudat">Ajuda</a></li>

</ul>

<h2>Exemplo de Sidenav responsivo</h2>

<p>Este exemplo usa consultas de mídia para transformar o sidenav em uma barra de navegação superior quando o tamanho da tela é 900px ou menos.</p>

<p>Também adicionamos uma consulta de mídia para telas de 400px ou menos, que empilhará verticalmente e centralizará os links de navegação.</p>

<p>Você aprenderá mais sobre consultas de mídia e web design responsivo posteriormente em nosso tutorial CSS.</p>

<h3>Redimensione a janela do navegador para ver o efeito.</h3>

</div>

</body>

</html>

Barra de navegação suspensa

Como adicionar um menu suspenso dentro de uma barra de navegação.

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color:white;

}

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #38444d;

}

li {

float: left;

}

li a, .dropbtn {

display: inline-block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover, .dropdown:hover .dropbtn {

background-color: red;

}

li.dropdown {

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {

display: block;

}

</style>

</head>

<body>

<ul>

<li><a href="#noticia">Notícia</a></li>

<a href="javascript:void(0)" class="dropbtn">Dropdown</a>

</div>

</li>

</ul>

<h3>Menu suspenso dentro de uma barra de navegação</h3>

<p>Passe o mouse sobre o link "Dropdown" para ver o menu suspenso.</p>

</body>

</html>