Mejora Tu Blogger: JQuery

Mostrando entradas con la etiqueta JQuery. Mostrar todas las entradas

Cómo poner anuncios rotativos (Con JQuery)

19:38 Anuncios, Banners, Ciudad Blogger, JQuery, Sidebar No comments

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Hace ya bastante tiempo vimos cómo poner un rotador de banners en el cual es posible agregar sólo imágenes que rotarán una seguida de la otra en forma secuencial.

Con jQuery y el script InnerFade podemos crear anuncios no sólo con imágenes sino también con textos y además podemos elegir si aparecen de forma secuencial o aleatoria. En cualquiera de los casos es posible mostrarlos con un efecto de desvanecimiento entre cada uno de ellos.

En el caso de los anuncios de texto quedan perfecto para resaltar entradas que quizá están un poco olvidadas o que simplemente queremos destacar.

Y en el de las imágenes podemos usarlo también para mostrar entradas destacadas, para publicitar alguna otra cosa más, o simplemente para mostrar las imágenes que te gustan.

En ambos casos la instalción es muy sencilla. Primero hay que descargar este archivo, descomprimirlo y subir el script a un alojamiento.

Luego entra en Diseño | Edición de HTML y antes de </head> pega lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
< script src='URL del archivo jquery.innerfade.js' type='text/javascript'/>
< script type='text/javascript'>
$(document).ready(
function(){
$('#news').innerfade({
animationtype: 'slide',
speed: 850,
timeout: 3000,
type: 'random',
});

$('ul#portfolio').innerfade({
animationtype: 'fade',
speed: 1000,
timeout: 4000,
type: 'sequence',
});
});
< /script>

Agrega donde se indica en color verde la URL del archivo que subiste previamente.
Ahora antes de ]]></b:skin> pega esto:

#news-div {
height:50px; /* Altura del contenedor de los anuncios de texto */
background:#FFFEB8; /* Color de fondo de los anuncios de texto */
border:1px solid #ccc;
}
#news li {list-style-type:none;}
#portfolio li {list-style-type:none;}

Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega uno de estos códigos:

Para los anuncios de texto

<div id='news-div'>
< ul id='news'>
< li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
< li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
< li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
< li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
< li><a href='URL del enlace'>Aquí va el texto del anuncio</a></li>
< /ul>
< /div>

Agrega donde se indica la URL del enlace que tendrá el anuncio así como el texto correspondiente.

Para los anuncios de imágenes

<ul id='portfolio'>
< li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
< li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
< li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
< li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
< li><a href='URL del enlace'><img src='URL de la imagen'/></a></li>
< /ul>

De igual modo agrega las URL de los enlaces así como las URL de las imágenes.

Dentro del primer código hay unas opciones que podemos personalizar y son las que están en color azul.
animationtype Es el efecto, con slide aparecerá como diapositiva y con fade con desvanecimiento.
speed es la velocidad en milisegundos.
timeout es el tiempo en milisegundos que se muestra cada anuncio.
type define en qué orden se muestran, random es aleatorio y sequence es consecutivo.

Como instalar una caja de notas muy elegante con efecto JQuery

21:51 Anuncios, Diseño, El Balcón de Jaime, Favoritos, JQuery No comments

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Caja de notas con efecto deslizante en las entradas (JQuery)

En esta entrada te enseñaré una forma de incluir notas en tus entradas. Se trata de añadir un atractivo botoncito que abre un recuadro y despliega el anuncio, aviso o la nota con efecto deslizante.

Cartel o nota de aviso con efecto deslizante en las entradas (JQuery)

Ver la caja de notas en funcionamiento

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y añade estos bloques de CSS encima:

#balconcart {
background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFBQ-QW9wbes0Udid8jsk2LYiKC6zBf67a_aHCJkRyI7f971xNVsU-VPLglwDmUlIChT5guI4AERwqjzG6hAWWB4PnVTc7WbYyt6RJu7Rq7mIUFI08UjEWKZvrNQng-QPyIDc4ahnQt7M/s1600-r/jbalcon.png) repeat-y scroll 0 0;
color:#000000;
display:none;
height:112px;
text-align:center;
width:211px;
}

#blboton {
background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiebLF4iiYLdJyvYz7OYeN38BWRai4C2i2V4kq92rVoVo5kPRc5mtn5cWVhQeRdTctqbGh6qi4ZW4oD6Psqt4HKOP4UNxpVOlcONNoPSu45o7ynWPqodWHwbmoGpATIqINI1C5Um5VrnQk/s1600-r/blcbut.png) no-repeat scroll 0 0;
border:0 none;
padding:3px;
}

