Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Menus Desplegables (http://www.forosdelweb.com/f53/menus-desplegables-380091/)

ivangar 21/03/2006 17:23
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!! :-D

ivangar 21/03/2006 18:56
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....

Lucios 21/03/2006 20:36
:policia: el manual lo quitare en 24 horas de la pagina

Saludos Lucios...

kahlito 22/03/2006 00:35
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 :adios:

Lucios 22/03/2006 03:21
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....
:molesto: eso no es haci mi querido amigo lo ciento en que no este de acuerdo con tigo.

:abajo: :abajo: 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 :molesto: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....


La zona horaria es GMT -6. Ahora son las 19:05.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.