Mostrando entradas con la etiqueta jquery. Mostrar todas las entradas
Mostrando entradas con la etiqueta jquery. Mostrar todas las entradas

27.3.13

Menú lateral con CSS y Jquery para Blogger



Menú de Navegación Lateral con Efecto Slide jQuery y CSS

Este menú en diapositiva, cuya explicación (en inglés) para su creación, encontramos en tympanus.net, tiene un interesante efecto slide: sus elementos se ocultan al ingresar en la página, permaneciendo semiescondidos, mostrándose en su totalidad cuando se pasa el cursor por las partes visibles de los mismos.

Menú de Navegación Lateral con Efecto Slide jQuery y CSS

Para ponerlo en nuestro blog:

1.- Vamos a Editar HTML:

Diseño ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

2.- Para obtener la librería jQuery localizamos la etiqueta </head>, poníéndola dentro del rectángulo de búsqueda (Search), y pegamos, entes de la misma, el siguiente código:



3.- Para animar el efecto agregamos el script correspondiente pegando, después del código anterior, el siguiente:

<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},500);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},500);
}
);
});
</script>

-85px corresponde a la parte de los elementos del menú que no se oculta. Si queremos ocultar más o menos, aumentamos o disminuimos esa cifra.

Los números 500 corresponden a la velocidad del efecto slide que, en el caso del DEMO, es de 500 milisegundos. Podemos cambiarlos si queremos que la velocidad sea mas lenta o más rápida.

4.- Para darle estilo al menú localizamos la etiqueta ]]></b:skin>; y, antes de la misma, pegamos el siguiente código:

/* CSS menú de Navegación Slide*/
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#cfcfcf;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .imagen1 a{
background-image: url(http://s7.tinypic.com/1428pag_th.jpg);
}
ul#navigation .imagen2 a {
background-image: url(http://s7.tinypic.com/ke8ax1_th.jpg);
}
ul#navigation .imagen3 a {
background-image: url(http://s7.tinypic.com/r210fl_th.jpg);
}
ul#navigation .imagen4 a {
background-image: url(http://s7.tinypic.com/a4vexe_th.jpg);
}
ul#navigation .imagen5 a {
background-image: url(http://s7.tinypic.com/50ruz7_th.jpg);
}
ul#navigation .imagen6 a {
background-image: url(http://s7.tinypic.com/15qpxj8_th.jpg);
}
ul#navigation .imagen7 a {
background-image: url(http://s7.tinypic.com/2r4lh0z_th.jpg);
}

Las URLs resaltadas en rojo corresponden a las imágenes utilizadas en la DEMO. Las cambiamos por las URLs de nuestras imágenes.

5.- Vista previa y Guardar plantilla.

6.- Finalmente, para que funcionen el CSS y el Script, Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript, y en este gadget pegamos el siguiente código HTML:

<ul id="navigation">
<li class="imagen1"><a href="#" title="descripción"></a></li>
<li class="imagen2"><a href="#" title="descripción"></a></li>
<li class="imagen3"><a href="#" title="descripción"></a></li>
<li class="imagen4"><a href="#" title="descripción"></a></li>
<li class="imagen5"><a href="#" title="descripción"></a></li>
<li class="imagen6"><a href="#" title="descripción"></a></li>
<li class="imagen7"><a href="#" title="descripción"></a></li>
</ul>

Reemplazamos todos los # por las URLs de las páginas enlazadas, y las descripción por una descripción resumida de las mismas, que se verá al poner el cursor sobre dada elemento.


Índice: Menús
Menú de navegación lateral con efecto slide
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable
5 comentarios
Etiquetas: , , , ,

11.6.12

Menú vertical con CSS y jquery, efecto acordeón


Cómo poner en nuestro blog un menú vertical con CSS y jquery, efecto acordeón:

1.- Vamos a Editar HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

2.- Para obtener el script Jquery y la librería Jquery localizamos la etiqueta </head>, poiéndola dentro del rectángulo de búsqueda (Search) y, antes de la misma, pegamos el siguiente código:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

3.- Para agregarle la funcionalidad al menú, con Jquery, pegamos, antes de la etiqueta </body>, el siguiente código:

