Menú Horizontal – Bubble Menu

 

Si te gusta el menú horizontal que ves en la parte superior de este blog, este es el código y los pasos para instalarlo.

ANTES DE REALIZAR LAS MODIFICACIONES, RECUERDA HACER UNA COPIA DE RESPALDO DE TU  PLANTILLA.

 

1.- Descárgate este archivo para las imágenes: Images.rar , descomprímelo y súbelo a tu servidor de archivos.

 

2.- Ahora, la modificación de la plantilla, entra en tu plantilla  Diseño – Edición HTML  , localiza ]]></b:skin>  y justo antes pega este código:

<!-- CSS Menu BUBBLE -->

.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}

/* BUBBLE PLASTIC HORIZONTAL MENU */

.bubplastic.horizontal {
width: 100%;
height: 27px;
margin: 0;
padding: 0;
background: #000000 url('http://TU_SERVIDOR/bg-bubplastic.gif') repeat-x top left;
}
.bubplastic.horizontal ul {
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.horizontal ul li {
float: left;
margin: 0;
padding: 0;
background: url('http://TU_SERVIDOR/bg-bubplastic-button.gif') no-repeat top left;
}

.bubplastic.horizontal ul li a {
display: block;
height: 27px;
padding-left: 35px;
float: left;
text-transform: none;
font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
font-size: 90%;
color: #FFFFFF;
text-decoration: none;
}

.bubplastic.horizontal ul li a span.menu_ar {
display: block;
float: left;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: url('http://TU_SERVIDOR/bg-bubplastic-button.gif') no-repeat top right;
cursor: pointer
}
/* END BUBBLE PLASTIC HORIZONTAL MENU */


/* AQUA HOVER */
.bubplastic.aqua ul li a:hover,
.bubplastic.aqua ul li.highlight a {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-aqua.gif') no-repeat top left;
}
.bubplastic.aqua ul li a:hover span.menu_ar,
.bubplastic.aqua ul li.highlight a span.menu_ar {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-aqua.gif') no-repeat top right;
}


/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-blue.gif') no-repeat top left;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-blue.gif') no-repeat top right;
}


/* GRAY HOVER */
.bubplastic.gray ul li a:hover,
.bubplastic.gray ul li.highlight a {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-gray.gif') no-repeat top left;
}
.bubplastic.gray ul li a:hover span.menu_ar,
.bubplastic.gray ul li.highlight a span.menu_ar {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-gray.gif') no-repeat top right;
}


/* LIME HOVER */
.bubplastic.lime ul li a:hover,
.bubplastic.lime ul li.highlight a {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-lime.gif') no-repeat top left;
}
.bubplastic.lime ul li a:hover span.menu_ar,
.bubplastic.lime ul li.highlight a span.menu_ar {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-lime.gif') no-repeat top right;
}


/* ORANGE HOVER */
.bubplastic.orange ul li a:hover,
.bubplastic.orange ul li.highlight a {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-orange.gif') no-repeat top left;
}
.bubplastic.orange ul li a:hover span.menu_ar,
.bubplastic.orange ul li.highlight a span.menu_ar {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-orange.gif') no-repeat top right;
}


/* PINK HOVER */
.bubplastic.pink ul li a:hover,
.bubplastic.pink ul li.highlight a {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-pink.gif') no-repeat top left;
}
.bubplastic.pink ul li a:hover span.menu_ar,
.bubplastic.pink ul li.highlight a span.menu_ar {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-pink.gif') no-repeat top right;
}


/* PURPLE HOVER */
.bubplastic.purple ul li a:hover,
.bubplastic.purple ul li.highlight a {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-purple.gif') no-repeat top left;
}
.bubplastic.purple ul li a:hover span.menu_ar,
.bubplastic.purple ul li.highlight a span.menu_ar {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-purple.gif') no-repeat top right;
}


/* RED HOVER */
.bubplastic.red ul li a:hover,
.bubplastic.red ul li.highlight a {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-red.gif') no-repeat top left;
}
.bubplastic.red ul li a:hover span.menu_ar,
.bubplastic.red ul li.highlight a span.menu_ar {
background: url('http://TU_SERVIDOR/bg-bubplastic-h-red.gif') no-repeat top right;
}

#test li {
display: block;
border: solid 1px red;
}

<!-- FIN CSS MENU BUBBLE -->

 

Sustituye TU_SERVIDOR por la URL de tu servidor de archivos.

 

Estas son las imágenes de fondo que aparecerán al pasar el cursor por encima de la opción del menú:

/* AQUA HOVER */      

/* BLUE HOVER */       

/* GRAY HOVER */       

/* LIME HOVER */        

/* ORANGE HOVER */ 

/* PINK HOVER */        

/* PURPLE HOVER */   

/* RED HOVER */         

 

Este sería el efecto “aqua”:

 

Dependerá de lo que escojas en el siguiente código para color_hover:

 

Ahora pondremos las opciones para el menú, localiza la etiqueta </head> y justo debajo pega el código:

<!-- MENU BUBBLE -->
<div class='menu bubplastic horizontal color_hover'>
<ul>

<li><span class='menu_r'><a href='URL_1'><span class='menu_ar'>Texto 1</span></a></span></li>

<li><span class='menu_r'><a href='URL_2'><span class='menu_ar'>Texto 2</span></a></span></li>

<li><span class='menu_r'><a href='URL_3'><span class='menu_ar'>Texto 3</span></a></span></li>

<li><span class='menu_r'><a href='URL_4'><span class='menu_ar'>Texto 4</span></a></span></li>

<li><span class='menu_r'><a href='URL_5'><span class='menu_ar'>Texto 5</span></a></span></li>

</ul>
<br class='clearit'/>
</div>
<!-- FIN MENU BUBBLE -->

 

3.- Personalización:

color_hover: Es el color que deseas para cuando se pase el cursor por encima de la opción. En mi caso es gray.

Elige entre:  aqua  /  blue  /  gray  /  lime  /  orange  /  pink  /  purple  o  red según se ajuste más a tus gustos o diseño de la plantilla.

Sustituye URL_1, URL_2, … y Texto 1, Texto 2, …  por tus enlaces URL y textos para el menú. En mi ejemplo hay 5 opciones, pero puedes suprimir o añadir más opciones (líneas <li>........</li>) antes de la etiqueta </ul>.

 

Esto es todo, espero que te sirva.