07 marzo 2013

Menú expandible con CSS


He visto muchos menús desplegables por internet.. muy chulos, pero muy complicados para mi gusto, asi que voy a explicar como hacer un menu horizontal desplegable sencillito y funcional, tán solo con html y css.
 Está todo configurado para colocar en un gadget HTML, tan solo cambiando las direcciones url y los títulos que le queráis colocar.
Os he dejado algunos link colocados para ver en todo momento los resultados, clasificaciones y medios del Sevilla FC.

Todo es adaptable a vuestros blog, ancho, colores etc....Así que lo colocamos en el Gadget, y..... apañao.
No es para decir: !Uy que chulo que bonito que está!, pero todo es empezar.

Para ver su demostración, copia el código y pégalo en Pruebas HTML

<style type="text/css">
ul#menu-horizontal li {
float: left;
display: inline;
position: relative;}
ul#menu-horizontal ul {
display: none;
position: relative;
top: 14;
left:0;
margin:0;
padding:0;
background:#FFFFFF;}
ul#menu-horizontal ul li {
display: block !important;}
ul#menu-horizontal li:hover ul{
display: none;}
ul#menu-horizontal li:hover ul{
display: block;}
#menu-horizontal {
width:980px;/* ancho barra */
margin:0 auto;}
#menu-horizontal li {
margin:0 1px;
width:110px;/* ancho separacion entre link */
min-height:19px;
text-align:center;
background:#000;/*color fondo */
list-style:none;
padding:2px 0;}
#menu-horizontal li:hover {
background:#770404;/* color fondo expandible */}
#menu-horizontal li a {
font:NORMAL 12px sans-serif;/* tamaño letra */
color:#FFF;
text-decoration:none;}
#menu-horizontal li ul li{
float:none;
width:110px;/* ancho separacion del expandible */
margin:1px 0;}
</style>
<ul id="menu-horizontal">
<li><a href='dirección de tu blog/'title=''>INICIO</a></li>
<li><a >SEVILLA F.C.</a><ul>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url'title=''>título</a></li>
<li><a class="barraMenu" onclick="window.open(this.href, this.target, 'width=280,height=580,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/clasificacionprimeradivision-h31.htm">Clasificación 1ª</a></li>
<li><a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=300,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/resultadosprimeradivision-h29.htm">Resultados 1ª</a></li>
<li><a href='direccion de tu calendario'title=''>Calendario</a></li></ul>
<li><a>SEVILLA ATLT.</a><ul>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a class="botonMenu" onclick="window.open(this.href, this.target, 'width=370,height=455,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/clasificacion-2b-h36.htm">Clasificación 2ªB</a></li>
<li><a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/resultados-2b-h35.htm">Resultados 2ª B </a></li></ul></li>
<li><a>SEVILLA C.3ªG-10</a><ul>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a class="botonMenu" onclick="window.open(this.href, this.target, 'width=280,height=455,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/clasificacion-3-grupo-10-h38.htm">Clasificación 3ª</a></li>
<li><a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/resultados-3-grupo-10-h37.htm">Resultados 3ª</a></li></ul></li>
<li><a>S.F.C FEMINO</a><ul>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a class="botonMenu" onclick="window.open(this.href, this.target, 'width=470,height=200,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/h33-clasificacion-femino">clasificacion</a></li></ul></li>
<li><a>LA CANTERA</a><ul>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a>
</li></ul></li>
<li><a >MEDIOS SFC.</a><ul>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a class="botonMenu" onclick="window.open(this.href, this.target, 'width=460,height=340,top=10px,left=150px'); return false;" href="http://www.sevillistasporelmundo.com/h52-sfctv" target=_blank>SFC TV</a></li>
<li><a class="botonMenu" href="http://www.emisorasonline.net/conexion/511sevillaPGA598754/index.htm" target="_blank" onclick="window.open(this.href, this.target, 'width=380,height=10'); return false;">SFC Radio</a></li>
<li><a href='enlace url' title=''>titulo</a></li></ul></li>
<li><a>MULTIMEDIA S.F.C.</a><ul>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a></li>
<li><a href='enlace url' title=''>titulo</a></li></ul></li>
</li></li></ul>


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

1 comentarios :


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"