<script type="text/javascript" charset="utf-8">
$(function(){
$('#menu li a').click(function(event){
var elem = $(this).next();
if(elem.is('ul')){
event.preventDefault();
$('#menu ul:visible').not(elem).slideUp();
elem.slideToggle();
}
});
});
</script>

4.- Para darle estilo al menú pegamos, antes de la etiqueta ]]></b:skin>, el siguiente código CSS:

#menu{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:1px 1px 3px #888;
-moz-box-shadow:1px 1px 3px #888;
}
#menu li{border-bottom:1px solid #fff;}
#menu ul li, #menu li:last-child{border:none}
a{
display:block;
color:#fff;
text-decoration:none;
font-family:'Helvetica', Arial, sans-serif;
font-size:13px;
padding:3px 5px;
text-shadow:1px 1px 1px #000000;
}
#menu a:hover{
color:#ffffff;
-webkit-transition: color 0.2s linear;
}
#menu ul a{background-color:#088a85;}
#menu ul a:hover{
background-color:#04b4ae;
color:#0b3b39;
text-shadow:none;
-webkit-transition: color, background-color 0.2s linear;
}
ul{
display:block;
background-color:#0B3B39;
margin:0;
padding:0;
width:130px;
list-style:none;
}
#menu ul{background-color:#6594d1;}
#menu li ul {display:none;}

En el anterior código CSS podemos hacer las modificaciones a los colores y caracteres del menú, para adaptarlo al diseño de nuestro blog. El color de los enlaces no los podemos modificar en el menú, ya que nos son dados por defecto en la plantilla; para modificarlo debemos acudir al Diseñador de plantillas.

5.- Guardamos plantilla.

6.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript; quedará bien en la barra lateral (Sidebar). En este gadget pegamos el siguiente código:

<ul id="menu">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
<li><a href="#">Submenu 7</a></li>
<li><a href="#">Submenu 8</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
<li><a href="#">Submenu 7</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
<li><a href="#">Submenu 7</a></li>
<li><a href="#">Submenu 8</a></li>
<li><a href="#">Submenu 9</a></li>
<li><a href="#">Submenu 10</a></li>
</ul>
</li>
<li><a href="#">Menu 5</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 6</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 7</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
<li><a href="#">Submenu 7</a></li>
<li><a href="#">Submenu 8</a></li>
</ul>
</li>
<li><a href="#">Menu 8</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 9</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
</ul>
</li>
<li><a href="#">Menu 10</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li></ul>

En todos los <a href="#"> reemplazamos # por los enlaces correspondientes, y, a los menús y submenús les ponemos los títulos de los enlaces.

El anterior código lo podemos modificar agregando o quitando menús y submenús, según convenga a nuestro blog.


PLantillas nuevas

En los blogs diseñados con plantillas nuevas (Diseñador de PLantillas) esta clase de menús pueden presentar problemas para su funcionamiento, ya que esas plantillas tienen estilos predefinidos. Si tenemos ese problema sigamos el siguiente procedimiento:

1.- Vamos a Editar HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

2.- Localizamos, poniendo dentro del rectángulo de búsqueda (Search) algunos caracteres de la misma, la siguiente línea:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

...y eliminamos la parte resaltada; si aparece en otras líneas también la eliminamos.

3.- Localizamos la siguiente sección:

/* Tabs
----------------------------------------------- */
.tabs-outer {
  overflow: hidden;
  position: relative;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
  overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
  position: absolute;
  width: 100%;

  border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
  bottom: 0;
}

.tabs-inner .widget li a {
  display: inline-block;

  margin: 0;
  padding: .6em 1.5em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-top: 1px solid $(tabs.border.color);
  border-bottom: 1px solid $(tabs.border.color);
  border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
  border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
  color: $(tabs.selected.text.color);
}

...que puede variar dependiendo de la plantilla, y eliminamos todo su contenido, excepto el encabezado:

/* Tabs
----------------------------------------------- */

4.- El contenido que eliminamos en la anterior sección lo reemplazamos por éste:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

5.- Vista previa y Guardar plantilla.

