Tutorial: MENÚ DESPLEGABLE

rober1 · 2 Ago 2007, 20:26 · Solicitar retirada

el dreamweaver cs3? ¿es nuevo?

Usuario 1064 · 2 Ago 2007, 20:28 · Solicitar retirada

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

Silverwolf · 2 Ago 2007, 20:43 · Solicitar retirada

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 Ago 2007, 16:30 · Solicitar retirada

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

Usuario 1064 · 26 Ago 2007, 17:03 · Solicitar retirada

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:

<script language="JavaScript1.2"

En lugar de eso, poner esto:

<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. :oops:

http://www.gamarod.com.ar/javascript/menu.asp
http://www.lawebdelprogramador.com/codigo/codigo.php?idp=1255&id=45…
http://www.mundojavascript.com/top10/
http://soporte.miarroba.com/152498/1472904-necesito-un-menu-despleg…
http://www.web--templates.org/es/menus/menu-desplegable-java-script…
http://javascript.espaciolatino.com/herram/genmenu/index.htm
http://www.freedownloadmanager.org/es/downloads/men%C3%BA_desplegab…
http://blogandweb.com/2007/03/07/menu-desplegable-con-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. :oops:

antiyankis91 · 26 Ago 2007, 22:26 · Solicitar retirada

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 · 6 Sep 2007, 16:46 · Solicitar retirada

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

Maestro html · 6 Sep 2007, 18:43 · Solicitar retirada

como mola el menú desplegable, gracias solidaria.

Mikel L · 4 Oct 2007, 18:16 · Solicitar retirada

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

<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">[url="plantilla.html"][img]objetos/titulo.jpg[/img][/url]</div>
  				</div>
		
		 			
<div id="navegacion">
  <ul id="nav"> 

      [*]¿Quiénessomos?
      <ul> 
      [*][url="quienes-somos-ramas.html"]Ramas[/url] 
      [*][url="quienes-somos-panoletas.html"]NuestrasPañoletas[/url] 
      [*][url="quienes-somos-jefes.html"]Jefes[/url]
			[*][url="quienes-somos-estructura.html"]Estructurainterna[/url] 
			[*][url="quienes-somos-asociaciones.html"]Asociacionesquepertenecemos[/url] 
		  [/list]
		  
		
		  [*][url="http://iruzun.blogspot.com/"]BLOG[/url]
			
		  [*][url="http://picasaweb.google.com/Iruzunen.Bilduma"]Fotos[/url]
       
      [*][url="manual.html"]Manual[/url] 
      <ul> 
      [*][url="manual-orientacion.html"]Orientación[/url] 
      [*][url="manual-andar-monte.html"]Andarenelmonte[/url] 
      [*][url="manual-botanica.html"]Botánica[/url] 
		  [*][url="manual-nudos.html"]Nudosyamarres[/url]
		  [/list] 
			 
			
			[*][url="cancionero.html"]Cancionero[/url]
      <ul> 
      [*][url="cancionero-a.html"]CancioneroA[/url] 
      [*][url="cancionero-b.html"]CancioneroB[/url] 
      [*][url="cancionero-c.html"]CancioneroC[/url] 
			[*][url="cancionero-acordes.html"]Acordesdeguitarra[/url] 
      [/list] 
       
			
			[*][url="http://iruzun.foroportal.es/index.php"]Foro[/url]
			
			[*][url="enlaces.html"]Enlaces[/url]
      <ul> 
      [*][url="enlaces-grupos.html"]OtrosGrupos[/url] 
      [*][url="enlaces-naturaleza.html"]Naturaleza[/url] 
			[*][url="enlaces-transporte.html"]Transportes[/url] 
			[*][url="enlaces-canciones.html"]Canciones[/url] 
			[*][url="enlaces-otros.html"]Otrosenlaces[/url] 
      [/list] 
       
			
			[*][url="mas.html"]Más[/url]
    	<ul> 
      [*]Calendario
			[*]Noticias
			[*][url="mas-centenario.html"]Info. Centenario[/url]
			[*]Prensa
			[*]Música
			[*][url="http://album.iruzun.es"]ÁlbumB[/url]
			[*][url="http://blog.iruzun.es"]BLOGB[/url]
      [/list] 
       
			
	[/list]
