Olá eu denovo estou postando muitas coisas para vocês aqui bem exclusivas hoje venho trazendo essa logo feita rapidinha por mim, usem e abusem.

Hoje galera venho trazendo esses 6 estilos exclusivos meus para vocês, e ainda melhor de graça hehe.
Comentem amanhã tem mais ou até hoje depende né.

1-Crie imagens .gif com fundo transparent de tamanho 64px x 106px e posicione os ícones da maneira que se segue:

2-Faça uma imagem neste modelo para cada item do menu;

3-Hospede as imagens, copie a url de cada um e no CSS do código do template (acima de ]]>) coloque este código que corresponde à cada link do menu:

a#m1, a#m1:link, a#m1:visited, a#m1:active {

background: transparent url(url da primeira imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}

a#m1:hover {background-position: left bottom;}

a#m2, a#m2:link, a#m2:visited, a#m2:active {

background: transparent url(url da segunda imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}

a#m2:hover {background-position: left bottom;}

a#m3, a#m3:link, a#m3:visited, a#m3:active {

background: transparent url(url da terceira imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}

a#m3:hover {background-position: left bottom;}

a#m4, a#m4:link, a#m4:visited, a#m4:active {

background: transparent url(url da quarta imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}

a#m4:hover {background-position: left bottom;}

a#m5, a#m5:link, a#m5:visited, a#m5:active {

background: transparent url(url da quinta imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}

a#m5:hover {background-position: left bottom;}

a#m6, a#m6:link, a#m6:visited, a#m6:active {

background: transparent url(url da sexta imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}

a#m6:hover {background-position: left bottom;}

Para tantos forem os itens do menu, acrescente o trecho:

a#m6, a#m6:link, a#m6:visited, a#m6:active {

background: transparent url(link da sexta imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}

a#m6:hover {background-position: left bottom;}

Note que atribuímos uma ID para os links que compõem o menu e que, nas palavras do mestre Maujor: id deve ser única, isto é, um e somente um elemento ou seletor deve estar identificado com determinada id. Por isso, ao acrescentar novos links à sua lista, você deve criar uma nova ID (nome), ou seja, à partir de #m6 deve se seguir #m7 ou qualquer outro nome que seja único e exclusivo.

Para que você entenda o que está fazendo (e não simplesmente copie e cole sem conseguir criar variações ao seu gosto), vejamos:

a#m1, a#m1:link, a#m1:visited, a#m1:active {

background: transparent url(link da primeira imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}

a#m1:hover {background-position: left bottom;}

em vermelho atribuimos um identificador ID para o elemento a (link), no caso #m1;

em background definimos que nos estados a:link, a:visited e a:active a imagem apareça no topo à esquerda. Como definimos uma altura e largura para a área 'clicável' (com height e width) impedimos que o restante da imagem apareça (lembre que a imagem original tem height:106px). Ou seja, o que excede a altura de 54px não aparecerá. Veja na imagem abaixo:

Para o estado hover a posição do background muda para left bottom (em laranja) e agora o que fica escondido é a parte superior da imagem, novamente limitada pela altura estabelecida para a área do link. Veja:

Um truque simples e genial que não sofre incompatibilidade de navegadores e não causa nenhuma dor de cabeça. Enfim, algo que não fui capaz de pensar :)

Agora, para criar um menu horizontal onde os links aparecerão, acrescente também no CSS:

#navigation{

height:50px; /*altura do menu*/

width: 600px; /*área total ocupada pelo menu*/

margin:0px auto; /*margin que centraliza o menu na tela*/

background: url(http://i41.tinypic.com/690sux.jpg) no-repeat top left; /*imagem de fundo do menu*/

}

#navigation ul{

width: 400px; /*largura da área ocupada pelos ícones*/

margin: 0px auto 0; /*centralizando os ícones*/

padding: 0 0 0;

}

#navigation li{

float:left;/*flutuação à esquerda garante que os ícones fiquem na horizontal*/

margin-top:4px; /*margens dos ícones*/

list-style-type:none;

}

Salve as modificações. Agora no HTML do código, e aqui você escolhe onde aparecerá seu menu, acrescente:

No caso do meu exemplo eu acrescentei o código dentro do cabeçalho, assim:

Mas você pode colocar acima ou abaixo de header,como queira. Para colocar verticalmente na sidebar, basta copiar o HTML à partir de

,abrir um elemento de página HTML/JavaScript e colar o código.

Recapitulando:

crie uma ID para cada link da lista;

crie uma imagem com o dobro da altura determinada para a área de cada link, contendo as imagens para o estador inicial e hover do link.

acrescente os links em um menu

Template de Manutenção da Rei Creators mais as PSD's feito por mim Jhow V. Rios, peço a vocês que não retirem os créditos pois estou liberando de graça oque não é o normal porque eu trabalho e ganho com isso, comentem falando ou dando dicas para o próximo template editável e só mais uma coisa NÃO PLAGIAMOS. Hoje mesmo eu posto um tutorial.