Si algo he estado utilizando mucho últimamente para proyectos personales son los menu de navegación en bloques y en dos líneas. Ya que son simples, y a la vez el efecto en Mouseover es algo que me gusta mucho como se visualizan. A su vez, tratándose de un menu de navegación, la segunda línea siempre es una buena opción para añadir una breve descripción o un fragmento de texto adicional que acompañe el titulo principal de nuestro botón. Para mis proyectos estaba utilizando un código personal, pero hoy, acabo de ver en vikiworks (un diseñador que admiro mucho) otra alternativa para lograr este tipo de menu.
Ver Demo - Mas info y Descarga A CSS Block Navigation Menu by vikiworks
El fragmento de código que comparte yichi
#menu ul { margin:0;padding:0; }
#menu ul li { display:block;padding:0; float:left;text-align:left;margin-right:2em; }
#menu li a { color:#fff;font:bold 14px georgia;text-decoration:none;line-height: 1.3em; display:block; }
#menu li a:hover { color:#ffc300; }
#menu li span { font:11px arial; color:#666; margin:0; }
#menu li span:hover {color:#999;}
La estructura de nuestro menú
<li><a href="#">Menu01<br /><span>Short desc</span></a></li>
<li><a href="#">Menu02<br /><span>Short desc</span></a></li>
<li><a href="#">Menu03<br /><span>Short desc</span></a></li>
</ul></div>
Loading ...
DeeJay Marrulla
30-03-2008
Permalink
Se ve bien interesante este tipo de menu, lo voy a probar.
eduardo
30-03-2008
Permalink
Hola.
Oye, te felicito por tu blog, te leo desde hace tiempo y estos ejemplos son muy practicos ya que con ellos aprendo y por cierto me voy armando mi propia libreria
Saludos.
Menús en CSS muy buenos » Comenta o Muere | Actualidad, Humor, Tecnología, Política, Ciencia, Música… y otros muchos temas de los que merece la pena hablar.
30-03-2008
Permalink
[...] menú de navegación en dos líneas muy bueno es el que comentan en Xyberneticos, posee un efecto mouseover muy bonito y elegante. Lo han encontrado en Vikiworks, un magnífico [...]