Ahora busca la etiqueta </head> e inserta encima lo siguiente:

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script type='text/javascript'>$(function(){$("#blboton").click(function(){$('#balconcart').toggle(1000);});});</script>

El código resaltado en verde es el script de JQuery-1.3.2.min.js. Si ya lo tienes en tu plantilla (debido a un truco anterior) no hará falta que lo insertes de nuevo.

Guarda la plantilla:

Pulsa el botón Guardar Plantilla para terminar

Pulsa el botón Guardar Plantilla para terminar

Seguidamente, abre una entrada cualquiera y pega esta línea de código que insertará la Caja de notas:

<div id="balconcart">CONTENIDO DE LA CAJA</div>
<button id="blboton">Abrir / Cerrar</button>

Reemplaza CONTENIDO DE LA CAJA por la frase, el aviso, el comentario o la recomendación que contendrá la caja, así como Abrir / Cerrar por el texto que aparecerá en el botón (si lo prefieres, puedes dejar esto último como esta).

Debes saber que con este código podrás incluir una sola nota por entrada. Para utilizar más cajas desplegables, pega esta línea de código encima de </head> y añade un 2 al lado de balconcart y otro despues de blboton ...

<script type='text/javascript'>$(function(){$("#blboton2").click(function(){$('#balconcart2').toggle(1000);});});</script>

A continuación pega otros bloques de CSS encima de ]]></b:skin> y edita lo que ves en verde:

#balconcart2 {
background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFBQ-QW9wbes0Udid8jsk2LYiKC6zBf67a_aHCJkRyI7f971xNVsU-VPLglwDmUlIChT5guI4AERwqjzG6hAWWB4PnVTc7WbYyt6RJu7Rq7mIUFI08UjEWKZvrNQng-QPyIDc4ahnQt7M/s1600-r/jbalcon.png) repeat-y scroll 0 0;
color:#000000;
display:none;
height:112px;
text-align:center;
width:211px;
}

#blboton2 {
background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiebLF4iiYLdJyvYz7OYeN38BWRai4C2i2V4kq92rVoVo5kPRc5mtn5cWVhQeRdTctqbGh6qi4ZW4oD6Psqt4HKOP4UNxpVOlcONNoPSu45o7ynWPqodWHwbmoGpATIqINI1C5Um5VrnQk/s1600-r/blcbut.png) no-repeat scroll 0 0;
border:0 none;
padding:3px;
}

Guarda la plantilla.

El nuevo código a utilizar en la entrada sería:

<div id="balconcart2">CONTENIDO DE LA CAJA</div>
<button id="blboton2">Abrir / Cerrar</button>

Repite este procedimiento con el número de notas que deseas añadir por entrada, utilizando una cifra (que en este caso era 2) por otra distinta.

Nota:

Para no estar copiando los códigos que insertan la caja de notas con efecto deslizante, haz uso de la plantilla de entrada que ofrece blogger.

El Slider J Query más sencillo de instalar

9:17 JQuery, Oloblogger, Slider No comments

Artículo por Olo Man escrito para OloBlogger, visita su blog

¿Tenéis jQuery en vuestro blog y espacio para insertar 10 líneas de código? Sí la respuesta es afirmativa y además queréis tener un carrusel de imágenes automático, este es el código más simple que he visto hasta la fecha y seguro que no hay otro que lo sea mucho más. Si acaso con algún que otro carácter menos, pero pocos, pocos menos.

Ese código que después veremos y una sucesión de imágenes simples metidas dentro de una caja, con un contenedor general común, nos daría este resultado:

1. Instalación JavaScript necesario

Por empezar desde cero, si no tenemos jQueryprimero añadimos esta línea justo después de }]]></b:skin> para cargar esta conocida librería:

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

Una vez seguros de que tenemos la librería en nuestra plantilla, a continuación de esa misma línea añadimos lo que hace que la serie de imágenes funcionen como slider:

<script type="text/javascript">//<![CDATA[
$(function(){
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(0)
         .next('div').fadeIn(1000)
         .end().appendTo('#slider');}, 4000);
});
//]]></script>

Podemos guardar los cambios en la plantilla porque eso es todo. Es simple pero veréis que funciona y hace lo que tiene que hacer. Ahora ya sólo tenemos que poner las imágenes dónde queremos que aparezcan, de la manera que veremos a continuación.

2. Crear el slider

Con esto anterior en nuestra plantilla (aunque nada impide ponerlo directamente en un gadget, en una página o incluso en una entrada como veis aquí) ya podremos crear un visor como el que habéis visto arriba. Sólo tenemos que usar esta estructura HTML para añadir las imágenes:

