No consigo hacer un menú desplegable!

[nauix26]

Buenas! Mirad, es mi primer post en este blog pero es que tengo un problema.

Yo había hecho algunas webs muy chapuceras (no digo que esta no lo sea, pero menos) solo con html, y ahora me he aventurado con en CSS. De momento lo voy pillando, pero se me ha atragantado el menú desplegable.

Tengo hecho un menú simple, con una lista sin subapartados, y el formato y todo me gusta (el hover y todo) pero ahora quiero añadir subapartados. Añadirlos a la lista en el HTML no es problema, el problema llega cuando tengo que editar el CSS para que se muestre solo con el hover. Esto no lo sé hacer, he mirado muchos tutoriales pero ningun coincide con el css del menu que tengo yo, y me lia tener que cambiar todo.

Aquí está mi CSS del menú:

Código:

#menu{ 
	font-size: 1em; 
	font-weight: ; 
	margin-left: 0px; 
	margin-right: 0px;} 
#menu li{ 
	float: left; 
	list-style-type: none;} 
#menu ul{ 
	margin: 0; 
	padding: 0;} 

#menu a{ 
	display: block; 
	text-decoration: none; 
	color: #000000; 
	background: #ECD801; 
	padding: 3px 17.8px 3px 17.8px; 
	text-align: center; 
	border: 1px solid #000000; 
	border-width: 1px 1px 1px 0px;} 
#menu a#primero{ 
	border: 1px solid #000000;} 
#menu a:hover{ 
	background: #E76000;}

Y el html con la lista ya completa es este:

Código:

<div id="menu"> 
<ul> 
<li><a href="#" class="enlacemenu" id="primero">Inici</a></li> 
<li><a href="#" class="enlacemenu">Plantilla</a></li> 
<li><a href="#" class="enlacemenu">Calendari</a> 
<ul> 
<li><a href="#" class="enlacemenu">Agost '09</a></li> 
<li><a href="#" class="enlacemenu">Setembre '09</a></li> 
<li><a href="#" class="enlacemenu">Octubre '09</a></li> 
<li><a href="#" class="enlacemenu">Novembre '09</a></li> 
<li><a href="#" class="enlacemenu">Desembre '09</a></li> 
<li><a href="#" class="enlacemenu">Gener '10</a></li> 
<li><a href="#" class="enlacemenu">Febrer '10</a></li> 
<li><a href="#" class="enlacemenu">Març '10</a></li> 
<li><a href="#" class="enlacemenu">Abril '10</a></li> 
<li><a href="#" class="enlacemenu">Maig '10</a></li> 
<li><a href="#" class="enlacemenu">Juny'10</a></li>						 
</ul> 
</li> 
<li><a href="#" class="enlacemenu">Classificació</a> 
<ul> 
<li><a href="#" class="enlacemenu">LLiga</a></li> 
<li><a href="#" class="enlacemenu">Champions League</a></li> 
<li><a href="#" class="enlacemenu">Copa del Rei</a></li>					 
</ul> 
</li> 
<li><a href="#" class="enlacemenu">Multimèdia</a> 
<ul> 
<li><a href="#" class="enlacemenu">Fotografies '09/10</a></li> 
<li><a href="#" class="enlacemenu">Videos '09/10</a></li> 
<li><a href="#" class="enlacemenu">Videos Històrics</a></li>	 
<li><a href="#" class="enlacemenu">Fons de Pantalla</a></li>					 
</ul> 
</li> 
<li><a href="#" class="enlacemenu">Palmarès</a></li> 
<li><a href="#" class="enlacemenu">Premsa</a> 
<ul> 
<li><a href="#" class="enlacemenu">Titulars</a></li> 
<li><a href="#" class="enlacemenu">Cròniques</a></li>	 
</ul>	 
</li> 
<li><a href="#" class="enlacemenu">Contacta</a></li> 
</ul> 
</div>

Ya no sé como hacerlo, conseguí como mucho tapar todos los subapartados pero luego no conseguí que se vieran cuando pasava con el ratón. Además este pequeño avance no se ni como lo hize, por lo tanto lo quité. Si alguien me puede recomendar un buen tutorial, o hecharme un cable. Soy bastante novato, por lo tanto por favor ir despacio! GRACIAS de antemano!


nauix26

[Triby]

Date una vuelta por www.araudi.net, Mikmoro creo varios ejemplos de menus desplegables que funcionan hasta en IE6.

