Codigo de Menu de navegacion desplegable y pegable con clic.

Sección para"expertos", que quieren cambiar el código HTML de su página o insertar Java Scripts, Iframes, etc.. Si eres principiante, esta sección no te hace falta.

ModeradorCOLON Moderadores

Avatar de Usuario
esteestumundo1
Newbie
Newbie
MensajesCOLON 112
RegistradoCOLON 12 Ago 2007 12:39
CONTACTCOLON

Codigo de Menu de navegacion desplegable y pegable con clic.

Notapor esteestumundo1 » 13 Nov 2007 13:23

Ola a todos.
Ose pongo el html para un Menú de navegación desplegable y plegable con clic de ratón. (como el menu de mi web)
Aqui os dejo el codigo :


<script>
var verspacetoplevel=5
var verspacesublevel=2
var horspace=3
var textdeco="none"
var minusimg=new Image()
minusimg.src="abajo.gif"
var plusimg=new Image()
plusimg.src="lastpost.gif"
var plusminusimgsrc=plusimg.src
var content=""
var fnttop="Arial"
var fnttopsize=10
var fnttopcolor="black"
var fnttopweight="bold"
var fntsub="Arial"
var fntsubsize=9
var fntsubcolor="A0A0A0"
var fntsubweight="normal"
var i_level=new Array(0,0,1,1,1,0,1,1,1,0,1,1)
var i_url=new Array("http://www.diviertete.es.kz","#","http://www.diviertete.es.kz","http://www.diviertete.es.kz","http://www.diviertete.es.kz","#","http://www.diviertete.es.kz","http://www.diviertete.es.kz","http://www.diviertete.es.kz","#","http://www.diviertete.es.kz","http://www.diviertete.es.kz")
var i_text=new Array("HOME","Menú 1","Link 1","Link 2","Link 3","Menú 2","Link 1","Link 2","Link 3","Menú 3","Link 1","Link 2")
var i_target=new Array("_blank","_blank","_blank","_blank","_blank","_blank","_blank","_blank","_blank","_top","_top","_top")
var whichi_opened=-1
var i_opened=false
var hassubmenus=false
var istoppageitem=true
var ie=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
var ns4=document.layers?1:0
function closesublevels() {
plusminusimgsrc=plusimg.src
content=""
content+="<table>"
for (i=0;i<=i_level.length;i++) {
hassubmenus=false
if (i_level[i]==0) {
var iplus=i+1
if ((iplus<=i_level.length) && (i_level[iplus]==1)) {
hassubmenus=true
}
if (hassubmenus) {
if (!istoppageitem) {
content+="<tr><td><img></td></tr>"
}
istoppageitem=false;
content+="<tr>"
content+="<td>"
content+="<a>"
content+="<img></a>"
content+="</td>"
content+="<td>"
content+="<a>"
content+=i_text[i]
content+="</a></td></tr>"
}
else {
if (!istoppageitem) {
content+="<tr><td><img></td></tr>"
}
istoppageitem=false;
content+="<tr><td></td>"
if (i_url[i]!="#" && i_url[i]!="" && i_url[i]!="http://" && i_url[i].indexOf("@")<0>0) {
content+="<td><a>"
}
else {
i_url[i]="#"
content+="<td><a>"
}
content+=i_text[i]
content+="</a></td></tr>"
}
}
}
content+="</table>"
istoppageitem=true;
whichi_opened=-1
if (ie) {
menu.innerHTML=content
}
if (ns6) {
document.getElementById("menu").innerHTML=content
}
if (ns4) {
document.menutop.document.menu.document.write(content)
document.menutop.document.menu.document.close()
}
}
function opensublevels(thisiopened) {
if (whichi_opened==thisiopened) {
openurl()
closesublevels()
}
else {
whichi_opened=thisiopened
content=""
content+="<table>"
for (i=0;i<=i_level.length;i++) {
if (i_level[i]==0) {
if (thisiopened==i) {i_opened=true}
else {i_opened=false}
var iplus=i+1
if ((iplus<=i_level.length) && (i_level[iplus]==1)) {hassubmenus=true}
else {hassubmenus=false}
if (i_opened) {plusminusimgsrc=minusimg.src}
else {plusminusimgsrc=plusimg.src}
if (!istoppageitem) {
content+="<tr><td><img></td></tr>"
}
istoppageitem=false;
content+="<tr><td>"
if (hassubmenus) {
content+="<a>"
content+="<img></a>"
}
content+="</td>"
content+="<td><a>"
content+=i_text[i]
content+="</a></td></tr>"
}
else if (i_level[i]==1 && i_opened){
content+="<tr><td> </td>"
if (i_url[i]!="#" && i_url[i]!="" && i_url[i]!="http://" && i_url[i].indexOf("@")<0>0) {
content+="<td><a>"
}
else {
i_url[i]="#"
content+="<td><a>"
}
content+=i_text[i]
content+="</a></td></tr>"
}
}
content+="</table>"
if (ie) {
menu.innerHTML=content
}
if (ns6) {
document.getElementById("menu").innerHTML=content
}
if (ns4) {
document.menutop.document.menu.document.write(content)
document.menutop.document.menu.document.close()
}
istoppageitem=true;
openurl()
}
}
function openurl() {
var selectedtarget=i_target[whichi_opened]
var selectedurl=i_url[whichi_opened]
if (selectedurl!="#" && selectedurl!="" && selectedurl!="http://" && selectedurl.indexOf("@")<0>0) {
selectedurl="mailto:"+selectedurl
document.flink.target=selectedtarget
document.flink.action=selectedurl
document.flink.submit()
}
}
init()
function init() {
istoppageitem=true;
content=""
content+="<table>"
for (i=0;i<=i_level.length;i++) {
if (i_level[i]==0) {
var iplus=i+1
if ((iplus<=i_level.length) && (i_level[iplus]==1)) {hassubmenus=true}
else {hassubmenus=false}
if (!istoppageitem) {
content+="<tr><td><img></td></tr>"
}
istoppageitem=false;
content+="<tr><td>"
if (hassubmenus) {
content+="<a>"
content+="<img></a>"
}
content+="</td>"
content+="<td><a>"
content+=i_text[i]
content+="</a></td></tr>"
}
else if (i_level[i]==1){
content+="<tr><td> </td>"
content+="<td><a>"
content+=i_text[i]
content+="</a></td></tr>"
}
}
content+="</table>"
istoppageitem=true;
if (ie || ns6) {
document.write('<span>'+content+'</span>')
document.close()
}
else if (ns4) {
document.write('<ilayer>')
document.write('<layer>'+content+'</layer>')
document.write('</ilayer>')
document.close()
}
else {
oldbrowser()
}
}
function oldbrowser() {
istoppageitem=true;
content=""
content+="<table>"
for (i=0;i<=i_level.length;i++) {
if (i_level[i]==0) {
var iplus=i+1
if ((iplus<=i_level.length) && (i_level[iplus]==1)) {hassubmenus=true}
else {hassubmenus=false}
if (!istoppageitem) {
content+="<tr><td><img></td></tr>"
}
istoppageitem=false;
content+="<tr><td>"
if (hassubmenus) {
content+="<img>"
}
content+="</td>"
content+="<td><a><font>"
content+=i_text[i]
content+="</font></a></td></tr>"
}
else if (i_level[i]==1){
content+="<tr><td> </td>"
content+="<td><a><font>"
content+=i_text[i]
content+="</font></a></td></tr>"
}
}
content+="</table>"
document.write(content)
document.close()
}
function reloadpage() {
location.reload(true)
}
if (ns4 || ns6 || ie) {
window.onload=closesublevels
}
if (ns4 || ns6 || ie) {
window.onresize=reloadpage
}
</script>



