Menus

"CODIGOS JAVASCRIPT"

MENUS

Menú oculto deslizable desde la izquierda

Menú que esta casi oculto a la izquierda de la pantalla hasta que se pasa el cursor por encima y se desliza suavemente hasta mostrarse completamente. Configurable los parámetros del mismo.

<style>
<!--

#slidemenubar, #slidemenubar2{
position:absolute;
left:-155px;
width:160px;
top:170px;
border:1.5px solid green;
background-color:lightyellow;
layer-background-color:lightyellow;
font:bold 12px Verdana;
line-height:20px;
}
-->
</style>

/*
Sliding Menu Bar Script- 
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

if (document.all)
document.write('<div id="slidemenubar2" style="left:-150" onMouseover="pull()" onMouseout="draw()">')
</script>
<layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">
<script language="JavaScript1.2">
var sitems=new Array()
var sitemlinks=new Array()

//extend or shorten this list
sitems[0]="WEBSERVICIOS.ES.VG"
sitems[1]="ELRINCON007"
sitems[2]="FOROTOTAL"
sitems[3]="CARTUNENSES"
sitems[4]="ENLAPARRA"
sitems[5]="CHULETING"
sitems[6]="TERRA"

//These are the links pertaining to the above text.
sitemlinks[0]="http://www.webservicios.es.vg/"
sitemlinks[1]="http://www.-elrinconoo7-.es.vg/"
sitemlinks[2]="http://www.forototal.com/"
sitemlinks[3]="http://www.cartuneses.es.vg/"
sitemlinks[4]="http://www.enlaparra.com/"
sitemlinks[5]="http://www.chuleting.com/"
sitemlinks[6]="http://www.terra.es/"

for (i=0;i<=sitems.length-1;i++)
document.write('<a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>')
</script>
</layer><script language="JavaScript1.2">
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}
window.onload=regenerate2
if (document.all){
document.write('</div>')
themenu=document.all.slidemenubar2.style
rightboundary=0
leftboundary=-150
}
else{
themenu=document.layers.slidemenubar
rightboundary=150
leftboundary=10
}
function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",50)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",50)
}
function pullengine(){
if (document.all&&themenu.pixelLeft<rightboundary)
themenu.pixelLeft+=5
else if(document.layers&&themenu.left<rightboundary)
themenu.left+=5
else if (window.pullit)
clearInterval(pullit)
}
function drawengine(){
if (document.all&&themenu.pixelLeft>leftboundary)
themenu.pixelLeft-=5
else if(document.layers&&themenu.left>leftboundary)
themenu.left-=5
else if (window.drawit)
clearInterval(drawit)
}
</script>

Menú oculto que aparece desde la izquierda

Menú que esta casi oculto a la izquierda de la pantalla hasta que se pasa el cursor por encima y aparece completamente. Muy colorido y configurable los parámetros del mismo.

/*
Static menu script II (By maXimus, maximus@nsimail.com, http://absolutegb.com/maximus/)
Modified slightly/ permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com

Traducido y adaptado al español por http://www.losrecursosgratis.com
*/

function makeStatic() {
if (document.all) {object1.style.pixelTop=document.body.scrollTop+20}
else {eval(document.object1.top=eval(window.pageYOffset+20));}
setTimeout("makeStatic()",0);}
</script>

<style>
<!--

.hl	{
		Background-Color : yellow;
		Cursor:hand;
	}
.n	{
		Cursor:hand;
	}
-->
</style>

function positionmenu(){
move(-132)
}

if (document.all) {document.write('<DIV ID="object1" style="visibility:hidden;cursor:hand; Position : Absolute ;Left : 0px ;Top : 20px ;Z-Index : 20" onmouseover="move(132)" onmouseout="move(-132)">')}
</script>

<table border="0" cellpadding="0" cellspacing="1" width="150" bgcolor="#000000">
<tr><td bgcolor="#0099FF"> <font size="4" face="Arial"><b>Menu</b></font></td><script language="JavaScript1.2">
document.write('<td align="center" rowspan="100" width="16" bgcolor="#FF6666"><span style="font-size:13px"><p align="center"><font face="Arial Black">M<br>E<br>N<BR>U</font></p></span></TD>')
</script>

</tr>

var text=new Array();
var thelink=new Array();

//configura aqui los enlaces - en los text los textos, en thelink su correspondiente link

text[0]="WEBSERVICIOS.ES.VG";
text[1]="ELRINCON007";
text[2]="FOROTOTAL";
text[3]="CARTUNENSES";
text[4]="ENLAPARRA";
text[5]="CHULETING";
text[6]="TERRA";

thelink[0]="http://www.webservicios.es.vg/";
thelink[1]="http://www.-elrinconoo7-.es.vg/";
thelink[2]="http://www.forototal.com/";
thelink[3]="http://www.cartuneses.es.vg/";
thelink[4]="http://www.enlaparra.com/";
thelink[5]="http://www.chuleting.com/";
thelink[6]="http://www.terra.es/";

//Aqui se configura el target, pero solo son validos '' (el mismo marco), 'new' (nueva ventana), or 'framename' (el mismo frame)
var linktarget='new'

