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).

Uncategorized Badger, 14 de abril 17 comentários