Como Criar uma Barra de Navegação Horizontal com CSS e Javascript Para seu Site ou Blog - Criando a Web
Autor: patterson07 | Publicado: 2016-02-10T14:09:00-08:00

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

&nbsp;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:


&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
&lt;/script&gt;

&lt;style&gt;
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;



Toda página HTML precisa começar com a tag &lt;html&gt;,pois&nbsp; esta tag diz ao browser que se trata do início de um documento HTML.

A tag &lt;head&gt; é obrigatória pois é dentro dela que devemos inserir as tags &lt;style&gt; e &lt;script&gt; 

Dentro da tag &lt;script&gt; escreveremos o nosso código javascript, que será a ultima parte do tutorial.

Na tag &lt;style&gt; definiremos os códigos de estilos CSS.

E finalmente a tag &lt;body&gt;, 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 &lt;ul&gt; que é a tag responsável por criar listas e menus.



&nbsp;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.

&lt;ul&gt;
  &lt;li&gt;&lt;a id="home" href="#home" onclick="curSec(this.id)"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id="news" href="#news" onclick="curSec(this.id)"&gt;Notícias&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id="contact" href="#contact" onclick="curSec(this.id)"&gt;Contato&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;



A tag &lt;ul&gt; é usada para definir uma lista, em que cada elemento desta lista é definido pela tag &lt;li&gt;, dentro dessas criamos os nossos links com a tag &lt;a&gt;. Dentro da tag &lt;a&gt; 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 &lt;style&gt;, como disse anteriormente. O estilo da nossa &lt;ul&gt; será o seguinte:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}


Primeiramente criamos os estilos da nossa &lt;ul&gt;, 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:

&nbsp;

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 &lt;a&gt;se comportar como a tag de parágrafos &lt;p&gt;. 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&nbsp; CSS as classes são usadas para definir estilos para elementos com específicos atributos de classe, dentro da nossa &lt;ul&gt; sempre vai haver um elemento &lt;li&gt; com um atributo&nbsp; class: active; essa &lt;li&gt; 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:&nbsp; #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&nbsp; clicar com o mouse. O seguinte código deve ser adicionado dentro da tag &lt;script&gt;:


&lt;script&gt;

    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";
        } 
    }

&lt;/script&gt;

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 &lt;a&gt;

onclick="curSec(this.id)"


O código final deve ficar assim:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script&gt;

    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";
        } 
    }

&lt;/script&gt;
&lt;style&gt;

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;
}



&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

 &lt;ul&gt;
  &lt;li&gt;&lt;a id="home" class="active" href="#home" onclick="curSec(this.id)"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id="news" href="#news" onclick="curSec(this.id)"&gt;Notícias&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id="contact" href="#contact" onclick="curSec(this.id)"&gt;Contato&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;&nbsp; 


<!-- anuncios tecnologia -->


(adsbygoogle = window.adsbygoogle || []).push({});