Tutorial: MENÚ DESPLEGABLE

**Silverwolf** · 02/08/2007, 19:12

Te Amoooooooooooooooo!!!!!

No se me paso por la cabeza!!!!!

En serio no sabes cuanto me haz ayudado con esto GRACIAS!!!

Me haz ahorrado facil una semana de trabajo.

Mil GRACIAS!!!

**solidaria** · 02/08/2007, 19:15

Menos mal que alguien ha conseguido hacer el menú correctamenta...

**rober1** · 02/08/2007, 19:18

Yo es que no consigo encontrar el dreamweaver 8 ¿alguien sabe donde?

**Silverwolf** · 02/08/2007, 19:21

Iniciado por rober1

Yo es que no consigo encontrar el dreamweaver 8 ¿alguien sabe donde?

Deja de buscar Dreamweaver 8 y empieza a buscar Dreamweaver CS3.

Saludos.

Gracias una ves mas Solidaria.

**solidaria** · 02/08/2007, 19:23

Está ya el cs3 en español por la burrita esa que siempre está cargada???

**rober1** · 02/08/2007, 19:26

el dreamweaver cs3? ¿es nuevo?

**solidaria** · 02/08/2007, 19:28

El dreamweaver era de macromedia, pero ahora se han pasado a adobe y adobe ha sacado una nueva versión, o eso creo.

**Silverwolf** · 02/08/2007, 19:43

Dreamweaver CS3 ya esta en español y si esta en la mulita, es la version que estoy usando, hasta ahora no veo el cambio, pero lo uso porque es mas compatible con Vista, bueno el problema de compatibilidad era con Fireworks y no con Dreamweaver, pero si ya esta CS3 porque no usarlo.

Saludos

PD: Supongo que debe estar prohibido postear elinks o no? bueno cualquier cosa MP ;)

**antiyankis91** · 26/08/2007, 15:30

Pues el problema que tengo yo con el menu es que lo hago con fireworks, en mi ordeandor funciona a la perfeccion en lso dos navegadores, pero despues cuando lo subo se fastidia... alguien me puede echar una mano?

http://estorbo.joolo.com

**solidaria** · 26/08/2007, 16:03

Estos menús aunque están hechos con programas como el dreamweaver o fireworks, son en javascript.

Si estos programas fallan, habría que mirar el código y yo el javascript no lo domino, así que no te podría ayudar.

El problema que tiene el javascript es que tiene muchas versiones y no todas son toleradas por los nevagadores de diferentes versiones también, por eso cuando lo abres en IE se puede ver bien y cuando lo abres en Firefox, se puede ver mal. Es muy difícil que se vea bien en todos.

Para que tu código sea visto por el mayor número de navegadores, es preferible no ponerle la versión. Ejemplo:

Código:

<script language="JavaScript1.2"

En lugar de eso, poner esto:

Código:

<script language="JavaScript"

Si te falla y no sabemos javascript, podemos hacer varias cosas. Podemos buscar un foro de javascript donde haya gente entendida que te pueda ayudar o buscar en google páginas de javascript que vengan scripts prediseñados listos para usar.

Puedes probar también en pegar el código en la sección scripts a ver si alguien te puede ayudar, pero en este foro estamos un poquito verdes en el tema jejejej. Sobre todo yo.

http://www.gamarod.com.ar/javascript/menu.asp
http://www.lawebdelprogramador.com/c...xto=JavaScript
http://www.mundojavascript.com/top10/
http://soporte.miarroba.com/152498/1...le-horizontal/
http://www.web--templates.org/es/men...va-script.html
http://javascript.espaciolatino.com/...menu/index.htm
http://www.freedownloadmanager.org/e...egable_gratis/
http://blogandweb.com/2007/03/07/men...on-javascript/

En fin, en google puedes encontrar un montón.

Siento no poder ayudarte.
Los que usamos los comportamientos del dreamweaver, es por eso, porque no sabemos.

**antiyankis91** · 26/08/2007, 21:26

he probado a cambiar lo que dices de la version del javascript, pero sigue =, aunque muchas gracias por el interes mostrado :D, voy a postear en la seccion de scripts a ver si alguien puede echarme una mano, si no es posible, me ire a las paginas que me recomendaste a mirar...

dn · 06/09/2007, 15:46

Tras darle muchas vueltas conseguí poner el menu despegable como queria. Lo unico que con el IE no van los enlaces...

**Maestro html** · 06/09/2007, 17:43

como mola el menú desplegable, gracias solidaria.

**Mikel L** · 04/10/2007, 17:16

Weans! he estado buscando y mirando y no consigo hacer este menu.. es ke tengo la version 8 y esta en ingles. y he kerido bajarme traducciones al castellano pero nada.. tb he kerido bajarme la version mx2004 komo decis pero tp..

por lo ke escribo es para lo sigueinte.. tengo un codigo de un menu desplegable... y no se porque me hace cosas raras... os lo dejo aqui para que si podeis, me lo corrijais o me digais donde esta el fallo...

HTML

Código:

<html>
<head>
<title>Iruzun Eskaut Gia Talde Laikoa</title>