Solo necesitas copiar el codigo del que te guste y adaptarlo a tus necesidades.

[nauix26]

gracias! voy a mirar.

[nauix26]

estan bien, pero el css lo tiene en referencia i por lo tanto no lo puedo editar..

[Triby]

Intenta poniendo en la barra de direccion de tu navegador: araudi.net/css/nombre_de_la_hoja.css para verlo y guardarlo en tu PC.

[nauix26]

lo prové, pero no me funcionó. La putada es que con el menú sin desplegar estava perfecto perfecto! no se que hacer, no quiero poner uno de predeterminado porque no pegan nada los colores..

Gracias igualmente!

[santris]

Hola a todos,
Aprovecho para presentarme en el foro y de paso felicitares por este magnifico foro.

Bien nauix26 creo que te falta un script.js que haga funcionar el menú, te dejo 3 scripts para que los estudies haber que te parecen.

index.html

<head>
<script type="text/javascript" src="script.js"></script>

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>

<body>
<div class="nav">
<ul class="artmenu">
<li><a href="#" class="{ActiveItem}"><span><span>Home</span></span></a></li>
<li><a href="#"><span><span>About</span></span></a>
<ul>
<li><a href="#">Photos</a></li>
<li><a href="#">Press</a></li>
</ul>
</li>
<li><a href="#"><span><span>Services</span></span></a></li>
<li><a href="#"><span><span>Solutions</span></span></a>
<ul>
<li><a href="#">Consulting</a>
<ul>
<li><a href="#">Lorem ipsum</a> </li>
<li><a href="#">Dolor sit amet</a> </li>
<li><a href="#">Consectetuer</a> </li>
</ul>
</li>
<li><a href="#">Training</a></li>
<li><a href="#">Analisys</a></li>
</ul>
</li>
<li><a href="#"><span><span>Contact</span></span></a></li>
</ul>
<div class="l">
</div>
<div class="r">
<div>
</div>
</div>
</div>
</body>
</html>








script.js

/* begin Menu */
function Insert_Separators()
{
var menus = xGetElementsByClassName("artmenu", document);
for (var i = 0; i < menus.length; i++) {
var menu = menus[i];
var childs = menu.childNodes;
var listItems = [];
for (var j = 0; j < childs.length; j++){
var el = childs[j];
if (String(el.tagName).toLowerCase() == "li")listItems.push(el);
}
for (var j = 0; j < listItems.length - 1; j++){
var span = document.createElement('span');
span.className = 'separator';
var li = document.createElement('li');
li.appendChild(span);
listItems[j].parentNode.insertBefore(li, listItems[j].nextSibling);
}
}
}
artLoadEvent.add(Insert_Separators);

/* end Menu */






style.css

/* begin Page */


body
{
margin: 0 auto;
padding: 0;
background-color: #39413D;
background-image: url('images/Page-BgTexture.jpg');
background-repeat: repeat-x;
background-attachment: fixed;
background-position: bottom left;
}

.Main
{
position: absolute;
width: 100%;
left: 0;
top: 0;
}





.cleared
{
float: none;
clear: both;
margin: 0;
padding: 0;
border: none;
font-size:1px;
}

.artmenu a, .artmenu a:link, .artmenu a:visited, .artmenu a:hover
{
text-align:left;
text-decoration:none;
outline:none;
letter-spacing:normal;
word-spacing:normal;
}

.artmenu, .artmenu ul
{
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}

.artmenu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background:none;
}

.artmenu li:hover
{
z-index: 10000;
white-space: normal;
}

.artmenu li li
{
float: none;
}

.artmenu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background:none;
}

.artmenu li:hover>ul
{
visibility: visible;
top: 100%;
}

.artmenu li li:hover>ul
{
top: 0;
left: 100%;
}

.artmenu:after, .artmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.artmenu, .artmenu ul
{
min-height: 0;
}

.artmenu ul
{
background-image: url(images/spacer.gif);
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}

.artmenu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}


/* menu structure */

.nav
{
position: relative;
margin: 0 auto;
width: 1000px;
height: 25px;
z-index: 100;
}

.artmenu
{
padding: 0px 0px 0px 0px;
}


.nav .l, .nav .r, .nav .r div
{
top: 0;
position: absolute;
z-index: -1;
overflow: hidden;
height: 25px;
}

.nav .l
{
left: 0;
right: 0px;
}


.nav .r
{
right: 0;
width: 0px;
}


.nav .r div
{
width: 1000px;
right: 0;
}


