Foros del Web » Creando para Internet » CSS »

Menus Desplegables

 Estas en el tema de Menus Desplegables en el foro de CSS en Foros del Web. Hola amigos!! quiero implementar el siguiente menu en mi página web, pero soy nuevo en esto, alguien me puede ayudar?? así es como quiero que ...
  #1 (permalink)  
Antiguo 21/03/2006, 17:23
Avatar de ivangar  
Fecha de Ingreso: septiembre-2005
Ubicación: méxico df
Mensajes: 99
Antigüedad: 18 años, 6 meses
Puntos: 0
Menus Desplegables
Hola amigos!! quiero implementar el siguiente menu en mi página web, pero soy nuevo en esto, alguien me puede ayudar??

así es como quiero que quede:

http://www.cssplay.co.uk/menus/dd_valid.html

muchas gracias!!
  #2 (permalink)  
Antiguo 21/03/2006, 18:56
Avatar de ivangar  
Fecha de Ingreso: septiembre-2005
Ubicación: méxico df
Mensajes: 99
Antigüedad: 18 años, 6 meses
Puntos: 0
A Ver...
no entendí tu respuesta pero la siento agresiva mi hermano!! si entro aqui es porque no entiendo algunas cosas no para que te burles....
  #3 (permalink)  
Antiguo 21/03/2006, 20:36
Avatar de Lucios  
Fecha de Ingreso: marzo-2006
Ubicación: USA
Mensajes: 93
Antigüedad: 18 años
Puntos: 1
el manual lo quitare en 24 horas de la pagina

Saludos Lucios...
__________________
En mi casa he reunido juguetes pequeños y grandes, sin los cuales no podría vivir. El niño que no juega no es niño, pero el hombre que no juega perdió para siempre al niño que vivía en él y que le hará mucha falta.
Pablo Neruda
  #4 (permalink)  
Antiguo 22/03/2006, 00:35
Avatar de kahlito
Colaborador
  
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años, 1 mes
Puntos: 65
Hola, suponiendo que lo que quieres hacer es el menú que se explica ahí solo tendrias que seguir lo que te indica, fijate que te dice donde está el xhtml por un lado y luego las dos hojas de estilos que carga desde fuera:

Xhtml
Css
Css para Iexplorer

Y bueno viendo que eres nuevo te pongo un ejemplo de como puede quedar al final:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba</title>
</head>
<link rel="stylesheet" media="all" type="text/css" href="css_todos.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css_iexplorer.css" />
<![endif]-->
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<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 class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>

    <!--[if lte IE 6]>
    <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
    <table><tr><td>
    <![endif]-->

		<ul>
			<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/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>

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

	</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 class="hide" href="index.html">MENUS</a>

<!--[if lte IE 6]>
<a href="index.html">MENUS
<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 class="hide" href="../layouts/index.html">LAYOUTS</a>

<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<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 class="hide" href="../boxes/index.html">BOXES</a>

<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<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 class="hide" href="../mozilla/index.html">MOZILLA</a>

<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<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>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
	<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
	<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
	</ul>

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

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
	<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
	<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
	<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
	<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK</a>

    <!--[if lte IE 6]>
    <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK
    <table><tr><td>
    <![endif]-->

		<ul class="left">
			<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/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>

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

	</li>
	</ul>

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

</li>
</ul>

</div>
</body>
</html>
Lo más importante es que los dos archivos css se llaman desde una hoja externa, a la primera como css_todos.css y para Iexplorer por ejemplo css_iexplorer.css, los dos en la misma ruta los cuales puedes cambiar a tu manera, ahora quedarían así:

<link rel="stylesheet" media="all" type="text/css" href="css_todos.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css_iexplorer.css" />
<![endif]-->

Saludosss
  #5 (permalink)  
Antiguo 22/03/2006, 03:21
Avatar de Lucios  
Fecha de Ingreso: marzo-2006
Ubicación: USA
Mensajes: 93
Antigüedad: 18 años
Puntos: 1
Cita:
Iniciado por ivangar
no entendí tu respuesta pero la siento agresiva mi hermano!! si entro aqui es porque no entiendo algunas cosas no para que te burles....
eso no es haci mi querido amigo lo ciento en que no este de acuerdo con tigo.

Primero no me he burlado de ti
segundo lo que te dijimos es que si te puedes esperar 20 minutos que te hariamos un manual pero veo que tu no lo nesecitas ya que tu estas con ganas de molestar lo ciento mucho haberte ayudado
en el futuro te rogaria buscarte la vidad por tu propiacuenta o buscar en google ya que el manual esta hecho lo dejare alli

Saludos Lucios....
__________________
En mi casa he reunido juguetes pequeños y grandes, sin los cuales no podría vivir. El niño que no juega no es niño, pero el hombre que no juega perdió para siempre al niño que vivía en él y que le hará mucha falta.
Pablo Neruda
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:06.