
	interadicto


	codigos referidos a menus

Código JavaScript Menú deslizable desde la izquierda

Inserta el código en la parte de la página donde proceda. Respeta a sus autores y ten en cuenta en las etiquetas donde debe ser colocado. Presta atención también si hay que incluir alguna variable en la etiqueta <body ...>. Para copiarlo tan sólo debes pulsar el botón copiar texto y lo tendrás en el portapapeles.

<style>  </style>  <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 href='+sitemlinks[i]+'>'+sitems[i]+'</a> ') </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

<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>  </style>  <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"> Menu</td> <script language="JavaScript1.2"> document.write('<td align="center" rowspan="100" width="16" bgcolor="#FF6666">M E N U</TD>') </script> </tr> <script language="JavaScript1.2"> </script> <tr> <td bgcolor="#0099FF"> </td> </TR> </table> <script language="JavaScript1.2"> if (document.all) {document.write('</DIV>')} window.onload=positionmenu </script> </LAYER>

Menú barra horizontal oculta desplazable
Inserta el código en la parte de la página donde proceda. Respeta a sus autores y ten en cuenta en las etiquetas donde debe ser colocado. Presta atención también si hay que incluir alguna variable en la etiqueta <body ...>. Para copiarlo tan sólo debes pulsar el botón copiar texto y lo tendrás en el portapapeles.

<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"> <a href="http://www.losrecursosgratis.com">..::LosRecursosGratis.com::..</a> - <a href="http://www.losrecursosgratis.com/javascript/codigos_javascript.html">Trucos JavaScript</a> - <a href="javascript://" onclick="moveMenu()" style="background-color:yellow;text-decoration:none">MENU</a> </div>

Código JavaScript Menú-Barra con botones para desplazar

<style> body{ overflow-x:hidden; overflow-y:scroll; } </style>  <script language="JavaScript1.2"> /* Scrollable Menu Links- By Dynamicdrive.com For full source, TOS, and 100s DTHML scripts Visit http://dynamicdrive.com Traducido y adaptado por http://www.losrecursosgratis.com */ //configura aqui las imágenes var goleftimage='imagenes/flechaizd.gif' var gorightimage='imagenes/flechader.gif' //configura la anchura del menú var menuwidth=300 //configura la velocidad del scroll (1-10), cuanto mayor, mas rápido var scrollspeed=6 //specify menu content var menucontents='<a href="http://www.losrecursosgratis.com.com">LosRecursosGratis.com</a> | <a href="http://www.lazonadejuegos.com">La Zona de Juegos</a> | <a href="http://www.losrecursosgratis.com/directorio.htm">Directorio de recursos para webamsters</a> | <a href="http://vendedoronline.com/promoweb/index.php?ref=raroci">Aumenta las visitas a tu web</a>' ////NO EDITES NADA A PARTIR DE AQUI//////////// var actualwidth='' var ns_scroll function fillup(){ if (document.all){ test2.innerHTML=menucontents actualwidth=test2.offsetWidth } else if (document.layers){ ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2 ns_scroll.document.write(menucontents) ns_scroll.document.close() actualwidth=ns_scroll.document.width } } window.onload=fillup function moveleft(){ if (document.all&&test2.style.pixelLeft>(menuwidth-actualwidth)) test2.style.pixelLeft-=scrollspeed else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth)) ns_scroll.left-=scrollspeed lefttime=setTimeout("moveleft()",50) } function moveright(){ if (document.all&&test2.style.pixelLeft<0) test2.style.pixelLeft+=scrollspeed else if (document.layers&&ns_scroll.left<0) ns_scroll.left+=scrollspeed righttime=setTimeout("moveright()",50) } if (document.all||document.layers){ with (document){ write('<table border="0" cellspacing="0" cellpadding="0">') write('<td valign="middle"><a href=#" onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"><img src="'+goleftimage+'"border=0></a> </td>') write('<td valign="top">') if (document.all){ write('') write('') write('') write('') } else if (document.layers){ write('<ilayer width='+menuwidth+' name="ns_scrollmenu">') write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>') } write('</td>') write('<td valign="middle"> <a href="#" onMouseover="moveright()" onMouseout="clearTimeout(righttime)">') write('<img src="'+gorightimage+'"border=0></a>') write('</td></table>') } } </script>

Código JavaScript Menú con directorios desplegables

