Menú expandible del Sevilla fc. en tu blog

Anteriormente os traje un menú del Sevilla FC (MENÚ) y hoy de nuevo vengo con otro pero este es expandible y más completo que el anterior, ya que trae todas las competiciones que afronta el Sevilla FC, desde la primera plantilla hasta los benjamines.

Podéis visualizarlo bajo la cabecera de mi blog, pero este tiene 3 o 4 modificaciones respecto al mío, ya que algunas páginas redireccionan a mi blog, y en este están en blanco.

Su instalación es fácil, tan solo copiar el código y pegarlo en un nuevo elemento de HTML > Diseño > Elementos de pagina > Añadir un gadget.

código:
<style type="text/css"> #subnavbar { background:#6F0707 ; width: 750px; height: 15px; font-weight:NORMAL; color: #FFFFFF; margin: 0px; padding: 10px; font-family:"Trebuchet MS"; } #subnav { margin: 0px; padding: 0px; } #subnav ul { float: left; color: #FFFFFF; list-style: none; margin: 0px; padding: 0px; } #subnav li { list-style: none; margin: 0px; padding: 0px; } #subnav li a, #subnav li a:link, #subnav li a:visited { color: #FFFFFF; display: block; font-size: 10px; text-transform: uppercase; margin: 0px 8px 0px 0px; padding: 5px 10px 5px 10px; border-left: 1px solid #FFFFFF; } #subnav li a:hover, #subnav li a:active { background: #373535; color: #ffffff; display: block; text-decoration: none; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; } #subnav li li a, #subnav li li a:link, #subnav li li a:visited { background:#6F0707; width: 100px; heigth: 15px float: none; margin: 0px; padding: 5px 10px 5px 10px; border-bottom: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } #subnav li li a:hover, #subnav li li a:active { background: #312B2A; margin: 0px; padding: 5px 10px 5px 10px; } #subnav li { float: left; padding: 0px; } #subnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0px; padding: 0px; } #subnav li li { } #subnav li ul a { width: 140px; } #subnav li ul a:hover, #subnav li ul a:active { } #subnav li ul ul { margin: -25px 0 0 161px; } #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul { left: -999em; } #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul { left: auto; } #subnav li:hover, #subnav li.sfhover { position: static; } </style> <div id='subnavbar'><ul id='subnav'><ul class="barraMenu"> </li> <li><a >SEVILLA SFC.</a> <ul><li><a class="barraMenu" onclick="window.open(this.href, this.target, 'width=520,height=520,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/h34-plantillasfc">Plantilla</a> </li><li><a class="barraMenu" onclick="window.open(this.href, this.target, 'width=300,height=455,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=260,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/resultadosprimeradivision-h29.htm">Resultados 1ª</a> </li></ul><li><a>SEVILLA ATLET.</a> <ul><li><a class="barraMenu" onclick="window.open(this.href, this.target, 'width=520,height=520,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/h41-plantilla-atl">Plantilla</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 class="barraMenu" onclick="window.open(this.href, this.target, 'width=520,height=520,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/h42-plantilla-c">Plantilla</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>SEVILLA Femino</a> <ul><li> <a class="barraMenu" onclick="window.open(this.href, this.target, 'width=520,height=520,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/h43-plantilla-femino">Plantilla</a> </li> <li><a class="botonMenu" onclick="window.open(this.href, this.target, 'width=460,height=300,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/h33-clasificacion-femino">clasificacion</a> </li> </ul></li> <li><a>ESPECIAL CANTERA</a> <ul><li> <a class="barraMenu" onclick="window.open(this.href, this.target, 'width=580,height=520,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/h44-especial-cantera">Especial Cantera</a> </li></ul></li> <li><a >MEDIOS SFC.</a> <ul><li><a class="botonMenu" onclick="window.open(this.href, this.target, 'width=400,height=400,top=10px,left=150px'); return false;" href="http://82.203.210.184/sevilla/swf/SevillaFC.swf" 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> </ul></li> <li><a>MULTIMEDIA</a> <ul><li><a href='http://www.megaupload.com/?d=3t4yah5f' title=''>SONIDOS BAJAR</a> </li> </ul></li> </li></ul></ul></div

Podéis añadir mas link si queréis, tan solo añadiendo este trozo de código:
<li><a href='DIRECCIÓN URL' title=''>TÍTULO</a>
</li>

El primer background:#6F0707; es el color del menú, ahora mismo es rojo, para cambiarlo, accede aquí y modifícalo a tu gusto, puedes hacer pruebas aquí pegando el código y modificandolo.

El tamaño del texto también es modificable en este trozo:
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 10px;
text-transform: uppercase;
margin: 0px 8px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;

Tiene más modificaciones pero eso lo dejo a vuestro antojo.

Espero que lo disfrutéis.

Publicaciones Relacionadas