<div id="slider">
    <div><img src="URL_IMAGEN1"/></div>
    <div><img src="URL_IMAGEN1"/></div>
    <div><img src="URL_IMAGEN1"/></div>
</div>

No sé cómo lo veis pero ya está todo lo necesario.

Para mí esto es bastante ligero y eficiente, mucho más que la mayoría de librerías que se usan quizás demasiado habitualmente.

Ajustes

Los tres últimos números del plugin permiten ajustar algunas cosillas. Todos van expresados en milisegundos (4000 = 4 segundos)

fadeOut(0): Tiempo en desaparecer la imagen saliente
fadeIn(1000): Tiempo en aparecer la imagen entrante
('#slider');},4000): Tiempo de permanencia de cada imagen

Cómo funciona

Y para los curiosos que quieren aprender cosas...

$('#slider div:gt(0)').hide();
Con gt(x) seleccionamos todos los div a partir del número x. En este caso 0 es el primero, así que lo que hacemos con esta línea es esconder (hide) todas las cajas excepto la primera, que será la imagen inicialmente visible.

setInterval(function(){ [lo que haremos] }, 4000);
Necesitamos reiterar una serie de cosas cada cierto tiempo y eso lo hacemos con setInterval, indicando el tiempo de retardo entre cada serie.

$('#slider div:first-child').fadeOut(0)
Dentro de cada uno de esos intervalos hacemos desaparecer (fadeOut) la primera caja (div:first-child) que haya en la relación de imágenes...

.next('div').fadeIn(1000)
... y hacemos que la siguiente caja (next) aparezca poco a poco (fadeIn).

.end().appendTo('#slider');
Por último tomamos la que hasta ese momento es la primera imagen y la situamos al final (appendTo) de la "lista".

end() resetea el contador de elementos que hicimos avanzar con next(). De esa manera, el primer hijo que antes hicimos desaparecer es el que enviamos al final de la pila y no la imagen que ahora tenemos visible. Para el siguiente ciclo la que hasta este momento era visible (que era la segunda) será la primera y por tanto la que haremos desaparecer.

Referencias sobre las funciones usadas:

Variantes y personalización

Como habéis visto no es necesario CSS para que el slider funcione, pero si lo usamos podremos cambiar su aspecto, permitir el uso de imágenes de diferente tamaño, incluir rótulos e incluso mejorar la transición. A continuación algunas ideas.

Cuestión de centímetros

No sabe hablar, pero se fija mucho

Limitar el tamaño del contenedor general y evitar el desbordamiento para que las imágenes más grandes no ocupen más espacio. Y ya que estamos le ponemos unas esquinas redondeadas, un borde y lo centramos. El position:relative nos vendrá bien para otra cosa que haremos después.

#slider {
position: relative;
overflow: hidden;
width: 500px;
height: 300px;
border:10px solid #333;
border-radius: 40px;
margin: 0 auto;
padding: 0;
}

Si situamos las cajas padre de las imágenes de manera absoluta con respecto al contenedor general (para eso pusimos antes el relative), estas se dispondrán solapadas una encima de otra. De esta manera al fadeOut le podremos dar un tiempo para que sea "visible" (hemos cambiado el 0 por un 1000) y la transición entre imágenes más suave. Es esa mezcla de imágenes que se produce en la segunda demo.

En las imágenes, el max-width nos sirve para que siempre ocupen todo el ancho y el min-height para que aunque sean deformadas, no se nos quede hueco por debajo cuando sean de menos de 300px de alto.

#slider > div {
position:absolute;
top:0;
left:0;
}
#slider img {
width:100%;
min-height:300px;
margin:0;
padding:0;
border:0;
}

Y ya si queremos añadir otros elementos sobre las imágenes (en este ejemplo un texto), sólo tendremos que etiquetarlos con un span o como párrafo (p) y en el CSS posicionarlos de manera absoluta, ubicándolos en el lugar exacto dónde queramos con top/bottom - left/right.

#slider p {
position: absolute;
bottom: 30px;
left: 0;
display: block;
width: 400px;
height: 24px;
margin:0;
padding: 5px 0;
color: #eee;
background: #990000;
font-size: 22px;
line-height:22px;
text-align:center;
}

El marcado en el HTML para esto último, incluyendo además un enlace sobre la imagen, sería tal que así:

<div id="slider">
<div><a href="URL_ENLACE1"><img src="URL_IMAGEN1" /></a><p>TEXTO1</p></div>
<div><a href="URL_ENLACE2"><img src="URL_IMAGEN2" /></a><p>TEXTO2</p></div>
<div><a href="URL_ENLACE3"><img src="URL_IMAGEN3" /></a><p>TEXTO3</p></div>
</div>

