Menu desplegable sencillito

kelel · #1 (**permalink**) 09/06/2008, 02:25

Hola, a todos, estoy empezando a tontear con Javascript, aunque la verdad es que aún no tengo mucha idea, de momento necesito saber como se implementaria un sencillo menu desplegable, sin florituras, lo más basico.

Muchas gracias y un saludo.

PD: ¿Algún enlace a un manual para iniciarse que este chulo?

wanchankein · #2 (**permalink**) 09/06/2008, 03:09

has probado hacerlo en CSS?

Saludos.

kelel · #3 (**permalink**) 09/06/2008, 03:20

Pues ni idea, no sabia que se pudiera hacer, ¿es mas sencillo o mas limpio?, ¿como se hace?.

Mmm, aunque por lo que veo no funciona con Internet Explorer 6, y eso me hace falta, ¿se puede solucionar?

wanchankein · #4 (**permalink**) 09/06/2008, 03:31

con explorer 6 si que funciona, algun problemilla tendrás con las superposiciones si no lo haces bien, pero yo tengo uno hecho en CSS y funciona el IE 6, 7 y Firefox.

Y es mas facil de programar que en javascript.

Paste por la seccion de CSS y veras que hay muchas cosas.

Busca en google a stu nichols y en su pagina hay muchos ejemplos que podras bajar.

Saludos.

kelel · #5 (**permalink**) 09/06/2008, 05:02

Vale guay, pero como me descargo el código de este ejemplo (http://www.cssplay.co.uk/menus/basic_dd.html)??, ¿Viendo el código fuente a pelo?.

wanchankein · #6 (**permalink**) 09/06/2008, 05:11

Con el boton derecho en ver codigo fuente puedes ver el menu de la pagina, lo he echo y he quitado lo que no interesaba.

Aqui tienes el codigo CSS para poner dentro de las etiquetas <head> de tu pagina

Código:

<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/basic_dd.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}

/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}

/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
width:149px;
padding:7px 0;
color:#000;
background:#949e7c;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:#444;
background:#d4d8bd;
}

/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}


</style>

Esto seria el menu, solo modifica los nombres de las secciones y los links y ya está.

Código HTML:

<body>

<div class="menu">

<ul>
<li><a href="menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
	<li><a href="menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
	<li><a href="menu/form.html" title="Styling forms">styled form</a></li>

	<li><a href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
	<li><a href="menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
	<li><a href="menu/old_master.html" title="Image Map for detailed information">image map</a></li>
	<li><a href="menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
	<li><a href="menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
	<li><a href="menu/em_images.html" title="em size images compared">em sized images</a></li>

	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="index.html">MENUS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>

	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="layouts/index.html">LAYOUTS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
	<li><a href="layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
	<li><a href="layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
	<li><a href="layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>

	<li><a href="layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>

	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a  href="mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
	<li><a href="mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
	<li><a href="mozilla/content.html" title="Using content:">content:</a></li>

	<li><a href="mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
	<li><a href="mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
	<li><a href="mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
	<li><a href="mozilla/target.html" title="Target Practise">target practise</a></li>
	<li><a href="mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
	<li><a href="mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>

	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>
</div>
</div>
<!-- end of info -->
<br class="clear" />
</div> <!-- end of showcase -->
<!-- end of content -->
</div> 
	<!-- end of wrapper -->
</body>

Igualmente si tienes cualquier pregunta de CSs mejor pasate por la seccion especifica del foro.

Saludos