quarta-feira, 10 de fevereiro de 2016

Como Criar uma Barra de Navegação Horizontal com CSS e Javascript Para seu Site ou Blog - Criando a Web

Barra de Navegação Horizontal - com CSS e Javascript

 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

webnode

Related Posts Plugin for WordPress, Blogger...