Menú-Tabs (Onmouseover)

Es decir: un menú confeccionado a base de "tabs" muy sencillo que, al pasar el ratón por encima de cada una de ellas, despliega un "comentario" sobre su contenido (la dirección a la que remitimos).

Para muestra, un ejemplo: podeís ver mi menú en Revolutum

La estructura es ésta:

• CSS, a colocar antes del cierre /skin (o /style):




.basictab ul{margin:4px;padding:3px 0;margin-left:0;font:bold 12px arial;list-style-type:none;text-align:left;}.basictab li{display:inline;margin:0;}.basictab li a{text-decoration:none;padding:3px 7px;margin-right:3px;border:none;background-color:firebrick;color:#fff;}
.basictab li a:visited{color:#333;}.basictab li a:hover, .basictab li a.current{background-color:#900;color:#fff;}.basictab li a:active{color:#000;}
.tabcontainer{clear:left;width:85%;height:2.5em;text-align:left;}
.tabcontent{display:none;}



Yo he cambiado el "float", porque me venía mejor para mi página. Podéis cambiarlo a "right" según vuestras preferencias. También he cambiado el fondo de "transparent" a "firebrick", por la misma razón. Si el fondo de vuestra página es de color (p.e. negro), casi mejor que dejáis las tabs en "transparent").


• Script: A colocar antes del cierre /head:




<script src='http://themes.wordpress.net/testrun/wp-content/themes/3511/js/ddtabmenu.js' type='text/javascript'/>



<script type='text/javascript'>



//SYNTAX: ddtabmenu.definemenu(&quot;tab_menu_id&quot;, integer OR &quot;auto&quot;)



ddtabmenu.definemenu(&quot;ddtabs1&quot;, 7) //initialize Tab Menu with ID &quot;ddtabs1&quot; and select 1st tab by default



</script>





• HTML: A colocar donde deseéis ver vuestro menu-tabs, preferentemente en la cabecera de vuestro blog, es decir, en la tag <header>
  
  
  
  

<div class='basictab' id='ddtabs1'>



<ul>



<li><a href='http://cuentos-historias.blogspot.com/' rel='sc1'>Inicio</a></li>



<li><a href='http://www.blogger.com/profile/14417669816485875991' rel='sc2'>&quot;Ego&quot;</a></li>



<li><a href='http://feeds.feedburner.com/Revolutum' rel='sc3'>Entradas</a></li>



<li><a href='http://nada-junio.blogspot.com/' rel='sc4'>Dibujos</a></li>



<li><a href='mailto:llara_5@msn.com' rel='sc5'>Contacto</a></li>



<li><a href='http://cafe-junio.blogspot.com/' rel='sc6'>Epílogo</a></li>



</ul>



</div>



<DIV class='tabcontainer'>



<div class='tabcontent' id='sc1'>



Regresar al <a href='http://cuentos-historias.blogspot.com/'>Inicio</a>.





</div>



<div class='tabcontent' id='sc2'>



Acerca de mí... en mi Perfil.



</div>



<div class='tabcontent' id='sc3'>



Ver entradas recientes.



</div>



<div class='tabcontent' id='sc4'>



Ver mis dibujos.



</div>



<div class='tabcontent' id='sc5'>



Correo... no sé por qué...



</div>



<div class='tabcontent' id='sc6'>



Página pricipal.



</div>



</DIV>

Los "divs" contienen el ejemplo de mi blog, para que sea más fácil ver la estructura. Sólo tenéis que cambiar mis Url por las vuestras, así como los textos y contenido que queráis mostrar en las tabs.

Y eso es todo... salvo decir que este menú lo encontré en esa plantilla de MILO que he colocado en el blog de ejemplo...