Se trata de un tutorial realizado por Catalin Rosu en donde ha creado un menú horizontal desplegable con CSS3, sin ningún tipo de código Javascript ni tampoco imágenes.
Ejemplo real:
Para hacer este bonito menú te transladas a edición de plantilla y buscas con Ctrl+F la etiqueta ]]></b:skin> y justo encima colocas el CSS:
/* Menú en general */ #menu { width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #111; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 50px; border-radius: 50px; -moz-box-shadow: 0 2px 1px #9c9c9c; -webkit-box-shadow: 0 2px 1px #9c9c9c; box-shadow: 0 2px 1px #9c9c9c; } #menu li { float: left; padding: 0 0 10px 0; position: relative; } #menu a { float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a { color: #fafafa; } *html #menu li a:hover { color: #fafafa; } #menu li:hover > ul { display: block; } /* Submenús */ #menu ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 5px; border-radius: 5px; } #menu ul li { float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; } #menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a { padding: 10px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; } *html #menu ul a { height: 10px; width: 150px; } *:first-child+html #menu ul a { height: 10px; width: 150px; } #menu ul a:hover { background: #0186ba; background: -moz-linear-gradient(#04acec, #0186ba); background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background: -webkit-linear-gradient(#04acec, #0186ba); background: -o-linear-gradient(#04acec, #0186ba); background: -ms-linear-gradient(#04acec, #0186ba); background: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child a { -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #menu ul li:first-child a:after { content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul li:last-child a { -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /* Borrar elementos flotantes */ #menu:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html #menu { zoom: 1; } *:first-child+html #menu { zoom: 1; }
Ahora colocas este HTML como elemento HTML/Javascript y listo:
<ul id="menu"> <li><a href="#">Titulo 1</a></li> <li><a href="#">Titulo 2</a> <ul> <li><a href="#">Subtitulo 1</a></li> <li><a href="#">Subtitulo 2</a></li> <li><a href="#">Subtitulo 3</a></li> <li><a href="#">Subtitulo 4</a> </ul> </li> <li><a href="#">Titulo 3</a></li> <li><a href="#">Titulo 4</a></li> </ul>
Puedes ir agregando las listas de los títulos y subtítulos de esta forma:
<li><a href="#">Titulo 3</a> <ul> <li><a href="#">Subtitulo 1</a></li> <li><a href="#">Subtitulo 2</a></li> <li><a href="#">Subtitulo 3</a></li> <li><a href="#">Subtitulo 4</a></li> </ul> </li> <li><a href="#">Titulo 4</a></li>
Como se puede ver, la estructura del HTML es muy fácil de entender. Espero y lo puedas aplicar en tu blog.
Acerca de mi
![Frase de compartir de conocimiento](http://2.bp.blogspot.com/-hv1oLrAn0v8/Ud8Z-QOrOtI/AAAAAAAAIiY/QVR7QSEx0rU/s175/Post-it-Frase.png)
Buscar en el blog
Lista de categorias
- CSS (14)
- Entretenimiento (4)
- HTML (18)
- Iconos (13)
- Inspiración (13)
- JAVA Interfaz (6)
- jQuery (3)
- Lo que NO encontré en Internet (1)
- Programas en C (69)
- Recursos Online (13)
- Trucos (6)
- Widgets (2)
Contenido del Blog
Comentarios recientes
Sigueme en Twitter
Archivo del blog
-
▼
2012
(131)
-
▼
marzo
(22)
- Menu horizontal desplegable con CSSIII
- Lista de nueve editores de fotos en linea
- Tablas con CSS efecto IIID
- Generador de banners en linea
- Parrafos con HTML
- Patrones de texturas
- Realizar notas con las etiquetas fieldset y legend
- Fondos de pantalla, relojes, calendarios y juegos ...
- Fusion entre dibujo y la fotografia
- Tooltip brillante hecho con CSSIII
- Galerias de imagenes con efecto jQuery y CSSIII
- Banderas del mundo realizadas con HTML
- Boton vinculo con CSSIII
- Las mejores paginas web 404 no encontradas
- Textos IIID CSSIII
- Marcos generados con CSS
- Buscar imagenes de manera facil y rapida
- Gran coleccion de iconos google plus para tu blog
- Un cronometro con lenguaje C
- jShowOff: un slide de imagenes efectuado con jQuery
- Menus horizontales sencillos creados con CSS efect...
- Averiguar la edad actual que tienes con programa en C
-
▼
marzo
(22)
pude agregarlo pero sin submenus :/
Oh! me parace bien Emiliano Martin... lo podremos agregar como nos agrade espero verte pronto por aqui saludos!!
Lo copie en notepad ++ y me quedo perfecto te felicito buen aporte y excelente explicacion sigue asi!