Mi consejo es que creeis primero una tabla.. y luego metais dentro el codigo.

Venga salu2.


Ahh quien tenga dudas sobre este script, que me lo diga en este post.
Última edición por 1 el esteestumundo1, editado 26 veces en total
--------------Visitanos--------------
http://www.diviertete.es.kz

Avatar de Usuario
carlitos
ExModerador
ExModerador
MensajesCOLON 1635
RegistradoCOLON 29 Nov 2006 17:02
UbicaciónCOLON Gavà M'encanta Gavà!
CONTACTCOLON

Notapor carlitos » 13 Nov 2007 15:16

Devería ir en código HTML y Javascript.

Pon una web donde podamos ver el ejemplo :wink:
Imagen
De lo que no se puede hablar.. mejor es callarse

Avatar de Usuario
esteestumundo1
Newbie
Newbie
MensajesCOLON 112
RegistradoCOLON 12 Ago 2007 12:39
CONTACTCOLON

Notapor esteestumundo1 » 13 Nov 2007 17:15

carlitos escribióColonPon una web donde podamos ver el ejemplo :wink:


En mi web lo tengo en el menu, ala izquierda.
--------------Visitanos--------------

http://www.diviertete.es.kz

Avatar de Usuario
Nacho!
Pro User
Pro User
MensajesCOLON 1377
RegistradoCOLON 29 Oct 2007 15:11
UbicaciónCOLON Europa, España , Andalucia , Sevilla
CONTACTCOLON

