CSS Barra de navegação vertical
Barra de navegação =
lista de links
Uma
barra de navegação precisa de HTML padrão como base.
<!DOCTYPE
html>
<html>
<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>
<p>Observação:
usamos href="#" para links de teste. Em um site real, seriam
URLs.</p>
</body>
</html>
remover os marcadores, as margens e o preenchimento da lista:
<!DOCTYPE
html>
<html>
<head>
<style>
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>Neste
exemplo, removemos os marcadores da lista e seu preenchimento e margem
padrão.</p>
<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>
Ø list-style-type:
none; - Remove as balas. Uma barra de navegação não precisa de marcadores
de lista
Ø Definir margin: 0; e padding: 0; remover as configurações padrão do navegador
Barra de navegação vertical
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
<li><a
href="#home">Home</a></li>
<li><a
href="#noticia">Notícia</a></li>
<li><a
href="#contato">Contato</a></li>
<li><a
href="#ajudat">Ajuda</a></li>
</ul>
<p>Uma cor de fundo é adicionada aos links para mostrar a
área do link.</p>
<p>Observe que toda a área do link é clicável, não apenas o
texto..</p>
</body>
</html>
Ø display:
block; - Exibir os links como elementos de
bloco torna clicável toda a área do link (não apenas o texto) e nos permite
especificar a largura (e preenchimento, margem, altura, etc., se desejar)
Ø width:
60px; - Os elementos do bloco ocupam toda a
largura disponível por padrão. Queremos especificar uma largura de 60
pixels
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
<li><a
href="#home">Home</a></li>
<li><a
href="#noticia">Notícia</a></li>
<li><a
href="#contato">Contato</a></li>
<li><a
href="#ajudat">Ajuda</a></li>
</ul>
<p>Uma cor de fundo é adicionada aos links para mostrar a
área do link.</p>
<p>Observe que toda a área do link é clicável, não apenas o
texto.</p>
</body>
</html>
Barras
de navegação vertical
Crie
uma barra de navegação vertical básica com fundo cinza 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;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation
Bar</h2>
<ul>
<li><a href="#home">Home</a></li>
<li><a
href="#noticia">Notícia</a></li>
<li><a href="#contato">Contato</a></li>
<li><a href="#ajudat">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;
width: 200px;
background-color: #f1f1f1;
}
li
a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li
a.active {
background-color: #04AA6D;
color: white;
}
li
a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Barra
de navegação vertical</h2>
<p>Neste
exemplo, criamos uma classe "ativa" com fundo verde e texto branco. A
turma é adicionada ao link "Home"</p>
<ul>
<li><a class="active"
href="#home">Home</a></li>
<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>
Centralizar links e
adicionar bordas
Adicione text-align:center a <li> ou
<a> para centralizar os links.
Adicione
a border propriedade para
<ul> adicionar uma borda ao redor da barra de navegação. Se você
também quiser bordas dentro da barra de navegação, adicione border-bottoma
todos os elementos <li>, exceto o último:
<!DOCTYPE
html>
<html>
<head>
<style>
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
li
a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li
{
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child
{
border-bottom: none;
}
li
a.active {
background-color: #04AA6D;
color: white;
}
li
a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Barra
de navegação vertical</h2>
<p>Neste
exemplo, centralizamos os links de navegação e adicionamos uma borda à barra de
navegação.</p>
<ul>
<li><a class="active"
href="#home">Home</a></li>
<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
vertical fixa de altura total
Crie
uma navegação lateral "fixa" de altura total:
<!DOCTYPE
html>
<html>
<head>
<style>
body
{
margin: 0;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li
a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li
a.active {
background-color: #04AA6D;
color: white;
}
li
a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active"
href="#home">Home</a></li>
<li><a
href="#news">News</a></li>
<li><a
href="#contact">Contact</a></li>
<li><a
href="#about">About</a></li>
</ul>
<div
style="margin-left:25%; padding:1px 16px; height:1000px;">
<h2>Navegação lateral fixa em altura
total</h2>
<h3>Tente rolar esta área e veja como o
sidenav adere à página</h3>
<p>Observe que este elemento div possui
uma margem esquerda de 25%. Isso ocorre porque a navegação lateral está
definida para 25% de largura. Se você remover a margem, o sidenav irá se
sobrepor/ficar em cima deste div.</p>
<p>Observe também que definimos
overflow:auto como sidenav. Isso adicionará uma barra de rolagem quando o
sidenav for muito longo (por exemplo, se tiver mais de 50 links).</p>
<p> texto 1..</p>
<p> texto 2..</p>
<p> texto 3..</p>
<p> texto 4..</p>
<p> texto 5..</p>
<p> texto 6..</p>
<p> texto7 ..</p>
</div>
</body>
</html>