Menu CSS e Javascript com cores aleatórias

Nesse pequeno tutorial você irá aprender a criar um menu em CSS e Javascript com um efeito divertido e inesperado para os visitantes. Ele usará propriedades CSS3 para criar um menu  com efeito de botões em links reduzindo o código html já que usará apenas tags de links e uma div externa, deixando o menu o mais leve possível.

O menu se comportará da seguinte forma: ele irá mudar de cor ao passar o mouse sobre cada botão. Até aí nada demais, porém será uma cor diferente para cada botão, mas o que será realmente inesperado é que a cada atualização será feito um novo sorteio redistribuindo aleatoriamente as cores para cada botão.

Então o visitante começará  a perceber que a cada atualização de página as cores dos botões aparecerão em ordem diferente ao passar o mouse.

Para o efeito ficar mais interessante o menu inicialmente terá uma unica cor para todos os botões, de outra forma, ao atualizar  o usuário veria logo que as cores foram trocadas, portanto vamos deixar que perceba isso apenas quando passar o mouse. Então a aparência inicial do menu será essa:

Obs: as propriedades CSS3 para cantos arredondados, gradientes e sombras não funcionam no IE (como de praxe) pelo menos até a versão 9, mas pelo menos o problema das bordas pode ser solucionado com um arquivo externo.

No seguinte post: Criando um formulário com cantos arredondados usando css3 você pode se inteirar melhor de como é esse processo e ter condições de adaptar para esse menu também.

Imagens:

Antes de mais nada vamos traçar uma linha de raciocínio lógico para a criação do menu.

Se eu quero que cada botão tenha uma cor diferente e inicialmente tenha a mesma cor eu tenho duas opções mais lógicas.

Como no nosso exemplo são cinco botões, poderíamos criar seis classes CSS, uma que seria comum a todos os botões, no estado inicial do link e outras cinco classes diferentes que seriam atribuídas uma para cada botão.

Só que dessa forma a classe de cada botão teria que ser mudada ao passar do mouse e seria preciso usar Javascript nesse processo o que deixaria o código mais complexo e quanto mais simples melhor.

Outra saída é criar cinco classes e variações dessas classes com a propriedade hover. Como o estagio inicial é igual para todos botões, poderiamos economizar código reunindo todas as classes em um único bloco. Portanto ficaremos com a segunda solução.

Precisamos também de um meio de sortear essas classes aleatoriamente para cada botão a cada atualização de página, então essa é a hora de usar o javascript.

Então resumindo: usaremos o javascript apenas para sortear as classes para os botões do menu css javascript e o código CSS fará o restante do processo.

Vamos inicialmente ao código css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

<style type="text/css">

