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).
Gostaria de saber como colocar menu na vertical ?
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
como dou espaçamento entre os icones la em cima
pra eles ficarem mais longe uns dos outros ?
Po esse menu é legal + quando pegar algo que não seja seu coloque os devidos creditos pois esse menu não é seu =)
Show de bola. E sua explicação muito didática.
Obrigado.
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?
aki não esta funcionando em uma página especifica, pode me ajudar?
Gostei deste menu e gostaria de deixar ele na vertical, mas não estou conseguindo, onde altero isso?
Obrigada
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.
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
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
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
Olá, como deixar isto fixo no bottom da pagina ?
Obrigado.
Já mudei =)
Show de bola. =]
$(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 (‘).
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@!@