jul
18
2009

Menu Dock – Solo Con CSS

Menu Dock Mac OS Solo con CSS

CSS Animations no hace posible programar con CSS un menu dock al estilo MacOS. Aun que solo es posible con el navegador Safari (desde 3+) y el Google Crhome.

Codigo CSS del Menu

1
2
3
4
5
6
7
8
*{margin:0;padding:0;border:0;outline:0;}a{ text-decoration:none;}
.all{margin:20px auto;width:900px;text-align:center;font-family:"Century Gothic";position:relative;}
.dock{ display:block; margin-top:50px;}
.dock li {display:inline-block;}
.dock img {width:86px; opacity: 0.7; -webkit-transition: all 1s ease-in; }
.dock span {position:absolute;top:40px;left:0;opacity:0;-webkit-transition:all 1s ease-out;width:100px;}
.dock li a:hover img, .dock li a:hover span{width:114px;opacity:1; margin-top:20px; vertical-align: bottom;}
.dock li a:hover span{left:45%;}

Todo está en la propiedad -webkit-transition. y all que durará 1 segundo con el método ease-in. Y al pasar el mouse el elemento cambiará la opacidad, que -webkit-transition aplico en la propiedad anterior y que tiene en el :hover.

Codigo HTML del Menu

1
2
3
4
5
6
7
8
9
10
<div class="all">
	<h1>Menu Dock MacOS solo con CSS Animations</h1>
    <ul class="dock">
        <li><a href="#"><img src="z.jpg" alt="Imagen" /><span>Z - Letra zeta</span></a></li>
        <li><a href="#"><img src="a.jpg" alt="Imagen" /><span>A - Letra a</span></a></li>
        <li><a href="#"><img src="c.jpg" alt="Imagen" /><span>C - Letra ce</span></a></li>
        <li><a href="#"><img src="s.jpg" alt="Imagen" /><span>S - Letra ese</span></a></li>
        <li><a href="#"><img src="s.jpg" alt="Imagen" /><span>S - Letra ese</span></a></li>            
    </ul>
</div>

Es una pena que solo para el Safari y Chrome funcionen, igual el CSS 2.1 es inválido.

Ver demo en linea

3 Comments + Add Comment

  • letssaycprox

  • “Es una pena que solo para el Safari y Chrome funcionen”
    se advierte antes ya que es una propiedad CSS3 y aun que la ultima version de firefox ya trae algunos estandares del CSS3 este parece que aun lo esta deviendo muchas gracias por comentar

  • Lo he probado en IE8, FIreFox 3, Opera 9.6 y Google Chrome.. y solo se ve hermoso en este ultimo… los demas o bien malos o abovinables…

Leave a comment

Patrocinador

Siguenos

Suscribete

Escribe tu correo:

Recibirás un correo con todos los articulos escritos en ZoneArtCss durante el día.

Correo @zoneartcss.com

Obtén una cuenta de @zoneartcss.com gratuita