|
|
|
|
Outline ·
[ Estándar ] ·
Lineal+
 Como crear un menu despegable?
| Alhanna |
 Apr 1 2005, 05:49 PM
|
Maestro Perfecto
Grupo: Moderadores
Mensajes: 1.827
Registrado: 27-January 05
Desde: España
Miembro nº: 69.534
|
Aquí te dejo unos menues en codigos html:
Menú desplegable desde la izquierda:
| CODE | <!-- Colocar dentro de la etiqueta <HEAD> -->
<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>
<!-- Colocar dentro de la etiqueta <BOBY> -->
<script language="JavaScript1.2">
/*
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]="LosRecursosGratis.com"
sitems[1]="Servicios para tu web"
sitems[2]="Publicidad para webmasters"
sitems[3]="Servicios para visitantes"
sitems[4]="Promocion"
sitems[5]="Descarga de software"
sitems[6]="JavaSrcipt"
//These are the links pertaining to the above text.
sitemlinks[0]="http://www.losrecursosgratis.com"
sitemlinks[1]="http://www.losrecursosgratis.com/servicios/servicios.html"
sitemlinks[2]="http://www.losrecursosgratis.com/Publicidad/publicidad.html"
sitemlinks[3]="http://www.losrecursosgratis.com/servicioscvis/serviciosvis.html"
sitemlinks[4]="http://www.losrecursosgratis.com/promocion/promocion.html"
sitemlinks[5]="http://www.losrecursosgratis.com/descarga/dercargar_programas_gratis.html"
sitemlinks[6]="http://www.losrecursosgratis.com/javascript/codigos_javascript.html"
for (i=0;i<=sitems.length-1;i++)
document.write('<a rel="nofollow" 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:
| CODE |
<!-- Colocar dentro de la etiqueta <HEAD> -->
<script language="JavaScript1.2">
/*
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 move(x) {
if (document.all) {
object1.style.pixelLeft += x;
object1.style.visibility = "visible"}
else if (document.layers) {
document.object1.left += x;
document.object1.visibility = "show"}};
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>
<!-- Colocar dentro de la etiqueta <BOBY> -->
<LAYER visibility="hide" top="20" name="object1" bgcolor="black" left="0" onmouseover="move(132)" onmouseout="move(-132)">
<script language="JavaScript1.2">
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>
<script language="JavaScript1.2"><!--
if (document.all||document.layers) {
makeStatic();}
var text=new Array();
var thelink=new Array();
//configura aqui los enlaces - en los text los textos, en thelink su correspondiente link
text[0]="LosRecursosGratis";
text[1]="Promocion de páginas webs";
text[2]="Servicios de Webs";
text[3]="Servicios para visitantes";
text[4]="Publicidad para ganar con tu web";
text[5]="Descargas de programas gratis";
text[6]="Codigos JavaScript";
thelink[0]="http://www.losrecursosgratis.com";
thelink[1]="http://www.losrecursosgratis.com/promocion/promocion.html";
thelink[2]="http://www.losrecursosgratis.com/servicios/servicios.html";
thelink[3]="http://www.losrecursosgratis.com/serviciosvis/serviciosvis.html";
thelink[4]="http://www.losrecursosgratis.com/Publicidad/publicidad.html";
thelink[5]="http://www.losrecursosgratis.com/descarga/dercargar_programas_gratis.html";
thelink[6]="http://www.losrecursosgratis.com/javascript/codigos_javascript.html";
//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 desplegable:
| CODE | <!-- Colocar dentro de la etiqueta <HEAD> -->
<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>
<!-- Colocar dentro de la etiqueta <BOBY> -->
<div id="divMenu" style="position:absolute; top:250; left:30; width:200; visibility:hidden; background-color:F0F0F0">
<nobr>
<a rel="nofollow" href="http://www.losrecursosgratis.com">..::LosRecursosGratis.com::..</a> -
<a rel="nofollow" href="http://www.losrecursosgratis.com/javascript/codigos_javascript.html">Trucos JavaScript</a> -
<a rel="nofollow" href="javascript://" onclick="moveMenu()" style="background-color:yellow;text-decoration:none">MENU</a>
</nobr>
</div>
|
Saludos, Alhanna
|
|
|
|
|
Suscribirse a esta discusión
Recibirás una notificación vía correo cuando haya una respuesta y no estés activos en los foros.
Suscribirse a este foro
Recibirás una notificación vía correo cuando haya una nueva discusión y no estés activo en los foros.
Bajar/imprimir
Podrás bajar esta discusión en varios formatos o ver una versión apta para impresora.
Topicos similares
Topicos similares
|