</div>

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




</div>

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

<div id="pie"><ul>
    [*][url="opinion.html"]OPINA[/url][*][url="contacta.html"]CONTACTA[/url][*][url="colabora.html"]COLABORA[/url][/list]
		</div>

  


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

CSS

* {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$ · 6 Dic 2007, 18:27 · Solicitar retirada

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 :wink:

Mi Pagina Web

PD: Muchas muchas muchas muchas Gracias solidaria!! Eres un sol!! :oops:
PD2: x cierto, uso Dreamweaver 8... muy bueno para los principiantes

Salu2 8)

Mito · 17 Mar 2008, 16:18 · Solicitar retirada

Hola a todos, bueno me imagino que muchos ya lo sabran pero yo lo acabo de encontrar(estoy empezando como quien dice ;)) un código para hacer otro tipo de menú desplegable en html, bueno aqui se los dejo y si les sirve para ponerlo en el curso paso a paso... pues mejor que mejor ;)

<form>
<SELECT NAME="urldestino">
<option selected>--- M E N U ---
<option value="inicio.html" >Inicio
<option value="seccion1.html">Album de fotos
<option value="seccion2.html">Textos interesantes
<option value="seccion3.html">Noticias
<option value="seccion4.html">Novedades
<option value="seccion5.html">Mi diario
</SELECT>
<input type="button" value="IR" onClick="location=this.form.urldestino.value" name="button">
</form>

Lo que esta escrito en rojo oscuro lo cambias por el nombre de la página que deseas que vaya y lo que esta en verde va a ser todas las palabras que te van a salir en la lista, puese añadir poniendo mas lineas a la lista si t hace falta o quitarlas.El menú que esta en verde es lo que aparece en el recuadro de la lista sin haberla desplegado. Bueno no se si me he liado si alguien lo puede explicar mejor... sin problema ninguno ;)

The Webmaster · 18 Mar 2008, 22:13 · Solicitar retirada

Hola Solidaria, me gustarian que te registrases en el foro de mi web por si no te importa colocar este tutorial de Menus Desplegables, o si me das el permiso de copiarlo y publicarlo en mi web. La direccion de mi foro esta en mi firma.

The Webmaster · 18 Mar 2008, 22:14 · Solicitar retirada

osnik · 16 May 2008, 05:11 · Solicitar retirada

Wooow gracias por estos tutoriales
son magnificos 8)

Eduardo93 · 14 May 2009, 20:46 · Solicitar retirada

Perfecto esta muy bueno este manual espero aprender mucho aca Gracias por el aporte sos la mejor

salu2 :wink:

CardiaKO · 7 Mar 2010, 20:42 · Solicitar retirada

Otra forma de hacer menus despleglables facilmente es con el Sothink DHTML menu. A mi me salen muy bien y muy rapido, como el de mi web: http://hiphopheart.atwebpages.com/

Louis · 18 Sep 2010, 13:47 · Solicitar retirada

Hola solitaria,
Se puede hacer con DreamWeaver 8?

A y... que hosting me recomendarias?

MONIKY · 26 Mar 2015, 12:18 · Solicitar retirada

Hola a todos,

Os voy a dejar un link para que echeis un vistazo si quereis aprender mucho más, yo hice un curso de Diseño Web y me ha servido para encontrar trabajo en Londres.

Un saludo

Monica

henry340 · 17 Oct 2015, 19:55 · Solicitar retirada

Buenisimo muchas gracias:cool:

folletoss · 11 Mar 2019, 15:33 · Solicitar retirada

me fue muy util gracia por compartir

Stevenpro7 · 29 Jun 2019, 18:31 · Solicitar retirada

Hola, tengo dos páginas webs, una esta y la otra es https://centrodebellezavzla.pro/ con la primera el menú está bien. Pero en la segunda, en la parte de preguntas frecuente, me redirecciona a "#", no quiero que tenga enlaces, pero no se lo puedo quitar y no sé qué opción será en el editor de la plantilla. Me ayudan?

marionet25 · 15 Jul 2019, 06:20 · Solicitar retirada

alguien tiene un tutorial util gracias