Tweet Menu inspirado Macintoch OSX Docks

Pure CSS Fish Eye Menu
Desenvolvido por Jamp Mark Web Creations . Menu de navegação com ícones exibidos em forma linear, bem interessante. Ao passar o mouse sobre o ícone ele expande dando um efeito muito bacana.



Aqui vamos ver dois tipos de CSS Fish Eye menu:

Fish Eye 1.Expand-Down Menu
Expande imagem para baixo. Veja demo.

Código CSS Copiar e colar dentro do seu HTML, abaixo do código: ]]></b:skin>

<style type="text/css">
<! --
. expandir-down (
font-family: Arial, Helvetica, sans-serif;
line-height: normal;
margin-top: 20px;
height: 150px;/*-----Altura do menu-----*/
width: 500px; /*-----Largura do menu-----*/
background: #000000 url (ENDEREÇO DA IMAGEM DO BACKGROUND) no-repeat;
margin-bottom: 30px;
)
/ * Reset margens e paddings * /
. expandir-down * (
margin: 0;
padding: 0;
)
. expandir-down ul (
padding-top: 10px;
margin-left: 10px,
)
. expandir-down ul li (
float: left;
list-style-type: none;
)
. expandir-down ul li a (
text-decoration: none;
)
. expandir-down ul li uma img (
width: 50px; / * largura inicial de imagens, 50% da largura * /
height: 50px; / * altura inicial de imagens, 50% da altura * /
border: none;
)
/ * Inicialmente, não mostrar o rótulo dentro <span> tag * /
. expandir-down ul li um span (
display: none;
)
. expandir-down ul li: hover um span (
/ * Mostrar rótulo mouse hover * /
display: block;
font-size: 14px;
text-align: center;
color: # fff;
)
/ * Expandir a imagem para 100% em rato pairar.
** Uma imagem torna-se activa quando rato que paira
** Idealmente, a imagem deve ter mesma largura e altura conforme abaixo
* /
. expandir-down ul li: hover (uma img
width: 100px;
height: 100px;
)
/ * Expandir a imagem ao lado do direito da imagem ativa a 60% usando + selector * /
. expandir-down ul li: hover (+ li uma img
width: 60px;
height: 60px;
)
/ * Expandir a imagem segunda à direita da imagem ativa a 55% usando selectores + * /
. expandir-down ul li: hover li + + li uma img (
width: 55px;
height: 55px;
)
->
</ style>

Codigo HTML (Copiar e colar abaixo da tag </head>)

<div class="expand-down">
<ul>

<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> home </ span></ a>
</ li>
<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> twitter </ span></ a>
</ li>
<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> recados </ span></ a>
</ li>
<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> email </ span></ a>
</ li>

</ ul>
</ div>

Fish Eye 2. Expand-Up Menu
Expande imagens para cima . Veja demo.

Código CSS Copiar e colar dentro do seu HTML, abaixo do código: ]]></b:skin>

<style type="text/css">
<! --
. expandir-up (
fonte-family: Arial, Helvetica, sans-serif;
line-height: normal;
height: 150px;
width: 500px;
background: #000000 url (ENDEREÇO DA IMAGEM DO BACKGROUND) no-repeat;
overflow: visible;
margin-bottom: 30px;
)
/ * Reset margens e paddings * /
. expandir-up * (
margin: 0;
padding: 0;
)
. expandir-up ul (
margin-left: 10px;
)
. expandir-up ul li (
float: left;
list-style-type: none;
/ * Criar um espaço reservado para a imagem ampliada para fazer este trabalho no IE * /
padding-top: 65px;
/ * Margem para colocar o menu na parte inferior * /
margin-top: 25px;
)
. expandir-up ul li a (
text-decoration: none;
)
. expandir-up ul li uma img (
width: 50px; / * largura inicial de imagens, 50% da largura * /
height: 50px; / * altura inicial de imagens, 50% da altura * /
border: none;
)
/ * Inicialmente, não mostrar o rótulo dentro <span> tag * /
. expandir-se uma ul li span (
display: none;
)
. expandir-up ul li: hover um span (
/ * Mostrar item rótulo mouse hover * /
display: block;
font-size: 14px;
text-align: center;
color: # fff;
/ * Rótulo mover-se para passar imagem acima * /
margin-top:-65px;
)
/ * Expandir a imagem para 100% em rato pairar.
** Novamente, ideal dimensão da imagem é igual a largura e altura abaixo
* /
. expandir-up ul li: hover (uma img
width: 100px;
height: 100px;
)
/ * Expandir a imagem ao lado do direito de imagem ativa a 60% usando + selector * /
. expandir-up ul li: hover (+ li uma img
width: 60px;
height: 60px;
/ * Movimento imagem por 10px tão fundo alinha com outras imagens * /
margin-top:-10px;
)
/ * Expandir a segunda imagem, à direita da imagem ativa a 55% usando selectores + * /
. expandir-up ul li: hover li + + li uma img (
width: 55px;
height: 55px;
/ * Movimento imagem por 5px tão fundo alinha com os outros itens * /
margin-top:-5px;
)
->
</ style>

Codigo HTML (Copiar e colar abaixo da tag </head>)

<div class="expand-up">
<ul>
<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> home </ span></ a>
</ li>
<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> twitter </ span></ a>
</ li>
<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> recados </ span></ a>
</ li>
<li>
<a href="ENDEREÇO DO LINK">
<img src="ENDEREÇO DA IMAGEM(ÍCONE)" /><span> email </ span></ a>
</ li>

</ ul>
</ div>

Se quiser, confira o tutorial original, aqui.
Com um pouco de carinho e paciencia, você pode editar a seu gosto. Veja aqui um exemplo.
É isso! Divirta-se!