-Redactado por Olo Man para OloBlogger Link

Creativo Menú Vertical Drag and Drop con JQuery

22:59 DragandDrop, Favoritos, JQuery, Menús No comments

jGlideMenu es un menú vertical que se puede arrastrar y soltar para que el lector lo ubique donde quiera, pero además, se puede navegar a través de sus pestañas de una forma muy peculiar y con un efecto deslizante para darle ese toque sexy.
Una de las ventajas que tiene es que puede almacenar un gran número de enlaces, y que se puede quitar el efecto drag and drop (arrastrar y soltar) si se desea.

Para que entiendas mejor este menú hay que verlo en acción en este blog de pruebas, ahí puedes arrastrar el menú, navegar en sus pestañas, y cerrarlo.

Para poner en tu blog este menú vertical, primero descarga este archivo, descomprímelo y súbelo a un hosting.

Luego ingresa a la Edición HTML de tu plantilla y antes de </head> agrega los scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript' />
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript' />
<script src='URL del archivo' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#jGlide_001').jGlideMenu({
tileSource : '.jGlide_001_tiles' ,
demoMode : true
}).show();

$('#switch').click(function(){$(this).jGlideMenuToggle();});
});
//]]>
</script>

Coloca la URL del archivo que subiste previamente donde se indica, luego pega antes de
]]></b:skin> los estilos:

.jGM_box {
position: absolute; /* Cambiar absolute por fixed si se quiere flotante */
top: 150px; /* Distancia desde arriba */
left: 200px; /* Distancia desde la izquierda */
width: 227px;
height: 317px;
background: #fff; /* Color de fondo */
margin: 0;
padding: 0;
border: 1px solid #ccc; /* Borde */
overflow: hidden;
}
.jGM_header {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 227px;
background: #d1d1d1; /* Color de fondo de la barra de arriba */
color: #fff;
text-align: right;
vertical-align: middle;
line-height: 18px;
cursor: move;
}
.jGM_header a {
margin-right: 12px;
text-decoration: none;
color: #000 !important;
cursor: pointer;
}
.jGM_wrapper {
position: absolute;
top: 19px;
left: 0;
width: 2270px;
height: 288px;
margin: 0;
padding: 0;
border: 0;
}
.jGM_tile {
position: absolute;
top: 0;
left: 7px;
width: 213px;
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
display: block;
}
.jGM_cats {
width: 100%;
height: 64px;
overflow: hidden;
vertical-align: middle;
text-align: left;
}
.jGM_cats h4 {
font-family: Verdana,Arial,serif;
font-size: 1.8em;
margin: 0;
padding: 2px 0;
line-height: 1.8em;
color: #414141;
font-weight: normal;
}
.jGM_cats p {
font-family: Verdana,tahoma,arial;
font-size: 1em; /* Tamaño de la descripción */
margin: 0;
padding: 0;
line-height: 1.2em;
color: #858585; /* Color de la descripción */
font-weight: normal;
}
.jGM_pager {
height: 18px;
width: 213px;
line-height: 18px;
margin: 0;
border: 0;
padding: 0;
background: #f6f6f6; /* Color de fondo barras */
text-align: center;
vertical-align: middle;
}
.jGM_pager a {
text-decoration: none;
font-weight: bold;
text-decoration: none;
display: block;
}
.jGM_pager a:hover { background: #d1d1d1; }
.jGM_pager img { border: 0; margin: 6px 0; }
.jGM_content {
width: 213px;
height: 150px;
margin: 1px 0;
padding: 0;
border: 0;
overflow: hidden;
}
.jGM_content a {
font-family: Tahoma,arial;
text-decoration: none;
color: #333 !important;
height: 18px;
width: 100%;
display: block;
line-height: 18px;
padding: 0 0 0 10px;
background-color: #e6e7e9;
margin: 1px 0;
}
.jGM_content a:hover {
color: #fff !important;
background-color: #4D4E67; /* Color de la barra al pasar el cursor */
}
.jGM_more {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuPzb9Y6yZds00-Yen-ZQtGFbDbc-x1dy1REhfmGYPh74cFq32q6Mu5fAfcqD-j7pM_P6CMSFtijI0wnTBEx1GSKoKlKJ4LLUDhJyMWgBwW1j_suaQz85-Er-21Dhdsd5Ai1mg5EtlSi0/s10/arrow.gif);
background-repeat: no-repeat;
background-position: 203px 50%;
}
.jGM_back {
position: absolute;
top: 255px;
right: 0;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_back a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color del enlace "atrás" */
display: block;
}
.jGM_back a:hover {
color: #fff !important; /* Color del enlace "atrás" al pasar el cursor */
background: #4D4E67;
}
.jGM_reset {
position: absolute;
top: 255px;
right: 62px;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_reset a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color del enlace "inicio" */
display: block;
}
.jGM_reset a:hover {
color: #fff !important; /* Color del enlace "inicio" al pasar el cursor */
background: #4D4E67;
}