Índice: Menús
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable
2 comentarios
Etiquetas: , , , , , ,

6.2.11

Menú de Navegación Lateral con Efecto Slide


Este menú en diapositiva, tiene un interesante efecto slide: sus elementos se ocultan al ingresar en la página, permaneciendo semiescondidos, mostrándose en su totalidad cuando se pasa el cursor por las partes visibles de los mismos.

Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery Para ponerlo en nuestro blog:

1.- Vamos a Editar HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

2.- Para obtener la librería jQuery localizamos la etiqueta </head> y pegamos, entes de la misma, el siguiente código:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

3.- Para animar el efecto agregamos el script correspondiente pegando, después del código anterior, el siguiente:

<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},500);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},500);
}
);
});
</script>

-85px corresponde a la parte de los elementos del menú que no se oculta. Si queremos ocultar más o menos, aumentamos o disminuimos esa cifra.

Los números 500 corresponden a la velocidad del efecto slide que, en el caso del DEMO, es de 500 milisegundos. Podemos cambiarlos si queremos que la velocidad sea mas lenta o más rápida.

4.- Para darle estilo al menú localizamos la etiqueta ]]></b:skin>; y, antes de la misma, pegamos el siguiente código:

/* CSS menú de Navegación Slide*/
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#cfcfcf;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .imagen1 a{
background-image: url(http://s7.tinypic.com/1428pag_th.jpg);
}
ul#navigation .imagen2 a {
background-image: url(http://s7.tinypic.com/ke8ax1_th.jpg);
}
ul#navigation .imagen3 a {
background-image: url(http://s7.tinypic.com/r210fl_th.jpg);
}
ul#navigation .imagen4 a {
background-image: url(http://s7.tinypic.com/a4vexe_th.jpg);
}
ul#navigation .imagen5 a {
background-image: url(http://s7.tinypic.com/50ruz7_th.jpg);
}
ul#navigation .imagen6 a {
background-image: url(http://s7.tinypic.com/15qpxj8_th.jpg);
}
ul#navigation .imagen7 a {
background-image: url(http://s7.tinypic.com/2r4lh0z_th.jpg);
}

Las URLs resaltadas en rojo corresponden a las imágenes utilizadas en la DEMO. Las cambiamos por las URLs de nuestras imágenes.

5.- Vista previa y Guardar plantilla.

6.- Finalmente, para que funcionen el CSS y el Script, Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript, y en este gadget pegamos el siguiente código HTML:

<ul id="navigation">
<li class="imagen1"><a href="#" title="descripción"></a></li>
<li class="imagen2"><a href="#" title="descripción"></a></li>
<li class="imagen3"><a href="#" title="descripción"></a></li>
<li class="imagen4"><a href="#" title="descripción"></a></li>
<li class="imagen5"><a href="#" title="descripción"></a></li>
<li class="imagen6"><a href="#" title="descripción"></a></li>
<li class="imagen7"><a href="#" title="descripción"></a></li>
</ul>

Reemplazamos todos los # por las URLs de las páginas enlazadas, y las descripción por una descripción resumida de las mismas, que se verá al poner el cursor sobre dada elemento.


Índice: Menús
Menú de navegación lateral con efecto slide
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable
13 comentarios
Etiquetas: , , , , ,

14.1.11

Menú vertical con CSS y jquery, efecto acordeón



Este tutorial fue actualizado: Ir a la actualizacion.

Del menú vertical con CSS y jquery, efecto acordeón, podemos ver un ejemplo aquí:

Menú vertical con CSS y jquery, efecto acordeón
...y para ponerlo en nuestro blog, procedemos así:

1.- Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►
Acceso a Edición de HTML

2.- Para obtener el script Jquery y la librería Jquery localizamos la etiqueta </head> y, antes de la misma, pegamos el siguiente código:

<script src='http://pazos-blogger.googlecode.com/files/libreria.jquery.min.1.4.2.js' type='text/javascript'/>
<script src='http://pazos-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>


3.- Para agregarle la funcionalidad al menú, con Jquery, pegamos, antes de la etiqueta </body>, el siguiente código:

