CSS Dock Menu



Passem o mouse sobre a imagem acima que vocês vão entender o que o CSS Dock Menu faz. Esse efeito, que os usuários de Mac conhecem muito bem, pode ser usado sempre que você quiser nas suas páginas html. Basta ir no site oficial e baixar o programa ou fazer o download aqui, com direito a exemplos vindo junto no arquivo.

A barra de imagens pode ser criada de modo às imagens irem para cima ou para baixo, dependendo de qual configuração seja escolhida. Aqui abaixo vai uma pequena tradução do site oficial para ajudar aqueles que se prendem um pouco no inglês:

1. Download dos arquivos

Download do CSS dock menu.

2. Inserir código

Entre a tag <head> do seu código fonte, adicione o seguinte código:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7->
  <style type="text/css">
    .dock img { behavior: url(iepngfix.htc) }
  </style>
<![endif]–->

A primeira parte é o Javascript, a segunda o CSS, e a terceira é um hack PNG para funcionar corretamente no IE6.

3. Configuração

Não se esqueça de adicionar o código abaixo dentro da tag <body>:

<script type="text/javascript">
  $(document).ready(
    function() {
      $('#dock2').Fisheye( {
        maxWidth: 60,
        items: 'a',
        itemsText: 'span',
        container: '.dock-container2',
        itemWidth: 40,
        proximity: 80,
        alignment : 'left',
        valign: 'bottom',
        halign : 'center'
      } )
    }
  )
</script>

4. Adicionando e removendo itens

Para adicionar um ítem na barra do topo (nota: a tag <span> vem depois da tag <img>):

  <a class="dock-item" href="#">
    <img src="images/home.png" alt="home"/>
    <span>Home</span>
  </a>

Para adicionar um ítem na barra de baixo (nota: a tag <span> vem antes da tag <img>):

  <a class="dock-item2" href="#">
    <span>Home</span>
    <img src="images/home.png" alt="home" />
  </a>

Compatibilidade dos Navegadores

Foi testado em IE 6, IE 7, Opera 9, Firefox 2, e Safari 2 (apesar de ter um pequeno problema de visualização no Safari).

Carregando comentários...


17 comentários antigos

  1. Jaqueline Amorim  

    Muito interessante! Dá um visual bonito! Será que meu blog vai ficar muito “prequetê” se eu adicionar estar barra? Já tem tanta coisa… Mas adorei! Muito legal mesmo! E obrigada por me linkar…Boa semana@!@


  2. Phoinx  

    $(document).ready(
    function()
    {
    $(‘#dock’).Fisheye(
    {
    maxWidth: 50,
    items: ‘a’,
    itemsText: ‘span’,
    container: ‘.dock-container’,
    itemWidth: 40,
    proximity: 90,
    halign : ‘center’
    }
    )
    }
    );

    Sem aspas bizarras (‘ ou ’ ou ′), mas sim aspas simples (‘).





  3. Marcelo  

    preciso de uma informação será que da para colocar esse menu na vertical???
    já procurei mais não achei nada que fale disso, seria muito grato se você puder me ajudar.

    uma abraço e parabéns pelo tutorial


  4. Badger  

    Marcelo, fala com o autor do programa e pergunta se ele pretende criar essa opção. As pessoas gostam de saber que o programa delas está sendo usado.

    Abraços


  5. Badger  

    Guilherme, o arquivo css-dock.html vem junto com o download do arquivo css-dock-menu.zip e nele tem um exemplo que é exatamente a resposta para sua dúvida.

    Abraço


  6. George Marinho  

    fala ai cara poxa esse menu é mto show de bola mesmo eu queria saber como eu faço pra colocar mais de 8 itesn no menu pois quando coloca-se mais de 8 itens o menu buga,eu peguei esse menu pois o meu que ja tem no meu site parou de funcionar no internet explorer,e este é mais facil se puder me responder por email ia ficar muito grato um grande abraço.




  7. Andre  

    Todos vocês conseguiram, mas eu não. O quer dizer entre a tag ? É entre isso e o quê?
    O comentário — do IE também não é aceito. Alguém pode fazer um vídeo mostrando isso, já que conseguiram?



  8. Lukas  

    Po esse menu é legal + quando pegar algo que não seja seu coloque os devidos creditos pois esse menu não é seu =)



  9. Daniel Mastroiano  

    Olá pessoal, esto tentando instalar esse menu em um blog novo que na verdade é um projeto para a faculdade de jornalismo, isso me ajudaria muito a criar um visual atraente. Porém, não estou conseguindo, na verdade tenho dúvidas sobre onde encaixar esses códigos dentro do código fonte do meu blog, principalmente aqueles três primeiros. Assim, se alguém tiver paciência de me explicar de uma maneira mais simples aonde eu insiro esses códigos eu agradecerei e minhas notas na faculdade também.
    Obrigado desde já.
    Daniel