<style>  </style> <script language="JavaScript1.2">  </script>  <ul> <li id="foldheader">..:: LosRecursosGratis.com ::..</li> <ul id="foldinglist" style="display:none" style=&{head};> <li><a href="http://www.losrecursosgratis.com/default.htm">Página principal de LosRecursosGratis.com</a></li> <li id="foldheader">Publicidad</li> <ul id="foldinglist" style="display:none" style=&{head};> <li><a href="http://www.losrecursosgratis.com/Publicidad/publicidad.html">Página principal de Publicidad</a></li> <li><a href="http://www.losrecursosgratis.com/Publicidad/click.html">Pagos por clics</a></li> <li><a href="http://www.losrecursosgratis.com/Publicidad/inscripcion.html">Pagos por inscripción</a></li> <li><a href="http://www.losrecursosgratis.com/Publicidad/comisiones.html">Pagos por comisiones</a></li> <li><a href="http://www.losrecursosgratis.com/Publicidad/cxe.html">Cobrar por recibir e-mails</a></li> <li><a href="http://www.losrecursosgratis.com/Publicidad/cxn.html">Cobrar por navegar</a></li> <li><a href="http://www.losrecursosgratis.com/Publicidad/cxo.html">Cobrar por otros</a></li> </ul> <li id="foldheader">Promoción de páginas</li> <ul id="foldinglist" style="display:none" style=&{head};> <li><a href="http://www.losrecursosgratis.com/promocion/promocion.html">Página principal de Promoción</a></li> <li><a href="http://www.losrecursosgratis.com/promocion/cambiabanner/banners1.html">Intercambio de banners</a></li> <li><a href="http://www.losrecursosgratis.com/promocion/ranking/ranking1.html">Ranking y TopSites</a></li> <li><a href="http://www.losrecursosgratis.com/promocion/premios/premios.html">Premios y galardones</a></li> <li><a href="http://www.losrecursosgratis.com/promocion/recomendar/recomendar.html">Recomendar páginas a amigos</a></li> <li><a href="http://www.losrecursosgratis.com/altas/altas.html">Altas manuales en buscadores gratis</a></li> <li><a href="http://www.losrecursosgratis.com/altas/automaticas.html">Altas automáticas en buscadores gratis</a></li> </ul> <li id="foldheader">Servicios para tu web</li> <ul id="foldinglist" style="display:none" style=&{head};> <li><a href="http://www.losrecursosgratis.com/servicios/servicios.html">Página principal de Servicios para tu web</a></li> <li><a href="http://www.losrecursosgratis.com/servicios/espacio/espacio.html">Espacio Web o alojamiento gratuitos</a></li> <li><a href="http://www.losrecursosgratis.com/servicios/subdominios/subdominios.html">Subdominios y redirecciones gratis</a> </li> <li><a href="http://www.losrecursosgratis.com/servicios/dominios/dominios.html">Dominios</a></li> <li><a href="http://www.losrecursosgratis.com/servicios/musica/musica-gratis.html">Música</a></li> <li><a href="http://www.losrecursosgratis.com/servicios/fuentes/fuentes_true_type.html">Fuentes gratis</a></li> <li><a href="http://www.losrecursosgratis.com/servicios/contadores/contadores.html">Contadores con estadísticas gratis</a></li> </ul> <li id="foldheader">Servicios para tus visitantes</li> <ul id="foldinglist" style="display:none" style=&{head};> <li><a href="http://www.losrecursosgratis.com/serviciosvis/serviciosvis.html">Página principal de Servicios para visitantes</a></li> <li><a href="serviciosvis/encuestas/encuestas.html">Encuestas</a></li> <li><a href="http://www.losrecursosgratis.com/serviciosvis/sms/sms.html">Envió de mensajes a móviles gratis</a></li> <li><a href="http://www.losrecursosgratis.com/serviciosvis/correo/correo.html">Correo web que ofrecer a los visitantes gratis</a></li> <li><a href="http://www.losrecursosgratis.com/serviciosvis/postales/postales_animadas.html">Envío de postales gratis</a></li> <li><a href="http://www.losrecursosgratis.com/serviciosvis/Tiempo/tiempo.html">Tiempo atmosférico</a></li> <li><a href="http://www.losrecursosgratis.com/serviciosvis/noticias/noticias.html">Servicio de noticias de actualidad gratuito</a></li> <li><a href="http://www.losrecursosgratis.com/serviciosvis/chat/chats.html">Crear chat propio</a></li> <li><a href="http://www.losrecursosgratis.com/serviciosvis/chat/chats.html">Página de chat</a></li> <li><a href="http://www.losrecursosgratis.com/serviciosvis/buscadores/buscadores.html">Página de buscadores</a></li> </ul> <li id="foldheader">Zona de descargas</li> <ul id="foldinglist" style="display:none" style=&{head};> <li><a href="http://www.losrecursosgratis.com/descarga/dercargar_programas_gratis.html">Página principal de servicios de descargas</a></li> <li><a href="http://www.losrecursosgratis.com/descarga/descargas/programas_gratis_varios.html">Programas varios para el ocio de cualquiera</a></li> <li><a href="http://www.losrecursosgratis.com/descarga/descargas/serinter.html">Programas para moverse por Internet</a></li> <li><a href="http://www.losrecursosgratis.com/descarga/descargas/programacion.html">Programas para programar</a></li> <li><a href="http://www.losrecursosgratis.com/descarga/descargas/graficos.html">Programas de tratamiento gráfico</a></li> <li><a href="http://www.losrecursosgratis.com/descarga/descargas/utilidades_pc.html">Programas de gran utilidad para los webmasters y usuarios en general</a></li> <li><a href="http://www.losrecursosgratis.com/descarga/descargas/programas_musica_gratis.html">Programas de música (mp3, midi, wav...)</a></li> <li><a href="http://www.losrecursosgratis.com/descarga/descargas/promocion.html">Programas para la promoción de páginas</a></li> </ul> <li id="foldheader">Trucos y códigos JavaScript</li> <ul id="foldinglist" style="display:none" style=&{head};> <li><a href="javascript/codigos_javascript.html">Página principal de Códigos y Trucos Javascript</a></li> <li id="foldheader">Códigos relacionados con el tiempo</li> <ul id="foldinglist" type="disc"> <li><a href="http://www.losrecursosgratis.com/javascript/seccionjava/tiempo.html">Página principal de tiempo</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/relojanalogico.htm">Reloj analógico por la pantalla</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/cuentaprogresiva.htm">Cuenta progresiva de tiempo</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/fechanormal.htm">Insertar fecha</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/cuentacerrar.htm">Cuenta atrás para cerrar una ventana</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/relojdigital.htm">Reloj digital</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/relojdigitales.htm">Reloj Digital en la esquina superior</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/diasemana.htm">Averiguar con una fecha que día de la semana fue </a></li> </ul> <li id="foldheader">Códigos referidos a menús</li> <ul id="foldinglist" type="disc"> <li><a href="http://www.losrecursosgratis.com/javascript/seccionjava/menus.html">Página principal de menús</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/menudesizd.htm">Menú con desplazamiento desde la izda de la pantalla</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/menubarrades.htm">Menú-Barra con desplazamiento desde la izda de la pantalla</a></li> </ul> <li id="foldheader">Códigos para efectos con el ratón y el puntero</li> <ul id="foldinglist" type="disc"> <li><a href="http://www.losrecursosgratis.com/javascript/seccionjava/raton.html">Página principal de ratón y punteros</a></li> <li type="disc"><a href="http://www.losrecursosgratis.com/javascript/ejemplos/punteroestrella.htm">Estrella persiguiendo al puntero</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/botonderecho.htm">Anular el botón de la derecha</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/botondizdo.htm">Anular el botón de la izquierda</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/botonderechoizdo.htm">Anular ambos botones</a></li> </ul> <li id="foldheader">Códigos relacionados con imágenes</li> <ul id="foldinglist" type="disc"> <li><a href="http://www.losrecursosgratis.com/javascript/seccionjava/imagenes.html">Página principal de imágenes</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/rotabanner2.htm">Cambiar banners y link automáticamente cada ciertos segundos</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/rotabanner1.htm">Cambiar banners y link automáticamente cada ciertos segundos (II)</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/rotabanner.htm">Cambiar banners y link automáticamente cada ciertos segundos (III)</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/precargarimagenes.htm">Muestra barra de cargando... mientras se cargan las imágenes de la página que mostramos</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/banneraleatorio.htm'">Imagenes con texto y links aleatorias al entrar en una página</a></li> </ul> <li id="foldheader">Códigos relacionados con las barras del navegador</li> <ul id="foldinglist" type="disc"> <li><a href="http://www.losrecursosgratis.com/javascript/seccionjava/barras.html">Página principal de barras</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/Colorbarrades.htm">Cambiar el color a la barra de desplazamiento</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/barramensajes.htm">Aparece texto en la barra de estado (tipo marquesina)</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/barramenvol.htm">Aparece texto en la barra de estado (tipo ventisca)</a></li> </ul> <li id="foldheader">Códigos relacionados con los textos</li> <ul id="foldinglist" type="disc"> <li><a href="http://www.losrecursosgratis.com/javascript/seccionjava/textos.html">Página principal de textos</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/colorresalte.htm">Listado de enlaces cambiando e color del resalte</a></li> </ul> <li id="foldheader">Códigos relacionados con enlaces</li> <ul id="foldinglist" type="disc"> <li><a href="http://www.losrecursosgratis.com/javascript/seccionjava/links.html">Página principal de links</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/subrayadohiper.htm">Quitar la línea inferior de los hipervínculos</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/combo1.htm">Combobox para seleccionar links y este se abre en una nueva ventana</a></li> </ul> <li id="foldheader">Otros códigos</li> <ul id="foldinglist" style="display:none" style=&{head};> <li type="disc"><a href="http://www.losrecursosgratis.com/javascript/seccionjava/otros.html">Página principal de otros</a></li> </ul> <ul id="foldinglist" type="disc"> <li type="disc"><a href="http://www.losrecursosgratis.com/javascript/ejemplos/popupautomatico.htm">Abrir una ventana dimensionada a la vez que otra</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/varbuscadores1.htm">Buscadores múltiples</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/varbuscadores2.htm">Buscadores múltipes (II)</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/botonoriginal.htm">Apertura de una ventana de una forma original</a></li> <li><a href="http://www.losrecursosgratis.com/javascript/ejemplos/virus.htm">Broma de virus</a></li> </ul> </ul> </ul> </ul>

interadicto

Hoy habia 13 visitantes (17 clics a subpáginas) ¡Aqui en esta página!

widget

Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?

Registrarse gratis