• Home
  • 1000 Efectos jQuery
  • 1000 Estilos Css
  • Foro
  • Liz Palacios
  • Miguel Ortega
  • Tu Granito de Arena!!
Blue Orange Green Pink Purple

Menu Dock – Solo Con CSS

Jul 18

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

Posts Relacionados:

  • Menu con Javascript y jQuery – Efecto Sombra
  • Efecto Page Peel Con jQuery & CSS
  • Sexy LightBox
  • jQuery Cycle Plugin – Transiciones animadas de imágenes (slideshow)
  • Menús desplegables solo con CSS

¿Te gusto este tema?
Recibe en tu correo las ultimas actualizaciones

Escribe tu correo:

Recibirás un correo con todos los articulos escritos en ZoneArtCss durante el día.
Compartir   votar
Posted in CSS. on Sábado, Julio 18th, 2009 by Alex Aguiar Tags: CSS, CSS Animations, css3, dock, jQuery, js, macos, menu, only, solo con css


2 Comments

  1. KeLoCo on Agosto 19th, 2009

    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…

  2. Alex Aguiar on Agosto 19th, 2009

    “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



Leave a Reply

Security Code:

ZoneArtCSS | Tu lugar: Del Arte CSS

  • Buscador
  • ZuperHosting.NET Hosting y dominios.



  • Suscribete
    Escribe tu correo:

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







  • Lo Último

    Internet explorer 6 onlineInternet explorer 6 online   Huevo de Pascua Google 2010 - Happy New YearHuevo de Pascua Google 2010 - Happy New Year   Dale estilo a tus cuadros de Comentarios solo con CssDale estilo a tus cuadros de Comentarios solo con Css   Efecto de Scrolling con JavaScript -jsScrolling v2Efecto de Scrolling con JavaScript -jsScrolling v2   Botones de formulario con bordes redondeados solo CssBotones de formulario con bordes redondeados solo Css  


  • Ideas
  • Archivos
  • Comentarios
  • Populares
ajax alex aguiar cms codigo CSS diseño efecto estilo facil firefox fireworks fix flash gallery google gratis grunge html ie6 i hate photoshop images internet explorer Javascript jQuery js libreria liz palacios manual menu miguelortega miguel ortega php plugin problema solucion style Templates Gratis Themes para dedalus tutorial Twitter video video tutorial web wordpress zoneartcss
  • Marzo 2010
  • Febrero 2010
  • Enero 2010
  • Diciembre 2009
  • Noviembre 2009
  • Octubre 2009
  • Septiembre 2009
  • Agosto 2009
  • Julio 2009
  • Junio 2009
  • Navegar por internet gratis desde celular o móvil con telcel  387
    mllo, diego, DAVID, DAVID, isaias, mllo [...]
  • Hacer que tu aplicación del Facebook publique en el muro del usuario  11
    roberto, Yonny, nucklear, gel, Miguel Ortega, gsutavo [...]
  • Wallpaper Grunge Video tutorial: Fireworks [I Hate Photoshop]  1
    yefranjo77
  • Opacidad con css [+FIX]  6
    Miguel Ortega, Alex Aguiar, Gonzalo, Yo, Alex Aguiar, jorge
  • Descargar Archivos con Php desde mi Web  1
    Otto
  • Navegar por internet gratis desde celular o móvil con telcel {388}
  • Popin - Plugin jQuery para Pop-Ups {27}
  • Crear tu aplicación del facebook {17}
  • Personalizar en menú que sale cuando das clic secundario con JavaScript {16}
  • Beautiful Slide con jQuery {12}



casino Contador De Visitas


  • Categorías
    • cms
      • Wordpress
    • Desarrollo Web
      • ajax
      • Aplicaciones Facebook
      • Javascript
      • jQuery
      • Mootools
      • php
      • Programación con Style
      • Seguridad Web
      • Xml
    • Diseño Grafico
      • Fireworks
      • I Hate Photoshop
      • Photoshop
      • SwishMax
      • Templates
        • Dedalus
        • NukeET
    • Diseño web
      • CSS
      • Herramientas Web
      • html
    • Dominios mx
    • Experiencias Sexuales con la Web
    • General
    • Tecnología
    • Tips
    • tutorial
    • Un Regalo Especial
  • Twitter
    Zoneartcss
    • [Alex Aguiar] El reset CSS que uso ojala les guste http://www.zoneartcss.com/general/reset-css-alex-aguiar/ 03:01:46 PM Diciembre 08, 2009 desde web
    • [Miguel Ortega] subiendo la capacidad de memoria limite al servidor! 01:44:46 PM Diciembre 08, 2009 desde web
    • [MIguel Ortega] Zoneartcss va creciendo día con día me da mucho gusto ser parte de este proyecto.. 01:28:43 PM Diciembre 08, 2009 desde web
    • un nuevo theme para el dedalus Theme Sunrise2-Art ojala les guste!!!!!!! 06:55:35 PM Diciembre 03, 2009 desde web
  • Ultimos Post del Foro
    • [Themes Dedalus] B&W2 by: Akilesart
      September 26, 2009, 09:25
    • SimpleDeda-Art [Theme Dedalus] by: Akilesart
      September 15, 2009, 13:17
    • Descargar Adobe Illustrator CS3 Full + Crack[DD] Megaupload by: Akilesart
      September 11, 2009, 10:27
    • Descargar Adobe Photoshop 10 CS3 by: Akilesart
      September 11, 2009, 10:24
    • Descargar Adobe Fireworks CS3 - Full+Keygen [DD] Megaupload by: Akilesart
      September 11, 2009, 10:21
  • Enlaces
    • Alex Aguiar
    • Blog SexyTec
    • CreattoWeb
    • Frogx3
    • SexyTec.net
    • WebAdictos
  • Home
  • 1000 Efectos jQuery
  • 1000 Estilos Css
  • Foro
  • Liz Palacios
  • Miguel Ortega
  • Tu Granito de Arena!!
   

Back to Top
  • Este blog es parte de Buzzear (MX)
  • Blogalaxia
  • Add to Technorati Favorites
  • Web design blogs
  • Bitacoras.com
  • http://www.wikio.es

© Copyright ZoneArtCSS | Tu lugar: Del Arte CSS. All rights reserved.
Designed by FTL Wordpress Themes brought to you by Smashing Magazine