.classe1,.classe2,.classe3,.classe4,.classe5{
height:auto;
width:80px;
margin:5px;
padding:3px 20px;
background-image: -moz-linear-gradient(100% 100% 90deg, #1f1f1f,#6e6e6e);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6e6e6e), to(#1f1f1f));
border-radius:14px 14px 0px 0px;
-moz-border-radius:14px 14px 0px 0px;
-webkit-border-radius:14px 14px 0px 0px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
color: #ffffff;
font-family:verdana;
background-color:#4b4b4b;
display: inline-table;
text-decoration:none;
font-weight:bold;
text-align:center;
}
.classe1:hover{
color:#000000;
background-image: -moz-linear-gradient(100% 100% 90deg, #ffff33,#d1c73f);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1c73f), to(#ffff33));
background-color:#ffff33;
}
.classe2:hover{
color:#000000;
background-image: -moz-linear-gradient(100% 100% 90deg, #99ff66,#33cc00);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33cc00), to(#99ff66));
background-color:#99ff66;
}
.classe3:hover{
color:#000000;
background-image: -moz-linear-gradient(100% 100% 90deg, #0099ff,#3366cc);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3366cc), to(#0099ff));
background-color:#0099ff;
}
.classe4:hover{
color:#000000;
background-image: -moz-linear-gradient(100% 100% 90deg, #ff0000,#cc0033);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cc0033), to(#ff0000));
background-color:#ff0000;
}
.classe5:hover{
color:#000000;
background-image: -moz-linear-gradient(100% 100% 90deg, #cc00ff,#990099);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#990099), to(#cc00ff));
background-color:#cc00ff;
}

</style>

Observe então que no primeiro bloco reúno todas as classes para economizar código já que no estágio inicial os valores de todas as propriedades são os mesmos.

Em seguida atribuo as classes  separadamente, através do evento hover, apenas os valores que serão mudados para cada uma delas.

Observe que eu declaro duas vezes o atributo background-image que configura as cores em gradiente, isso para que funcione no Google Chrome e no Fire Fox e por último atribuo uma cor também para a propriedade background-color, isso para que no Internet Explore funcione pelo menos a mudança de cores aleatórias.

Vamos ao código javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

<script language="JavaScript">
var num = new Array();
var ref = new Array();

ref[1]="classe1"
ref[2]="classe2"
ref[3]="classe3"
ref[4]="classe4"
ref[5]="classe5"

var numero = 0;
var cont=1;

function menu_cores_aleatorias(){

//inicializando o contador que irá relacionar os números

//as classes

for (i=1; i < (ref.length); i++) {
//*******************************************************

//automatizando o intervalo de números a serem sorteados

//de acordo com o números de classes

maxi= (ref.length);
//******************************************************

//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

//selecionando aleatóriamente um número entre o intervalo

//definido pela variável maxi

numero = Math.round((maxi -2) * Math.random()+1);
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

//***********************************************************

//Certificando para que um número não saia duas vezes

//colocando-se mais classes terá que aumentar propocionalmente

//abaixo já está programado para até 5 classes


if(num[0] == numero ||num[1] == numero ||num[2] == numero ||
num[3] == numero ||num[4] == numero ){

i--;

} else {

num[i] = numero;

document.getElementById(numero).className=ref[cont];

cont++

}

}

}

window.onload=menu_cores_aleatorias
</script>
<p style="text-align: justify;">

Serão necessários dois arrays, então a primeira coisa a fazer é cria-los, o que acontece nas duas primeiras linhas.

Esses arrays são relativos a:

Array “num” relativo aos números gerados aleatoriamente representando as IDs da cada botão, aos quais serão atribuídos aleatoriamente as classes criadas.

Array “ref” são os nomes de cada classes atribuídas aos botões e que é definida logo no bloco de código seguinte.

Depois iniciamos a nossa função e em seguida imprimimos um loop que irá acontecer até que todo o array “ref” seja lido, usando ref.length para obter o número total de elementos do array.

As duas linhas seguintes são responsáveis por gerar a cada passada do loop, um número aleatório no intervalo de número das classes. No caso presente de 1 a 5.

Observe agora que eu preciso me assegurar de que não haverá sorteio de números repetidos então na condicional if eu testo se esse número gerado aleatoriamente não irá coincidir com os números gerados e já atribuído ao Array “num”.

Na primeira passada, qualquer número gerado será válido pois nenhum número foi atribuído ao array, então a segunda condicional “else” é executada e guarda esse número no array.

Vamos imaginar que esse número gerado tenha sido o 4 e na segunda passada do loop o número 4 seja gerado de novo, então o teste será positivo, pois esse número já existe no array.

Observe então que o loop será decrementado em 1 (–1) pois um número já foi sorteado e você só precisa agora sortear mais 4, e esse processo se repetirá até que todos os números sejam sorteados.

Cada número gerado é uma ID  a qual é atribuída imediatamente uma classe.

analise com cuidado agora para entender o processo.

Você tem um gerador de números aleatórios que será passado  para variável “numero” e um contador “cont” que terá uma sequência numérica ordinal de 1 a 5.

Então se na primeira passada do loop o número gerado for 4, a classe1 contida no array ref ( que sendo ordinal nesse momento será o primeiro elemento do array ref=”classe1″)  será atribuída ao link de ID 4; e assim sucessivamente até o final do loop.

A última linha faz com que a função seja lida já no carregamento da página.

Veja o código html do menu:

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="menu">
<a href="" id="1">um</a>
<a href="" id="2" >dois</a>
<a href="" id="3" >tres</a>
<a href="" id="4" >quatro</a>
<a href="" id="5" >cinco</a>
</div>

Agora é só criar um documento html, no cabeçalho colocar o código css, depois o código javascript e no corpo do documento colocar o código html do menu.

Até a próxima.