<script type="text/javascript" charset="utf-8">
$(function(){
$('#menu li a').click(function(event){
var elem = $(this).next();
if(elem.is('ul')){
event.preventDefault();
$('#menu ul:visible').not(elem).slideUp();
elem.slideToggle();
}
});
});
</script>

4.- Para darle estilo al menú pegamos, antes de la etiqueta ]]></b:skin>, el siguiente código CSS:

#menu{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:1px 1px 3px #888;
-moz-box-shadow:1px 1px 3px #888;
}
#menu li{border-bottom:1px solid #fff;}
#menu ul li, #menu li:last-child{border:none}
a{
display:block;
color:#fff;
text-decoration:none;
font-family:'Helvetica', Arial, sans-serif;
font-size:13px;
padding:3px 5px;
text-shadow:1px 1px 1px #000000;
}
#menu a:hover{
color:#ffffff;
-webkit-transition: color 0.2s linear;
}
#menu ul a{background-color:#088a85;}
#menu ul a:hover{
background-color:#04b4ae;
color:#0b3b39;
text-shadow:none;
-webkit-transition: color, background-color 0.2s linear;
}
ul{
display:block;
background-color:#0B3B39;
margin:0;
padding:0;
width:130px;
list-style:none;
}
#menu ul{background-color:#6594d1;}
#menu li ul {display:none;}

En el anterior código CSS podemos hacer las modificaciones a los colores y caracteres del menú, para adaptarlo al diseño de nuestro blog. El color de los enlaces no los podemos modificar en el menú, ya que nos son dados por defecto en la plantilla; para modificarlo debemos acudir al Diseñador de plantillas.

5.- Guardamos plantilla.

6.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript; quedará bien en la barra lateral (Sidebar). En este gadget pegamos el siguiente código:

<ul id="menu">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
<li><a href="#">Submenu 7</a></li>
<li><a href="#">Submenu 8</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
<li><a href="#">Submenu 7</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
<li><a href="#">Submenu 7</a></li>
<li><a href="#">Submenu 8</a></li>
<li><a href="#">Submenu 9</a></li>
<li><a href="#">Submenu 10</a></li>
</ul>
</li>
<li><a href="#">Menu 5</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 6</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 7</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
<li><a href="#">Submenu 7</a></li>
<li><a href="#">Submenu 8</a></li>
</ul>
</li>
<li><a href="#">Menu 8</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 9</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
</ul>
</li>
<li><a href="#">Menu 10</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li></ul>

En todos los <a href="#"> reemplazamos # por los enlaces correspondientes, y, a los menús y submenús les ponemos los títulos de los enlaces.

El anterior código lo podemos modificar agregando o quitando menús y submenús, según convenga a nuestro blog.

Este tutorial fue actualizado: Ir a la actualizacion.


Índice: Menús
Menú de navegación lateral con efecto slide
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable
14 comentarios
Etiquetas: , , , ,

13.1.11

Menú Horizontal desplegable con jQuery y CSS3


Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante

Vamos a crear un llamativo menú desplegable con efecto jQuery y CSS3. Este menú contiene cuadros de diapositivas e imágenes en miniatura que aparecen y se maximizan al pasar el cursor por encima de cada uno de los elementos del menú y, que al hacer click sobre las mismas, nos llevarán a las páginas de los enlaces correspondientes. También incluye recuadros en los submenús, que contienen enlaces, y con efecto deslizante hacia la derecha o hacia la izquierda.

El autor de este menú es tympanus. Para ponerlo en nuestro blog el procedimiento es el siguiente:

1.- Vamos a Edición de HTML:

Página principal ► Diseño ► Edición de HTML ►
Acceso a Edición de HTML

2.- Para obtener el script jQuery y la librería jQuery localizamos la etiqueta </head> y, antes de la misma, pegamos el siguiente código:

<script src='http://pazos-blogger.googlecode.com/files/libreria.jquery.min.1.4.2.js' type='text/javascript'/>
<script src='http://pazos-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

3.- Para darle estilo al menú pegamos el siguiente código CSS antes de la etiqueta ]]></b:skin> :