<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all"> 
<script type="text/javascript"><![CDATA[//><!-- 
startList = function() { 
   if (document.all&&document.getElementById) { 
      navRoot = document.getElementById("nav"); 
      for (i=0; i<navRoot.childNodes.length; i++) { 
         node = navRoot.childNodes[i]; 
         if (node.nodeName=="LI") { 
            node.onmouseover=function() { 
               this.className+=" over"; 
            } 
            node.onmouseout=function() { 
               this.className=this.className.replace("over", ""); 
            } 
         } 
      } 
   } 
} 
window.onload=startList; 

//--><!]]></script> 
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">



<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<META Name="description" Content="Página interesante sobre el Grupo Scout-Guía IRUZUN (Iruzun Eskaut Gia Talde Laikoa)."> 
<meta><link rel="icon" href="http://img260.imageshack.us/img260/2699/ikonopaoletacc9.jpg" type="image/x-icon"> 

<link rel="SHORTCUT ICON" href="http://img260.imageshack.us/img260/2699/ikonopaoletacc9.jpg"></meta>
<bgsound src="TheJungle Book-TheBearNecessities.wav" loop="1">



<style>
<!--
BODY{
CURSOR: url(objetos/panoleta.cur);
}
-->
</style>

</head>

<body>
<SCRIPT LANGUAGE="JavaScript">

<!--// Copyright 1996 - Tomer and Yehuda Shiran

// selecciona aqui la velocidad
var speed = 10 

// Selecciona el tiempo de pausa entre mensajes
var pause = 1500 

// Valores iniciales
var timerID = null
var bannerRunning = false

var ar = new Array()

// elige el texto que quieras mostrar
ar[0] = "Pasate por las fotos"
ar[1] = "Zure iritzia ematera animatu zaite"
ar[2] = "Animate a dar tu opinion sobre la web y el grupo"
ar[3] = "No dejes de visitarnos otra vez"

var message = 0

var state = ""

clearState()

function stopBanner() {	
	if (bannerRunning)		
	clearTimeout(timerID)	
	timerRunning = false
}


function startBanner() {	
	stopBanner()	
	showBanner()
}

function clearState() {	

	state = ""	
	for (var i = 0; i < ar[message].length; ++i) {		
		state += "0"	
	}
}

function showBanner() {	
	if (getString()) {		
		message++		
	if (ar.length <= message)			
		message = 0		
		clearState()		
		timerID = setTimeout("showBanner()", pause)	
	} 
	else {		
		var str = ""		
	for (var j = 0; j < state.length; ++j) {			
		str += (state.charAt(j) == "1") ? ar[message].charAt(j) : "     "		
	}		
	window.status = str		
	timerID = setTimeout("showBanner()", speed)	
	}
}

function getString() {	
	var full = true	
	for (var j = 0; j < state.length; ++j) {		
		if (state.charAt(j) == 0)			
		full = false	
	}	
	if (full) return true	
	while (1) {		
		var num = getRandom(ar[message].length)		
	if (state.charAt(num) == "0")			
		break	
	}	
	state = state.substring(0, num) + "1" + state.substring(num + 1, state.length)	
	return false
}

function getRandom(max) {	
	var now = new Date()		
	var num = now.getTime() * now.getSeconds() * Math.random()	
	return num % max
}
startBanner()
// -->
</SCRIPT>


<script language="JavaScript" type="text/JavaScript"><!--
var txt="    IRUZUN ESKAUT GIA TALDE LAIKOA     -";
var refresco=null;
function titulo() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0); 
refresco=setTimeout("titulo()",200);}
titulo();
// -->
</script>


<div id="fondo-de-todo">
 <SCRIPT>
<!--
dows = new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sábado");
months = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
now = new Date();
dow = now.getDay();
d = now.getDate();
m = now.getMonth();
h = now.getTime();
y = now.getYear();
document.write(dows[dow]+" "+d+" de "+months[m]+" de "+y);
//-->
</SCRIPT>



<div id="global">
		 <div id="curva-superior"></div>
		 <div id="cabecera">
  	 			<div id="logotipo">[img]objetos/titulo.jpg[/img]</div>
  				</div>
		
		 			
<div id="navegacion">
  <ul id="nav"> 
[*]¿Quiénessomos?
      <ul> [*]Ramas [*]NuestrasPañoletas [*]Jefes
			[*]Estructurainterna 
			[*]Asociacionesquepertenecemos 
		[/list]		  
		
		[*]BLOG
			
		[*]Fotos
       [*]Manual 
      <ul> [*]Orientación [*]Andarenelmonte [*]Botánica 
		[*]Nudosyamarres
		[/list]			 
			
			[*]Cancionero
      <ul> [*]CancioneroA [*]CancioneroB [*]CancioneroC 
			[*]Acordesdeguitarra [/list]       
			
			[*]Foro
			
			[*]Enlaces
      <ul> [*]OtrosGrupos [*]Naturaleza 
			[*]Transportes 
			[*]Canciones 
			[*]Otrosenlaces [/list]       
			
			[*]Más
    	<ul> [*]Calendario
			[*]Noticias
			[*]Info. Centenario
			[*]Prensa
			[*]Música
			[*]ÁlbumB
			[*]BLOGB[/list]       
			
	[/list]</div>

