Ver Ejemplo:
Este menú funciona con scriptaculous.
Si no lo tienen poner este código antes de </head>
<script type='text/javascript' src="http://www.google.com/jsapi"></script>Si ya lo tienen no es necesario.
<script>
google.load("prototype", "1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
Luego poner estos códigos también antes de </head>
<!--***********menuBarVku*******-->
<script type="text/javascript">
var isExtended = 0;
function slidemenuBarVku(){
new Effect.toggle('menuBarVkuContents', 'blind', {scaleX: 'true', scaleY: 'true;', scaleContent: false});
if(isExtended==0){
$('menuBarVkuTab').childNodes[0].src = $('menuBarVkuTab').childNodes[0].src.replace(/(\.[^.]+)$/, '-active$1');
new Effect.Fade('menuBarVkuContents',
{ duration:1.0, from:0.0, to:1.0 });
isExtended++;
}
else{
$('menuBarVkuTab').childNodes[0].src = $('menuBarVkuTab').childNodes[0].src.replace(/-active(\.[^.]+)$/, '$1');
new Effect.Fade('menuBarVkuContents',
{ duration:1.0, from:1.0, to:0.0 });
isExtended=0;
}
}
function init(){
Event.observe('menuBarVkuTab', 'click', slidemenuBarVku, true);
}
Event.observe(window, 'load', init, true);
</script>
<style>
#menuBarVku a{
outline: none;
}
#menuBarVku a:active{
outline: none;
}
#menuBarVku{
text-align:left;
}
#menuBarVku h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px;
font-weight:bold !important;
}
#menuBarVku h2 span{
font-size:125%;
font-weight:normal !important;
}
#menuBarVku ul{
margin:0;
padding:0;
}
#menuBarVku li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:147px;
color:#FFFFFF;
}
#menuBarVku li a{
width:100%;
}
#menuBarVku li a:link,
#menuBarVku li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0;
padding:0;
width:100%;
}
#menuBarVku li a:hover{
color:#FFFFFF;
text-decoration:none;
background-color:#000000;
}
#menuBarVku{
position: fixed;
width: auto;
height: auto;
top: 170px;
right:-5px;
background-image:url(http://galeon.com/vku/menuside/images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}
#menuBarVkuTab{
float:left;
height:137px;
width:28px;
}
#menuBarVkuTab img{
border:0px solid #FFFFFF;
}
#menuBarVkuContents{
float:left;
overflow:hidden !important;
width:175px;
height:170px;
}
#menuBarVkuContentsInner{
width:200px;
}
</style>
<!--***********fin menuBarVku*******-->
<script type="text/javascript">
var isExtended = 0;
function slidemenuBarVku(){
new Effect.toggle('menuBarVkuContents', 'blind', {scaleX: 'true', scaleY: 'true;', scaleContent: false});
if(isExtended==0){
$('menuBarVkuTab').childNodes[0].src = $('menuBarVkuTab').childNodes[0].src.replace(/(\.[^.]+)$/, '-active$1');
new Effect.Fade('menuBarVkuContents',
{ duration:1.0, from:0.0, to:1.0 });
isExtended++;
}
else{
$('menuBarVkuTab').childNodes[0].src = $('menuBarVkuTab').childNodes[0].src.replace(/-active(\.[^.]+)$/, '$1');
new Effect.Fade('menuBarVkuContents',
{ duration:1.0, from:1.0, to:0.0 });
isExtended=0;
}
}
function init(){
Event.observe('menuBarVkuTab', 'click', slidemenuBarVku, true);
}
Event.observe(window, 'load', init, true);
</script>
<style>
#menuBarVku a{
outline: none;
}
#menuBarVku a:active{
outline: none;
}
#menuBarVku{
text-align:left;
}
#menuBarVku h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px;
font-weight:bold !important;
}
#menuBarVku h2 span{
font-size:125%;
font-weight:normal !important;
}
#menuBarVku ul{
margin:0;
padding:0;
}
#menuBarVku li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:147px;
color:#FFFFFF;
}
#menuBarVku li a{
width:100%;
}
#menuBarVku li a:link,
#menuBarVku li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0;
padding:0;
width:100%;
}
#menuBarVku li a:hover{
color:#FFFFFF;
text-decoration:none;
background-color:#000000;
}
#menuBarVku{
position: fixed;
width: auto;
height: auto;
top: 170px;
right:-5px;
background-image:url(http://galeon.com/vku/menuside/images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}
#menuBarVkuTab{
float:left;
height:137px;
width:28px;
}
#menuBarVkuTab img{
border:0px solid #FFFFFF;
}
#menuBarVkuContents{
float:left;
overflow:hidden !important;
width:175px;
height:170px;
}
#menuBarVkuContentsInner{
width:200px;
}
</style>
<!--***********fin menuBarVku*******-->
Si quieren pueden modificar a su gusto el estilo, su color, texto, medidas, posición, etc...
Luego colocar el siguiente código antes de </body>
<div id="menuBarVku">Acá si cambiar los link por lo que ustedes prefieran.
<a href="#" id="menuBarVkuTab"><img src="http://galeon.com/vku/menuside/images/slide-but.gif" alt="menuBar" title="menuBar" /></a>
<div id="menuBarVkuContents" style="display:none;">
<div id="menuBarVkuContentsInner">
<h2>Menu<span>bar</span></h2> <!--titulo-->
<ul>
<li><a href='http://loseasi.blogspot.com/' title='Inicio'>Inicio</a></li>
<li><a href='http://loseasi.blogspot.com/feeds/posts/default' title='Suscribirse a Entradas RSS'>Entradas RSS</a></li>
<li><a href='http://loseasi.blogspot.com/feeds/comments/default' title='Suscribirse a Comentarios RSS'>Comentarios RSS</a></li>
<li><a href='http://img40.xooimage.com/files/8/7/b/contacto-100146a.html' title='Contáctame'>Contáctame</a></li>
</ul>
</div>
</div>
</div>
Pueden agregarle mas link pero ojo con el tamaño, ahí también tienen que modificar el CSS.
Si quieren pueden modificar y subir sus propias imágenes a su servidor, tienen que estar en una misma carpeta y no cambiarle el nombre.
Descargar imágenes.
Quedó fenomenal Vku :19)
lo puse en la panadería :4)
Saludos
Meri
Gracias Meri :4) :5)
Meri descargate nuevamente las imagenes, ya que vi en tu blog al tener fondo negro que quedaban unas puntas en blanco que quedan feas.
Ya le quite esas puntas y una linea blanca que salia al abrir.
Disculpa que las tengas que subir de nuevo :10)
Gracias Vku, ya me las bajé y las puse :19)
Ahora tengo una duda, son tres imagenes, yo solo veo donde poner 2 de ellas ¿la otra?.
Pero es que veo que va bien, es decir que la que subi fue la que tiene la flecha hacia la izquierda, pero cuando el menú se despliega sale la flechita hacia la derecha para cuando haya que cerrarlo. Eso es lo que no comprendo, si esa imagen no la he puesto por que no veo donde ponerla ¿como es que sale?
Saludos
Meri
Meri: las 3 imágenes tienen que estar en 1 misma carpeta.
Las imagenes se llaman con el código javascript.
El cuerpo es la llamada background.gif.
Despues a las otras 2 imágenes es importante que no se le cambie el nombre.
slide-but.gif y slide-but-active.gif
Lo que hace el código es decirle que cuando se abra cambie o remplace por la otra imagen del mismo nombre (slide-but) pero con el agregado - active.
fijate en el código esta parte:
$('menuBarVkuTab').childNodes[0].src.replace(/-active(\.
Yo de javascript no se casi nada.
Es parecido a las imagenes que las podes llamar para mostrar arriba, abajo o en determinada posicion de la misma.
PERO MERI QUE ESTEN LAS 2 ULTIMAS EN UNA MISMA CARPETA Y NO LE CAMBIES EL NOMBRE.
Pone las ultimas 3 que son sin las marcas blancas.
Y perdon que no soy un buen profesor. :5)
No te acabo de entender, pero si tu no sabes mucho de javascript .. espera te yo :26)
¿Donde tiene que estar esa carpeta con las imagenes?
Yo subi dos de ellas al servidor
una la de la ralla la puse en background-image:
Y la otra en menuBarVkuTab
Queda una tercera
Que se llamen vale ¿pero desde mi PC se llaman?
No lo entiendo.
Pero no te compliques por que el menú ha quedado bien y me...¡gusta!
Perdona que no te contestara antes pero no me llego el aviso
Saludos
slide-but.gif y slide-but-active.gif tienen que estar juntas en el servidor
por lo que vi en tu blog quedo bien
¡Ah! pues incógnita resuelta. Las tres imágenes están subidas al mismo servidor. Ya entiendo todo
Gracias Vku :23)
Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.
Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.
Nota: solo los miembros de este blog pueden publicar comentarios.