.nav .l, .nav .r div
{
background-position: left top;
background-repeat: no-repeat;
background-image: url('images/nav.png');
}

/* end Menu */

/* begin MenuItem */
.artmenu ul li
{
clear: both;
}

.artmenu a , .artmenu a span
{
height: 25px;
display: block;
}


.artmenu a
{
cursor: pointer;
text-decoration: none;
margin-right: 0px;
margin-left: 0px;

}
.artmenu a span span
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FE9D5D;
padding: 0 22px;
margin: 0 0px;
line-height: 25px;
text-align: center;
background-image: url('images/item-center.png');
background-position: left top;
background-repeat: repeat-x;

}




.artmenu a:hover span span
{
color: #EFF1F0;
background-position: left -25px;
}

.artmenu li:hover a span span
{
color: #EFF1F0;
background-position: left -25px;
}


/* end MenuItem */

/* begin MenuSeparator */
.nav .separator
{
display: block;
width: 1px;
height: 25px;
background-image: url('images/item-separator.png');
}

/* end MenuSeparator */

/* begin MenuSubItem */
.artmenu ul a
{
display:block;
text-align: center;
white-space: nowrap;
height: 21px;
width: 176px;
overflow:hidden;
line-height: 21px;
margin-right: auto;


background-image: url('images/subitem-bg.png');
background-position: left top;
background-repeat: repeat-x;

border-width: 1px;
border-style: solid;
border-color: #FE6601;
}

.nav ul.artmenu ul span, .nav ul.artmenu ul span span
{
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}

.artmenu ul a, .artmenu ul a:link, .artmenu ul a:visited, .artmenu ul a:hover, .artmenu ul a:active, .nav ul.artmenu ul span, .nav ul.artmenu ul span span
{
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 21px;
color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}

.artmenu ul ul a
{
margin-left: auto;
}

.artmenu ul li a:hover
{
color: #E9ECEB;
border-color: #FE8534;
background-position: 0 -21px;
}

.artmenu ul li:hover>a
{
color: #E9ECEB;
border-color: #FE8534;
background-position: 0 -21px;
}

.nav .artmenu ul li a:hover span, .nav .artmenu ul li a:hover span span
{
color: #E9ECEB;
}

.nav .artmenu ul li:hover>a span, .nav .artmenu ul li:hover>a span span
{
color: #E9ECEB;
}


/* end MenuSubItem */


Copialos en el mismo directorio y prueba.
salu2

[nauix26]

el css sabré meterlo, ahora lo pruebo, pero tengo que sobreescribir lo que ya tenia no?
los otros debo meterlos igual? sustituyendo lo que tengo por estos scripts? gracias!

[nauix26]

o no se demasiado (que es muy posible) o no funcionan:S pero de verdad muchas gracias por el esfuerzo.

[santris]

Hola nauix26,
Es posible que no funcione pues el codigo era demasiado largo y tube que recortarlo un poco además fata la carpeta images.
Si quieres ver un ejemplo completo visita mi página de plantillas gratuitas "3vdobles plantinet punto com" y descarga alguna plantilla html que tenga menus desplegables.
salu2

[uymeloolvide]

Toma, aqui tienes un ejemplo.. este es el codigo CSS + El Javascript para que funcione..

Código HTML:

<style type="text/css">

#nav {
	font-family:Verdana;
	font-size:12px;
	font-weight:bold;
	color:white }

#nav a:link, a:visited {
	text-decoration:none;
	font-family:Verdana;
	font-size:12px;
	font-weight:bold;
	color:white }

ul {
	list-style: none;
	margin:0}