<div id="barra-madera"></div>
<div id="contenido">




</div>

<div id="barra-inferior-flores"></div>

<div id="pie"><ul>[*]OPINA[*]CONTACTA[*]COLABORA[/list]		</div>

  


<div id="barra-inferior-inferior"></div>
</div>
</div>
</div>
</body>
</html>

CSS

Código:

* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center}


#cabecera {background-color: #32CD32 ; border-bottom: #FF8C00 3px solid ;width:800px }

#navegacion {background-color: #76EE00  ; height:28px; overflow: hidden ; width:800px }
#navegacion li {float:left ; list-style:none ;
								overflow: hidden; ; margin: 4px 5px 4px 5px ; text-aling: center}
#navegacion ul { margin-left: 15px }

#contenido {background-color: #FFF68F ; width:800px }  
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}


#menu {background-color: #FF6347; width: auto ; float:left ; text-align:left  ; margin-right: 10px; border: 3px solid #FF8C00 }
#menu li {list-style:none ; margin: 4px 0px 4px 10px}
#menu a {color: black; font-size:none ; text-decoration: none ; display:block }
#menu a:link {}
#menu a:visited {}
#menu a:hover {color: red; font-size:none ; text-decoration: underline ; background-color: silver}}
#menu a:active {}




#pie               {background-color: #C0FF3E ; height:20px ;width:800px  }
#fondo-de-todo {background-image:url(objetos/fondo-scout.jpg); height:100%; ; background-repeat: repeat-y;  background-repeat: repeat-x;}
#global {width:800px ; margin: 4px auto }






a {color: black; font-size:none ; text-decoration: underline}
a:link {}
a:visited {}
a:hover {color: orange; font-size:none ; text-decoration: underline }
a:active {}

h1 {font-size: 1.2em; color:black ; font-weight: bold ; text-decoration: underline ; text-align: center}
h2 {font.size: 1.1em; color:black ; font-weight: bold ; text-decoration: none ; text-align: center}

p {text-align: justify}

#curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ;
                  width:800px ; 
                  height: 12px ;
                  overflow : hidden}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ;
                  width:800px ; 
                  height: 12px ;
                  overflow : hidden}
									
#barra-inferior-flores { background-image: url(objetos/barra-inferior-flores.jpg) ; background-repeat: no-repeat ;
                  width:800px ; 
                  height: 167px }
                  
#barra-madera { background-image: url(objetos/barra-madera.jpg) ; background-repeat: no-repeat ;
                  width:800px ; 
                  height: 68px ; 
									overflow : hidden}

#barra-inferior-inferior { background-image: url(objetos/barra-inferior-inferior.jpg) ; background-repeat: no-repeat ;
                  width:800px ; 
                  height: 30px ;
                  overflow : hidden}
									
#pie li {float:right ; list-style:none ; margin: 0px 30px 0px 30px }
#pie ul { margin-right: 20px }

LI.normal {text-indent: 10px ; text-align: left ; list-style:none}
LI.sub-apartado {text-indent: 60px ; text-align: left ; list-style:none}
LI.sub-sub-apartado {text-indent: 120px ; list-style:none ; text-align: left}
LI.sub-sub-sub-apartado {text-indent: 140px ; list-style:none ; text-align: left}


p.normal {margin:2px 10px 2px 10px ; text-indent: 5px }
p.sub {margin:2px 10px 2px 60px ; text-indent: 5px }
p.sub-sub {margin:2px 10px 2px 120px ; text-indent: 5px } 
p.sub-sub-sub {margin:2px 10px 2px 140px ; text-indent: 5px } 




ul { /* all lists */ 
   padding: 0; 
   margin: 0; 
   list-style: none; 
} 

li { /* all list items */ 
   float: left; 
   position: relative; 
   width: 5em; 
} 

li ul { /* second-level lists */ 
   display: none; 
   position: absolute; 
   top: 1em; 
   left: 0; 
} 

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */ 
   top: auto; 
   left: auto; 
} 

li:hover ul, li.over ul { /* lists nested under hovered list items */ 
   display: block; 
} 

#content { 
   clear: left; 
}

**@ng3lou$** · 06/12/2007, 17:27

Hola a tod@s!! esta pequeña guia me sirvio mucho !! Estoy en vias de terminar mi pagina web para mi tesis y pues tengo una pequeña duda, el diseño del menu me quedo muy bien, pero quisiera agregarle un poco mas detalles, como x ejemplo, cuando situo el mouse encima de alguna opcion del menu, el puntero no cambia, en cambio cuando lo situo encima de un link el puntero cambia a la forma de una mano... como podria solucionar ese pequeño problema :?: :?: aqui les dejo mi pagina web para q observen lo que digo... si alguien tiene respuesta, plz posteenla

Mi Pagina Web

PD: Muchas muchas muchas muchas Gracias solidaria!! Eres un sol!!

PD2: x cierto, uso Dreamweaver 8... muy bueno para los principiantes

Salu2