Objetivo
O objetivo deste tutorial é mostrar como criar uma Barra de Navegação Horizontal usando CSS e Javascript.
1 - Começaremos com a seguinte marcação HTML:
<html>
<head>
<script>
</script>
<style>
<
/style>
</head>
<body>
</body>
</html>
Toda página HTML precisa começar com a tag <html>,pois esta tag diz ao browser que se trata do início de um documento HTML.
A tag <head> é obrigatória pois é dentro dela que devemos inserir as tags <style> e <script>
Dentro da tag <script> escreveremos o nosso código javascript, que será a ultima parte do tutorial.
Na tag <style> definiremos os códigos de estilos CSS.
E finalmente a tag <body>, dentro desta, colocaremos tudo o que fizer parte do corpo da nossa página, como no nosso exemplo faremos apenas uma barra de menus, nossa tag body vai conter a tag <ul> que é a tag responsável por criar listas e menus.
2 - Construiremos a barra de navegação com 3 links, mas você poderá adicionar mais links, ou alterar estilos como dimensão e cores da forma como preferir.
<ul>
<li><a id="home" href="#home" onclick="curSec(this.id)">Home</a></li>
<li><a id="news" href="#news" onclick="curSec(this.id)">Notícias</a></li>
<li><a id="contact" href="#contact" onclick="curSec(this.id)">Contato</a></li>
</ul>
A tag <ul> é usada para definir uma lista, em que cada elemento desta lista é definido pela tag <li>, dentro dessas criamos os nossos links com a tag <a>. Dentro da tag <a> usamos a propriedade id para identificarmos o menu que clicamos ao passar o id para a função javascript que vamos criar por ultimo e href que é necessária para informar o URL do link, a propriedade onclick, eu vou explicar mais a frente, por enquanto apenas copie como está.
3 - Os estilos CSS devem ser definidos dentro da tag <style>, como disse anteriormente. O estilo da nossa <ul> será o seguinte:
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; }
Primeiramente criamos os estilos da nossa <ul>, que deve ser uma lista sem os estilos padrões dela, então usamos list-style-type: none; e também tiramos as margens e o enchimento, margin: 0; padding: 0;
Para que não apareça barra de rolagem, usamos ovreflow: hidden;
E finalmente, definimos nossa cor de fundo, background-color: #333; que é um tom de cinza escuro.
4 - Precisamos que a nossa barra de navegação comece da esquerda, na horizontal, então definimos o seguinte estilo: float: left; que "empurra" nossa barra para a esquerda.
Para separar os menus de forma que não fiquem muito colados um no outro, definimos uma borda: border-right:1px solid #bbb; Essa borda terá 1 pixel de largura e será cinza claro.
li {
float: left;
border-right:1px solid #bbb;
}
Aqui definimos o estilo dos links da nossa lista:
li a {
display: block;
color: white;
font-family: arial;
font-weight: bold;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
display: block; Mostra os links como o esilo block, que faz a tag <a>se comportar como a tag de parágrafos <p>. Tente apagar esse estilo para ver como a barra ficaria sem ele, assim pode-se entender melhor.
color: white; Define a cor da fonte como branco.
font-family: Arial; define a fonte como Arial.
font-weight: bold; Fonte em negrito "bold".
text-align: center; O texto dos links são centralizados.
padding: 14px 16px; Define o espaçamento dos links como 14px para cima e para baixo, e 16px para os lados.
text-decoration: none; Elimina o sublinhado padrão dos links.
5 - O estilo seguinte é para que os menus da lista mudem de cor quando o cursor do mouse passar por cima:
li a:hover {
background-color: #111;
}
background-color: #111; Muda a cor de fundo do menu para cinza escuro.
6 - Em CSS as classes são usadas para definir estilos para elementos com específicos atributos de classe, dentro da nossa <ul> sempre vai haver um elemento <li> com um atributo class: active; essa <li> será o menu selecionado, e seu estilo deve ser diferente dos outros. Definimos uma classe .active que muda a cor do menu selecionado:
.active {
background-color: #4C50AF;
}
background-color: #4C50AF; Define um fundo azul para o menu selecionado.
7 - Agora vamos fazer o código javascript para definirmos como active o menu que for selecionado pelo usuario ao clicar com o mouse. O seguinte código deve ser adicionado dentro da tag <script>:
<script>
function curSec(id) {
className = document.getElementById(id).getAttribute('class')
if(className!="active") {
var x = document.getElementsByClassName("active");
x[0].className="";
document.getElementById(id).className = "active";
}
}
</script>
O código JavaScript é ativado quando o usuário clica em um dos menus, alterando sua cor de cinza para azul, nossa função CurSec é chamada por causa da propriedade onclick que definimos nas nossas tags <a>
onclick="curSec(this.id)"
O código final deve ficar assim:
<!DOCTYPE html>
<html>
<head>
<script>
function curSec(id) {
className = document.getElementById(id).getAttribute('class')
if(className!="active") {
var x = document.getElementsByClassName("active");
x[0].className="";
document.getElementById(id).className = "active";
}
}
</script>
<style>
body {
background-color: #d0e4fe;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li a {
display: block;
color: white;
font-family: arial;
font-weight: bold;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #4C50AF;
}
</style>
</head>
<body>
<ul>
<li><a id="home" class="active" href="#home" onclick="curSec(this.id)">Home</a></li>
<li><a id="news" href="#news" onclick="curSec(this.id)">Notícias</a></li>
<li><a id="contact" href="#contact" onclick="curSec(this.id)">Contato</a></li>
</ul>
</body>
</html>
Nenhum comentário:
Postar um comentário