por MISSARG Vie Ene 23, 2009 12:16 pmMenu deslizante
tutorial creado por MISSARG
Es una barra de menú que se desliza abriendose automáticamente desde el
borde izquierdo de la pantalla al mover el ratón sobre ella. Moviendo
el ratón otra vez hará que la barra se cierre
El menú utiliza
una página externa como su contenido para mostrar. Esto le permite
configurar el menú, simplemente editando el archivo externo, a través
de HTML.pienso que esta funcion puede servir para hacer muchas otras
cosas mas, lo mismo que le menu se puede hacer de distintas maneras
siempre y cuando coincida con la imagen
primero debemos crear una pagina html a la que llamaremos menu y colocamos el siguiente codigo, editandolo con los enlaces y titulo que quieran
Adonde dice ejemplo colocar el titulo del link.
si quieren poner mas link deben poner mas de estos:
siempre antes de
ahora debemos colocar en el css
como veran en el codigo necesitamos una imagen
(images/v6.gif)
para que el menu tome forma, yo dejare esta imagen que pueden usar para
probar y de ahi ya pueden hacer una imagen personalizada del menu
https://i.servimg.com/u/f71/12/51/04/14/v610.gif
acuerdense de poner adonde corresponde la imagen en el css
luego colocar el siguiente codigo adonde quieren que vaya el menu, se entiende en html.
ATENCION LA PARTE DEL CODIGO :"ACA LA URL DE LA PAGINA HTML QUE CREARON LLAMADA MENU"
las medidas que se pueden modificar:
height='205px' es el ancho modificable a gusto
var slidemenu_width='205px' es el ancho interno(modificable
var slidemenu_top='190px' es el alto (nodificable)
tutorial creado por MISSARG
Es una barra de menú que se desliza abriendose automáticamente desde el
borde izquierdo de la pantalla al mover el ratón sobre ella. Moviendo
el ratón otra vez hará que la barra se cierre
El menú utiliza
una página externa como su contenido para mostrar. Esto le permite
configurar el menú, simplemente editando el archivo externo, a través
de HTML.pienso que esta funcion puede servir para hacer muchas otras
cosas mas, lo mismo que le menu se puede hacer de distintas maneras
siempre y cuando coincida con la imagen
primero debemos crear una pagina html a la que llamaremos menu y colocamos el siguiente codigo, editandolo con los enlaces y titulo que quieran
- Código:
<HEAD>
<link rel="stylesheet" href="/13-ltr.css" type="text/css" />
</HEAD>
<BODY>
<br>
<div class="outer">
<div id="menu">
<ul>
<li><a href="aca la url" target = "_parent">ejemplo</a></li>
<li><a href="aca la url"target = "_parent">ejemplo</a></li>
<li><a href="aca la url"target = "_parent">ejemplo</a></li>
<li><a href="aca la url" target = "_parent">ejemplo</a></li>
<li><a href="aca la url" target = "_parent">ejemplo</a></li>
</ul>
</div>
</div>
</BODY>
</HTML>
Adonde dice ejemplo colocar el titulo del link.
si quieren poner mas link deben poner mas de estos:
- Código:
<li><a href="aca la url" target = "_parent">ejemplo</a></li>
siempre antes de
- Código:
</ul>
ahora debemos colocar en el css
- Código:
/* V2 */
.outer{
list-style:none;
margin:0px;
padding:0px;
}
#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-width: 1px;
}
#menu ul{
list-style:none;
margin:0px;
padding:0px;
}
#menu li a {
height: 32px;
voice-family: ;
voice-family: inherit;
height: 24px;
text-decoration: none;
font-weight:normal;
}
#menu li a:link, #menu li a:visited {
color: #FFFFFF;
display: block;
background: url([color=red]images/v6.gif[/color]);
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
#menu li a:hover {
color: #666666;
background: url([color=red]images/v6.gif[/color]) 0 -32px;
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
#menu li a:active {
color: #666666;
background: url([color=red]images/v6.gif[/color]) 0 -64px;
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
como veran en el codigo necesitamos una imagen
(images/v6.gif)
para que el menu tome forma, yo dejare esta imagen que pueden usar para
probar y de ahi ya pueden hacer una imagen personalizada del menu
https://i.servimg.com/u/f71/12/51/04/14/v610.gif
acuerdense de poner adonde corresponde la imagen en el css
luego colocar el siguiente codigo adonde quieren que vaya el menu, se entiende en html.
- Código:
<style>
<!--
#slidemenubar, #slidemenubar2{
position:absolute;
border:1.5px solid black;
line-height:20px;
}
-->
</style>
<script language="Javascript1.2">
var slidemenu_height='205px' //specify height of menu (in pixels throughout)
var slidemenu_width='205px' //specify width of menu
var slidemenu_reveal='12px' //specify amount that menu should protrude initially
var slidemenu_top='190px' //specify vertical offset of menu on page
var slidemenu_url="ACA LA URL DE LA PAGINA HTML QUE CREARON LLAMADA MENU" //specify path to menu file
var ns4=document.layers?1:0
var ie4=document.all
var ns6=document.getElementById&&!document.all?1:0
if (ie4||ns6)
document.write('<iframe
id="slidemenubar2"
style="left:'+((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)+'px;
top:'+slidemenu_top+'; width:'+slidemenu_width+';
height:'+slidemenu_height+'"
src="'+slidemenu_url+'"></iframe>')
else if (ns4){
document.write('<style>\n#slidemenubar{\nwidth:'+slidemenu_width+';}\n<\/style>\n')
document.write('<layer
id="slidemenubar" left=0 top='+slidemenu_top+'
width='+slidemenu_width+' height='+slidemenu_height+'
onMouseover="pull()" onMouseout="draw()" src="'+slidemenu_url+'"
visibility=hide></layer>')
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4){
document.slidemenubar.left=((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)
document.slidemenubar.visibility="show"
setTimeout("window.onresize=regenerate",400)
}
}
window.onload=regenerate2
rightboundary=0
leftboundary=(parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1
if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
}
else if (ns4){
document.write('</layer>')
themenu=document.layers.slidemenubar
}
function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",10)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",10)
}
function pullengine(){
if ((ie4||ns6)&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+10+"px"
else if(ns4&&themenu.left<rightboundary)
themenu.left+=10
else if (window.pullit){
themenu.left=0
clearInterval(pullit)
}
}
function drawengine(){
if ((ie4||ns6)&&parseInt(themenu.left)>leftboundary)
themenu.left=parseInt(themenu.left)-10+"px"
else if(ns4&&themenu.left>leftboundary)
themenu.left-=10
else if (window.drawit){
themenu.left=leftboundary
clearInterval(drawit)
}
}
</script>
<body onMouseover="if ((document.all||document.getElementById)&&window.parent.pull) window.parent.pull()"
onMouseout="if ((document.all||document.getElementById)&&window.parent.pull) window.parent.draw()">
ATENCION LA PARTE DEL CODIGO :"ACA LA URL DE LA PAGINA HTML QUE CREARON LLAMADA MENU"
las medidas que se pueden modificar:
height='205px' es el ancho modificable a gusto
var slidemenu_width='205px' es el ancho interno(modificable
var slidemenu_top='190px' es el alto (nodificable)
The Exiles