///A PARTIR DE AQUI NO TOCAR NADA////////////////

function navigateie(which){
if (linktarget=='')
window.location=thelink[which]
else if (linktarget=='new')
window.open(thelink[which])
else{
temp_var=eval("window.parent."+linktarget)
temp_var.location=thelink[which]
}
}

for (i=0;i<=text.length-1;i++)
if (document.all) {document.write('<TR><TD height=20 bgcolor=white onclick="navigateie('+i+')" onmouseover="className=\'hl\'" onmouseout="className=\'n\'"><FONT SIZE=2 FACE=ARIAL> '+text[i]+'</FONT></TD></TR>')}
else {document.write('<TR><TD bgcolor="white"><ILAYER><LAYER HEIGHT="18" onmouseover="this.bgColor=\'yellow\'" onmouseout="this.bgColor=\'white\'" width=131><FONT SIZE=2 FACE=ARIAL> <A HREF="'+thelink[i]+'" target="'+linktarget+'" id="nounderline">'+text[i]+'</A></FONT></LAYER></ILAYER></TD></TR>')}

//-->
</script>
<tr>
<td bgcolor="#0099FF"><font size="1" face="Arial"> </font></td></TR>
</table><script language="JavaScript1.2">
if (document.all) {document.write('</DIV>')}
window.onload=positionmenu
</script>
</LAYER>

Menú barra horizontal oculta desplazable

Truco JavaScript que crea un menú en forma de barra horizontal, que permanece casi oculto, que al ser pulsado hace que deslice y se muestre el resto del menú.

<style>

#divMenu {font-family:arial,helvetica; font-size:12pt; font-weight:bold}
#divMenu a{text-decoration:none;}
#divMenu a:hover{color:red;}
</style>
<script language="JavaScript1.2">
/********************************************************************************
Submitted with modifications by Jack Routledge (http://fastway.to/compute) to DynamicDrive.com
Adaptado por ..::LosRecursosGratis.com::.. (http://www.losrecursosgratis.com)
Copyright (C) 1999 Thomas Brattli @ www.bratta.com
This script is made by and copyrighted to Thomas Brattli 
This may be used freely as long as this msg is intact!
This script has been featured on http://www.dynamicdrive.com
********************************************************************************
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0

//These are the variables you have to set:

//How much of the layer do you wan't to be visible when it's in the out state?
lshow=60

//How many pixels should it move every step? 
var move=10;

//At what speed (in milliseconds, lower value is more speed)
menuSpeed=40

//Do you want it to move with the page if the user scroll the page?
var moveOnScroll=true

/********************************************************************************
You should't have to change anything below this.
********************************************************************************/
//Defining variables
var tim;
var ltop;

//Object constructor
function makeMenu(obj,nest){
    nest=(!nest) ? '':'document.'+nest+'.'
    this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')						
	this.state=1
	this.go=0
	this.width=n?this.css.document.width:eval(obj+'.offsetWidth')
	this.left=b_getleft
    this.obj = obj + "Object"; 	eval(this.obj + "=this")	
}
//Get's the top position.
function b_getleft(){
	var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft);
	return gleft;
}
/********************************************************************************
Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)
********************************************************************************/
function moveMenu(){
	if(!oMenu.state){
		clearTimeout(tim)
		mIn()	
	}else{
		clearTimeout(tim)
		mOut()
	}
}
//Menu in
function mIn(){
	if(oMenu.left()>-oMenu.width+lshow){
		oMenu.go=1
		oMenu.css.left=oMenu.left()-move
		tim=setTimeout("mIn()",menuSpeed)
	}else{
		oMenu.go=0
		oMenu.state=1
	}	
}
//Menu out
function mOut(){
	if(oMenu.left()<0){
		oMenu.go=1
		oMenu.css.left=oMenu.left()+move
		tim=setTimeout("mOut()",menuSpeed)
	}else{
		oMenu.go=0
		oMenu.state=0
	}	
}
/********************************************************************************
Checking if the page is scrolled, if it is move the menu after
********************************************************************************/
function checkScrolled(){
	if(!oMenu.go) oMenu.css.top=eval(scrolled)+ltop
	if(n) setTimeout('checkScrolled()',30)
}
/********************************************************************************
Inits the page, makes the menu object, moves it to the right place, 
show it
********************************************************************************/
function menuInit(){
	oMenu=new makeMenu('divMenu')
	scrolled=n?"window.pageYOffset":"document.body.scrollTop"
	oMenu.css.left=-oMenu.width+lshow
	ltop=(n)?oMenu.css.top:oMenu.css.pixelTop;
	oMenu.css.visibility='visible'
	if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
}

//Initing menu on pageload
onload=menuInit;
</script>

<div id="divMenu" style="position:absolute; top:250; left:30; width:200; visibility:hidden; background-color:F0F0F0">
<nobr>
	<a href="http://www.webservicios.es.vg/">..::WEBREECURSOS.ES.VG::..</a>

Menu flotante.

Este menu se mantiene flotando en la pantalla de explorer