/* Slide Menú desplegable con jQuery y CSS 3
----------------------------------------------- */

ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
float:left;
width:170px;
height:85px;
position:relative;
cursor:pointer;
}
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:170px;
height:85px;
z-index:12;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiog8Qkr6qoVEaqTSz_9Y3koQmVzTERTXdXwnj4_kuD2JqP7TdlO16iouM3uF3jE4xmlHopyeP8_DUe2M72mr_vFvPjNswLP_lRPz7gT_AXOMzupi_OFovE28GU3fdIVflpKnxN9E4-2HjD/) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:170px;
height:60px;
z-index:15;
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:85px;
width:170px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
color:#ffffff;
font-size:20px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#81BEF7;
float:left;
clear:both;
width:155px; /*For dumbass IE7*/
font-size:10px;
letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:170px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#000;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0b75af;
}
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}

El código resaltado en amarillo corresponde al color de los títulos del menú principal, que en nuestro ejemplo es blanco. Si el fondo del blog en donde pondremos el menú es blanco, posiblemente los títulos no se verán. En este caso debemos cambiar ese color.

El código resaltado en verde corresponde al color de los subtítulos del menú principal, que en nuestro ejemplo es azul. Si el fondo del blog en donde pondremos el menú coincide con ese color, posiblemente los subtítulos no se verán. En este caso debemos cambiar dicho color.

4.- Localizamos la etiqueta </body> y, antes de la misma, pegamos el siguiente código:

<script type='text/javascript'>
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');

$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
$('#relatedPosts').toggle(
function(){
$('#rp_list').animate({'bottom':'10px'},500);
},
function(){
$('#rp_list').animate({'bottom':'-50px'},500);
}
);
$('#rp_list a').tipsy({gravity: 's'});
});
</script>

5.- Guardamos plantilla.

6.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript (debajo de la cabecera del blog). En este gadget añadido pegamos el siguiente código:

<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="http://t2.gstatic.com/images?q=tbn:04DuiA3qZ5hWeM:" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Acerca de</span>
<span class="sdt_descr">Webmaster</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Perfil</a>
<a href="#">Contacto</a>
</div>
</li>
<li>
<a href="#">
<img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTUx73qNLW4NkNqtAbNHbi7o_aFU4ie5dsrUxpUyuUwLPzPW8edaQ" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">En Blogger</span>
<span class="sdt_descr">Blogs</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Herramientas</a>
<a href="#">Castorluxerías</a>
<a href="#">Poesía</a>
<a href="#">Castorluxando</a>
</div>
</li>
<li>
<a href="#">
<img src="http://t2.gstatic.com/images?q=tbn:ANd9GcRS_OfFGuJxy5B7n-23AAH45kfMzvAF9uO83TerlYs9Zdlo2i8YNDvebhz4" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Herramientas</span>
<span class="sdt_descr">para webmasters</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Generador de botones</a>
<a href="#">Generador de Popups</a>
<a href="#">Generador de Mailto</a>
<a href="#">Tutoriales</a>
</div>
</li>
<li>
<a href="#">
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSPbN1_-2LGMAJ0Fw9Y9aJ92Xq2cPPbDf43i7Sc9vpv44-PtoADlhXIOf21pg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">HTML</span>
<span class="sdt_descr">Lenguaje de marcado</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Elementos</a>
<a href="#">Atributos</a>
<a href="#">Códigos básicos</a>
</div>
</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOw_0yiueHHsRxZ0FfhXdf6uIBLLD4e22CPlhzWfJdk0HAqW3SuyhhyrkiScJw1RMSg-44P_beNjJah1khXCydcTIg4LdM6tN8x_yhWcieDJPtMqXvluoiL495QeQCsHgw3iU5bHWPvQw/s1600/css_1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">CSS</span>
<span class="sdt_descr">Hojas de estilo en cascada</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Externa</a>
<a href="#">Interna</a>
<a href="#">En línea</a>
</div>
</li>
<li>
<a href="#">
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcQpdVytNQH_UzRLW7W-DthbKuVY4v49MO39OdhWVa5mAL4GO8qIRs9n5c60" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Visitantes</span>
<span class="sdt_descr">Libro de visitas</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Comentarios</a>
</div>
</li>
</ul>

  • En todos los <a href="#"> reemplazamos # por nuestros enlaces.


  • Tolas las URLs resaltadas en rojo corresponden a las imágenes del ejemplo; las reemplazamos por las URLs de nuestras imágenes. Un click sobre cada una de las imágenes nos llevará a las página enlazada.


  • Las imágenes deben ser de 170px por 170px, o con dimensiones lo más próximas a éstas, para que no se distorsionen de manera notoria.


  • Los títulos (ejemplo: ACERCA DE), y los subtítulos (ejemplo: WEBMASTER), del menú principal, y los títulos de los enlaces de los submenús que van en el recuadro (ejemplo: PERFIL y CONTACTO), los cambiamos por nuestros títulos.

