Você está em:
// Acessorios para Blogs

Menu Hover no Blog

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


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

  • Hospede as imagens, copie a url de cada um e no CSS do código do template (acima de ]]></b:skin>) 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:


     <div id='navigation'>
    <ul>
    <li><a href='Link do Blog/' id='m1' title='Home'> </a></li>
    <li><a href='Link 01/' id='m2' target='_blank' title='Download'> </a></li>
    <li><a href='Link 02/' id='m3' target='_blank' title='Vídeos'> </a></li>
    <li><a href='Link 03/' id='m4' target='_blank' title='MP3'>
    </a></li>
    <li><a href='Link 04/' id='m5' target='_blank' title='Feed'>
    </a></li>
    <li><a href='Link 05/' id='m6' rel='nofollow' target='_blank' title='Contato'>
     </a></li>
    </ul>
    </div>
    No caso do exemplo do Templates Novo Blogger acrescentou o código dentro do cabeçalho, assim:

    <div id='header-wrapper'>

    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

    <b:widget id='Header1' locked='true' title='Menu Hover (Cabeçalho)' type='Header'/>

    </b:section>

    Aqui o código do menu

    </div>

    Mas você pode colocar acima ou abaixo de header,como queira. Para colocar verticalmente na sidebar, basta copiar o HTML à partir de <ul> até </ul> ,abrir um elemento de página HTML/JavaScript e colar o código.

    Nauan

    Sou um estudante de programação e amo designer gráfico, adoro mexer e personalizar conteúdos infográficos e tipográficos, adoro também passar qualquer conteúdo de informação para meus leitores e ajudar a processar qualquer tipo de ajuda ou material didático.

    3 comentários:

    1. Bom dia !
      Gostaria de ver uma amostra deste trabalho pronto..! ...Seria legal se v. postasse ele aqui pra gente ficar sabendo como ficará o menu com imagens individuais. Vlw.
      Juaris

      ResponderExcluir
    2. Bom dia !
      Acabei de ser mais um seguidor de seu Blog..!
      Siga-me também no meu Blog, e copie o meu Banner que eu copiarei o seu p/ postatá-lo em minha pg. do blog..!

      Até..!
      Juaris.

      ResponderExcluir

    Por favor leia antes de Comentar