Notapor Nacho! » 26 Nov 2007 15:50

Lo unico que no se es lo siguiente, lo inserto y todo pero me sale tu menu nu el mio xDD...

Avatar de Usuario
esteestumundo1
Newbie
Newbie
MensajesCOLON 112
RegistradoCOLON 12 Ago 2007 12:39
CONTACTCOLON

Notapor esteestumundo1 » 26 Nov 2007 17:11

Nacho! escribióColonLo unico que no se es lo siguiente, lo inserto y todo pero me sale tu menu nu el mio xDD...


Te explico donde pone :

var i_level=new Array(0,0,1,1,1,0,1,1,1,0,1,1)

Los 0 significa un apartado y los 1 significa los k hay dentro.

Ejemplo si pones esto: (0,1,1,1,1,0,1) Significa que le das al primer apartado y te salen 3 opciones y luego le das al segundo apartado y te sale una opcion.


Luego bamos haber esto :
Array("http://www.diviertete.es.kz","#","http://www.diviertete.es.kz","http://www.diviertete.es.kz","http://www.diviertete.es.kz","#","http://www.diviertete.es.kz","http://www.diviertete.es.kz","http://www.diviertete.es.kz","#","http://www.diviertete.es.kz","http://www.diviertete.es.kz")

Ahi teneis que poner la web en la que querais que vaya en el orden de lo que pusimos anteriormente de (0,1,1,1,1,0,1) lo que pasa es que cuando sea un nuevo apartado osea un 0, teneis que poner esto "#" . Esto inidicara un nuevo aprtado.


Seguimos:

Luego aki :
var i_text=new Array("HOME","Menú 1","Link 1","Link 2","Link 3","Menú 2","Link 1","Link 2","Link 3","Menú 3","Link 1","Link 2")


Ponemos los nombres que queramos que salgan...( todos en el orden de simepre)


Y ya esta... lo demas mejor no lo toqueis..

Venga salu2
--------------Visitanos--------------

http://www.diviertete.es.kz

Avatar de Usuario
Nacho!
Pro User
Pro User
MensajesCOLON 1377
RegistradoCOLON 29 Oct 2007 15:11
UbicaciónCOLON Europa, España , Andalucia , Sevilla
CONTACTCOLON

Notapor Nacho! » 27 Nov 2007 15:09

Gracias...

Klk3
ExAdministrador
ExAdministrador
MensajesCOLON 2803
RegistradoCOLON 18 Nov 2005 16:09
UbicaciónCOLON Barcelona,España
CONTACTCOLON

Notapor Klk3 » 28 Nov 2007 18:31

Buenisimo el codigo ;)

movido a Codigos
Imagen
Hasta siempre ha sido un placer muy grande :D


Volver a

¿Quién está conectado?

Usuarios navegando por este Foro: 7 y 0 invitados

cron