Índice: Menús
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable
14 comentarios
Etiquetas: , , , , , , ,

10.1.11

Menú horizontal desplegable con CSS y Jquery


Menú horizontal desplegable con CSS y Jquery
En este menú horizontal cada elemento contiene un submenú vertical que se despliega, con un efecto relieve, proporcionado por la imagen gradiente utilizada como fondo.


Veamos cómo ponerlo en nuestro blog:

Página principal ► Diseño ► Plantilla ► Editar HTML

1.- Para añadir la funcionalidad del menú incluimos la librería jQuery, para lo cual pegamos inmediatamente antes de la etiqueta </head>, el siguiente código:

<script charset='utf-8' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

2.- También necesitaremos añadir el plugin backgroundPosition para jQuery, lo cual lograremos pegando, después del anterior código, éste:

<script type="text/javascript" src="jquery.backgroundPosition.js"></script>

3.- Para usar la función slideDown/slideUp y el evento hover y así mostrar el submenú correspondiente cuando pasemos el cursor por uno de los elementos del menú principal pegamos, después del anterior código, el siguiente:

<script type="text/javascript">
$(function(){
$('#nav>li').hover(
function(){
$('.submenu',this).stop(true,true).slideDown('fast');
},
function(){
$('.submenu',this).slideUp('fast');
}
);

$('.submenu li a').css( {backgroundPosition: "0px 0px"} ).hover(
function(){
$(this).stop().animate({backgroundPosition: "(0px -99px)"}, 250);
},
function(){
$(this).stop().animate({backgroundPosition: "(0px 0px)"}, 250);
}
);
});
</script>

4.- Con el siguiente código CSS lograremos mejorar el aspecto visual del menú. Funcionalmente podemos destacar varios aspectos:

  • Los elementos de la lista principal (#nav) se encuentran flotados a la izquierda, para formar el menú horizontal, y tienen position: relative para que sirva de referencia a cada submenú.
  • A la lista del submenú le asignamos position: absolute, para que cuando se despliegue esté situada bajo su menú correspondiente.
  • Este submenú lo ocultamos por defecto con display: none para después mostrarlo con javascript cuando pasemos el cursor por encima de su menú principal.
  • A cada enlace del elemento del submenú añadiremos la imagen del gradiente como background.
Este es el codigo CSS que debemos pegar antes de la etiqueta ]]></b:skin>:

a{
display: block;
text-decoration: none;
color: #004a80;
padding: 5px;
}

ul{
width: 500px;
height: 28px;
}

ul,li{
list-style: none;
margin:0;
padding:0;
}

#nav{
font-family: 'Arial', sans-serif;
background: url('http://i56.tinypic.com/2vi05cj_th.jpg') repeat-x 0 0;
}

#nav li{
float:left;
position: relative;
width: 125px;
font-size: 14px;
font-variant: small-caps;
border-top:1px solid #004a80;
border-bottom:1px solid #004A80;
}

.submenu{
display: none;
position: absolute;
left: -1px;
border:none;
height: auto;
background: none;
}

#nav .submenu li{
float: none;
position: static;
margin: 0;
font-size: 11px;
font-variant: normal;
border: 1px solid #004a80;
border-top: none;
width: 124px;
}

#nav .submenu li a{
color: #FFFFFF;
background: url('http://oi54.tinypic.com/2djb6c.jpg') repeat-x 0 0;
width: 114px;
height: 16px;
}