li {
	float:left;
	position:relative;
	padding: 0 20px 0 0;
	width:auto;
	text-align:left;
	cursor:default;
	background-color: #CC0000 }

li ul {
	display:none;
	position:absolute;
	top: 100%;
	left: 0;
	font-weight:none;
	margin:0; }

li li {
	float:none;
	border-bottom: 1px solid #000099;
	background: #E1E9ED;
	width: 146px;
	padding-left:3px; }

li ul ul {/*second level dropdown*/
	margin: -2em 0 0 172px; }



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 {
	display:block }

</style>

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

Con el codigo de la lista que has puesto.. solo que le puse nav en vez de menu.. lo demas sacalo, me da paja sacar todos los enlacemenu xD

Código HTML:

<ul id="nav"> 
<li><a href="#" class="enlacemenu" id="primero">Inici</a></li> 
<li><a href="#" class="enlacemenu">Plantilla</a></li> 
<li><a href="#" class="enlacemenu">Calendari</a> 
<ul> 
<li><a href="#" class="enlacemenu">Agost '09</a></li> 
<li><a href="#" class="enlacemenu">Setembre '09</a></li> 
<li><a href="#" class="enlacemenu">Octubre '09</a></li> 
<li><a href="#" class="enlacemenu">Novembre '09</a></li> 
<li><a href="#" class="enlacemenu">Desembre '09</a></li> 
<li><a href="#" class="enlacemenu">Gener '10</a></li> 
<li><a href="#" class="enlacemenu">Febrer '10</a></li> 
<li><a href="#" class="enlacemenu">Març '10</a></li> 
<li><a href="#" class="enlacemenu">Abril '10</a></li> 
<li><a href="#" class="enlacemenu">Maig '10</a></li> 
<li><a href="#" class="enlacemenu">Juny'10</a></li>						 
</ul> 
</li> 
<li><a href="#" class="enlacemenu">Classificació</a> 
<ul> 
<li><a href="#" class="enlacemenu">LLiga</a></li> 
<li><a href="#" class="enlacemenu">Champions League</a></li> 
<li><a href="#" class="enlacemenu">Copa del Rei</a></li>					 
</ul> 
</li> 
<li><a href="#" class="enlacemenu">Multimèdia</a> 
<ul> 
<li><a href="#" class="enlacemenu">Fotografies '09/10</a></li> 
<li><a href="#" class="enlacemenu">Videos '09/10</a></li> 
<li><a href="#" class="enlacemenu">Videos Històrics</a></li>	 
<li><a href="#" class="enlacemenu">Fons de Pantalla</a></li>					 
</ul> 
</li> 
<li><a href="#" class="enlacemenu">Palmarès</a></li> 
<li><a href="#" class="enlacemenu">Premsa</a> 
<ul> 
<li><a href="#" class="enlacemenu">Titulars</a></li> 
<li><a href="#" class="enlacemenu">Cròniques</a></li>	 
</ul>	 
</li> 
<li><a href="#" class="enlacemenu">Contacta</a></li> 
</ul> 

Bueno y tu en el css lo modificas con los colores y eso.. pero por que pides esto? si en tu pagina ya tienes un desplegable :S

[jomaruro]

Hola:

Iniciado por nauix26

lo prové, pero no me funcionó. La putada es que con el menú sin desplegar estava perfecto perfecto! no se que hacer, no quiero poner uno de predeterminado porque no pegan nada los colores..

Gracias igualmente!

Prueba este enlace y fíjate como está formada la URL para que otra vez sepas localizar un archivo que te interese, es fácil:

1º la URL de la página, en este caso: www.araudi.net
2º en el código te indica: css/menu-1.css, solo tienes que concatenarla y el resultado es http://www.araudi.net/Desplegables/css/menu-1.css

Saludos.

[Maktotal]

Amigo, todos se están esmerando en ayudarte y como tu dices, eres novato, no entiendes nada del código que te pasaron, pues mi sugerencia es que si no tienes el dreamweaver CS3 o CS4 lo bajes, puesto que este poderoso editor viene con varios tipos de menu desplegables editables con CSS. Yo te podria pasar un menu desplegables pero si no sabes como adaptarlo a tus necesidades seria en vano. Mi segunda sugerencia y la mas importante es que leas alguno tutoriales de javascript, PHP y CSS, al menos para que tengas un minimo conocimiento y asi cada vez que te pasen un script completo lo sabras modificar a tu antojo.!
Suerte y saludos!

[nauix26]

bueno, gracias a todo! lo den dreamweaver no me lo vajo porque uso ubuntu, y no me gusta usar emuladores.

la verdad es que al final me salió. Mirando mas ejemplos y sobretodo probando y probando. el css ya estoy empezando a cojerle el tranquillo y el html ya lo tengo mas por mano.. creeis que es de gran utilidad aprender java i/o php? para que sirve cada uno? gracias a todos!

[Kiven]

Si sabes ingles en Youtube hay MILES de videos que te pueden ayudar

[jomaruro]

Hola:

Iniciado por nauix26

creeis que es de gran utilidad aprender java i/o php? para que sirve cada uno?

No conozco el java, pero el php es un lenguaje del lado del servidor, es decir se ejecuta en el servidor enviando a tu pc una página html y no lo necesitas si no vas a trabajar con bases de datos, por ejemplo.

Saludos.