Ahora en un elemento HTML/Javascript pega la estructura del menú:

<div class="jGM_box" id="jGlide_001">


<ul id="tile_001" class="jGlide_001_tiles" title="Menú" alt="Descripción del primer nivel">
<li rel="tile_002">Enlace 1</li>
<li rel="tile_003">Enlace 2</li>
<li rel="tile_004">Enlace 3</li>
<li rel="tile_006">Enlace 4</li>
<li rel="tile_007">Enlace 5</li>
<li><a href="URL del enlace">Enlace 6</a></li>
<li><a href="URL del enlace">Enlace 7</a></li>
<li><a href="URL del enlace">Enlace 8</a></li>
<li><a href="URL del enlace">Enlace 9</a></li>
<li><a href="URL del enlace">Enlace 10</a></li>
<li><a href="URL del enlace">Enlace 11</a></li>
</ul>


<ul id="tile_002" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li rel="tile_005">Enlace 1.1</li>
<li><a href="URL del enlace">Enlace 1.2</a></li>
<li><a href="URL del enlace">Enlace 1.3</a></li>
<li><a href="URL del enlace">Enlace 1.4</a></li>
</ul>

<ul id="tile_003" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 2.1</a></li>
<li rel="tile_008">Enlace 2.2</li>
<li><a href="URL del enlace">Enlace 2.3</a></li>
</ul>

<ul id="tile_004" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 3.1</a></li>
<li><a href="URL del enlace">Enlace 3.2</a></li>
<li><a href="URL del enlace">Enlace 3.3</a></li>
</ul>

<ul id="tile_006" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 4.1</a></li>
<li><a href="URL del enlace">Enlace 4.2</a></li>
<li><a href="URL del enlace">Enlace 4.3</a></li>
</ul>

<ul id="tile_007" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 5.1</a></li>
<li><a href="URL del enlace">Enlace 5.2</a></li>
</ul>


<ul id="tile_005" class="jGlide_001_tiles" title="Menú" alt="Descripción del tercer nivel">
<li><a href="URL del enlace">Enlace 1.1.1</a></li>
<li><a href="URL del enlace">Enlace 1.1.2</a></li>
</ul>

<ul id="tile_008" class="jGlide_001_tiles" title="Menú" alt="Descripción del tercer nivel">
<li><a href="URL del enlace">Enlace 1.2.1</a></li>
<li><a href="URL del enlace">Enlace 1.2.2</a></li>
</ul>

</div>

Agrega las URLs de los enlaces y los nombres de las pestañas y listo.
Si quieres agregar más enlaces al primer nivel añade en esa área otra línea como esta:

<li><a href="URL del enlace">Enlace 12</a></li>

Si quisieras que el enlace tenga otro nivel entonces la línea será así:

<li rel="tile_0010">Enlace 5</li>

Luego en el área del segundo o tercer nivel agregarías un fragmento así:

<ul id="tile_0010" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 5.1</a></li>
<li><a href="URL del enlace">Enlace 5.2</a></li>
</ul>

Aquí hay que tener algo muy en cuenta, si te fijas el enlace lleva el atributo REL, que debe ser el mismo que el ID que ponemos en el segundo nivel, estos IDs nunca se debe repetir, siempre serán únicos.

Sí, suena complicado, pero una vez que entendemos el concepto ya no lo es tanto.

En el área de los estilos están las partes que podemos personalizar. Si quisieras que el menú esté estático, es decir, que esté en la sidebar y no se arrastre, entonces elimina del primer código el script que está en cursiva. Y de los estilos elimina esta parte:

position: absolute; /* Cambiar absolute por fixed si se quiere flotante */
top: 150px; /* Distancia desde arriba */
left: 200px; /* Distancia desde la izquierda */

Cuando sean muchos enlaces entonces aparecerán unas flechitas, pasando el cursor sobre ellas se mostrarán el resto de los enlaces ya sea hacia arriba o hacia abajo.

A lo largo de la estructura del menú verás que puedes cambiar el nombre Menú así como las descripciones.

Es un menú con jQuery así que ya saben que hay que tomar en cuenta la versión que sea sólo una, y la compatibilidad con Scriptaculous.

Vía | Sonicradish y Ciudad Blogger

Mejora Tu Blogger