En el anterior código resaltamos:

  • En azul: El código color del fondo y los bordes del menú.

  • En rojo: Las dimensiones de la barra.

  • En amarillo: El estilo de los caracteres de los títulos.

  • En café: Los códigos de las imágenes que sirven de fondo a:
    • En #nav{, a la barra de navegación del menú.

    • En #nav .submenu li a{, a los submenús.

      Si las anteriores imágenes no son compatibles con el diseño de nuestro blog, en Gradcolor.com podemos generar la imagen adecuada. También podemos poner como fondo simplemente un color, en cuyo caso reemplazamos el código de la imagen por el código del color que elijamos (#XXXXXX). Ésta es una buena herramienta para conseguir códigos hexadecimalesde colores: Códigos hexadecimales de colores.

  • En verde: Las dimensiones de los encabezados de los submenús.

  • En negro: El ancho del fondo de los submenús.

  • En morado: El código del color de los caracteres de los títulos de los submenús y las dimensiones de los submenús.

5.- El html empleado es una simple lista con otra lista anidada para cada submenú.

El siguiente es el código correspondiente que pegaremos en Diseño ► Añadir un gadget del tipo HTML/Javacsript:

<ul id="nav">
<li><a href="#"><big><b>Menu 1</b></big></a>
<ul class="submenu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
</ul>
</li>
<li><a href="#"><big><b>Menu 2</b></big></a>
<ul class="submenu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
</ul>
</li>
<li><a href="#"><big><b>Menu 3</b></big></a>
<ul class="submenu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
</ul>
</li>
<li><a href="#"><big><b>Menu 4</b></big></a>
<ul class="submenu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
</ul>
</li>

</ul>

Este gadget lo ponemos debajo de la cabecera del blog.

Índice: Menús
Menú de navegación lateral con efecto slide
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable
8 comentarios
Etiquetas: , , , , ,

6.1.11

Menú horizontal Estilo Apple Fancy Efecto Slide



Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery

Vamos a crear un menú horizontal con efecto card-shuffle, el cual hace que cuando se ingresa a la página que lo contiene los iconos se deslizan hacia adentro; luego, cuando se pasa el cursor por cada uno de los elementos, los íconos se deslizan desde la parte superior hacia afuera. Podemos verlo en funcionamiento aquí:
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Vamos a ponerlo en nuestro blog:

Página principal ► Diseño ► Plantilla ► Editar HTML

1.- Debemos tener en nuestra plantilla la librería jQuery, para lograrlo localizamos la etiqueta </head> e inmediatamente antes pegamos el siguiente código:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

2.- Añadimos el Script que producirá el efecto card-shuffle, para lo cual pegamos, después del código anterior y antes de la etiqueta </head>, el siguiente código:

<script type="text/javascript">
$(function() {
var d=1000;
$('#menu span').each(function(){
$(this).stop().animate({
'top':'-17px'
},d+=250);
});

$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).addClass('hover');
$('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
},
function () {
var $this = $(this);
$('a',$this).removeClass('hover');
$('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
}
);
});
</script>

3.- Para darle estilo al menú pegamos, antes de la etiqueta ]]></b:skin>, el siguiente código CSS .

