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.
0 comments:
Post a Comment