.navigation{
position:relative;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"Verdana",sans-serif;
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}
ul.menu li a{
text-decoration:none;
background:#7E7E7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Vz8OmIxIN1Lqnul5nWWrSoTnH1PHudyitOIR4PTcd-ok5TfQ5afbvqPXVI7homcC_zoXtiubO71rH9uu5jG_GyF4gr2Kvx0MsJtV40UELDLAuZWHJyKhvT0Ws8sduOkwsTAmDaBDrbg/) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-shadow: 0 1px 1px #fff;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:13px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
}
ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor:pointer;
}
ul.menu li span.perro{
background-image:url(http://images.gograph.com/Images-9921/Icons/scoobydoo.gif);
left:33px; /*128/2 - 32(mitad del icono) +1 de borde*/
}
ul.menu li span.loro{
background-image:url(http://images.gograph.com/Images-9921/Icons/parrot.gif);
left:163px; /* más 128 + 2px de borde*/
}
ul.menu li span.oso{
background-image:url(http://images.gograph.com/Images-9921/Icons/jap38.gif);
left:293px;
}
ul.menu li span.dromedario{
background-image:url(http://images.gograph.com/Images-9921/Icons/afr21.gif);
left:423px;
}
ul.menu li span.canguro{
background-image:url(http://images.gograph.com/Images-9921/Icons/oce61.gif);
left:553px;
}
ul.menu li span.conejo{
background-image:url(http://images.gograph.com/Images-9921/Icons/ebunny19.gif);
left:683px;
}
ul.menu li span.leon{
background-image:url(http://images.gograph.com/Images-9921/Icons/afr34.gif);
left:813px;
}

En el anterior código podemos identificar los colores aplicados al menú y cambiarlos según convenga al diseño de nuestro blog.

Debemos tener en cuenta:

  • Las palabras resaltadas en verde son las que "atenderán al llamado" que se hará al estilo y al efecto, desde el elemento HTML/JavaScript, que crearemos en el punto siguiente.

  • Las direcciones (URL) resaltadas en rojo corresponden a las de los íconos del menú. Las cambiaremos por la direcciones (URL) de los íconos que se adapten a los temas de nuestro menú.

4.- Guardamos los cambios y, por último, vamos a:

Diseño ► Añadir un gadget

Elegimos un elemento tipo HTML/JavaScript y pegamos el siguiente código:

<div class="navigation">
<ul class="menu" id="menu">
<li><span class="perro"></span><a href="URL" class="first">Perros</a></li>
<li><span class="loro"></span><a href="URL">Loros</a></li>
<li><span class="oso"></span><a href="URL">Osos</a></li>
<li><span class="dromedario"></span><a href="URL">Dromedarios</a></li>
<li><span class="canguro"></span><a href="URL">Canguros</a></li>
<li><span class="conejo"></span><a href="URL">Conejos</a></li>
<li><span class="leon"></span><a href="URL" class="last">Leones</a></li>
</ul></div>

  • Las palabras resaltadas en verde deben ser idénticas a las resaltadas en verde, del código anterior, para que "la llamada" hecha al estilo y al efecto sea "atendida".

  • Los resaltados en azul los reemplazamos por las direcciones (URL) de las páginas a las que nos llevarán los enlaces.

  • Las palabras resaltadas en amarillo las cambiamos por los títulos de los enlaces.
Este elemento lo ponemos debajo de la cabecera del blog.

 

PLantillas nuevas

En los blogs diseñados con plantillas nuevas (Diseñador de PLantillas) esta clase de menús pueden presentar problemas para su funcionamiento, ya que esas plantillas tienen estilos predefinidos. Si tenemos ese problema sigamos el siguiente procedimiento:

1.- Vamos a Edición de HTML y, sin expandir plantillas de artilugios, localizamos esta línea:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

...y eliminamos la parte resaltada. Si aparece en otras líneas también la eliminamos.

2.- Localizamos la siguiente sección:

/* Tabs
----------------------------------------------- */
.tabs-outer {
  overflow: hidden;
  position: relative;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
  overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
  position: absolute;
  width: 100%;

  border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
  bottom: 0;
}

.tabs-inner .widget li a {
  display: inline-block;

  margin: 0;
  padding: .6em 1.5em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-top: 1px solid $(tabs.border.color);
  border-bottom: 1px solid $(tabs.border.color);
  border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
  border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
  color: $(tabs.selected.text.color);
}

...que puede variar dependiendo de la plantilla, y eliminamos todo su contenido, excepto el encabezado:

/* Tabs
----------------------------------------------- */

3.- El contenido que eliminamos en la anterior sección lo reemplazamos por éste:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

5.- Vista previa y Guardar plantilla.

Índice: Menús
Menú de navegación lateral con efecto slide
Menú horizontal dinámico, con submenús
Menú horizontal desplegable con Ajax
Menú vertical con CSS y jquery, efecto acordeón
Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante
Menú horizontal desplegable con CSS y Jquery
Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery
Menú vertical desplegable
3 comentarios
Etiquetas: , , , , , , ,
Suscribirse a: Entradas ( Atom )