Menú desplegable con + y - KompoZer

Resuelto
Isobel -  
RAD ZONE Mensajes publicados 5362 Estado Colaborador -
Hola,

Me gustaría crear un menú desplegable en mi sitio, pero no con una barra de desplazamiento. Quisiera que se pueda hacer clic en mi enlace, que el texto se despliegue abajo y que se pueda volver a comprimir a gusto. Como con los + y -. No sé si soy claro/a.

¿Cómo hacerlo?

Gracias de antemano.

3 respuestas

  1. RAD ZONE Mensajes publicados 5362 Estado Colaborador 1 360
     
    hola

    aquí tienes una solución para adaptar a lo que quieres, ¡pero es el principio!!

    https://forums.commentcamarche.net/forum/affich-6822882-texte-deroulant#6

    o en CSS puro !

    ejemplo
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Horizontal </title> <style type="text/css"> /*<![CDATA[*/ body{ margin:10px; padding:0; font-family:Arial,Helvetica,sans-serif } #dropdown{ margin:0; padding:0px; list-style:none; background:url(images/bg.gif) repeat-x top; height:28px; width:99%; border:solid 1px #c93300; border-width:1px 1px 1px 0; background-color: #FF9900 } #dropdown li{ display:inline; position:relative; float:left } #dropdown li a{ display:block; float:left; height:29px; line-height:29px; padding:0 25px; text-decoration:none; color:#fff; font-weight:normal; font-size:12px; border-left:solid 1px #c93300 } #dropdown li a:hover{ color:#a9401b; background:#fff } #dropdown li ul{ margin:0; padding:0 5px; line-height:none; position:absolute; top:29px; left:0; border:solid 1px #c93300; border-width:0px 1px 1px 1px; width:180px; display:none; background:#fff } #dropdown li:hover ul{ display:block } #dropdown li:hover a{ color:#a9401b; background:#fff } #dropdown li ul li{ display:block; border-bottom:solid 1px #dbdcd9; width:100%; background:url(images/arrow.gif) no-repeat 3px 12px; padding:0 0 0 10px } #dropdown li ul li:last-child{ border-bottom:0px } #dropdown li ul a{ border-width:0px; color:#909090; padding:0 5px 0 0; background-color:transparent } #dropdown li:hover ul li a{ color:#909090 } #dropdown li ul li a:hover{ color:#a9401b } /*]]>*/ </style> </head> <body> <ul id="dropdown"> <li> <a href="#" title="horizontal css menu">horizontal css menu</a> <ul> <li> <a href="#">sub menu</a> </li> <li> <a href="#">sub menu</a> </li> <li> <a href="#">sub menu</a> </li> <li> <a href="#">sub menu</a> </li> </ul> </li> <li> <a href="#" title="css menu">css menu</a> <ul> <li> <a href="#">sub menu</a> </li> <li> <a href="#">sub menu</a> </li> <li> <a href="#">sub menu</a> </li> <li> <a href="#">sub menu</a> </li> </ul> </li> <li> <a href="#" title="only css menu">css menu</a> <ul> <li> <a href="#">sub menu</a> </li> <li> <a href="#">sub menu</a> </li> <li> <a href="#">sub menu</a> </li> <li> <a href="#">sub menu</a> </li> </ul> </li> <li> <a href="#" title="css menu">css menu</a> </li> </ul> </body> </html>


    a+

    ? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?
    0
  2. Isobel
     
    Ups, respondí en el enlace que me diste...

    ¡Es exactamente lo que buscaba!

    ¡Muchas, muchas gracias! Que tengas una muy buena noche.
    0
  3. Isobel
     
    Zona Rad, por si acaso pasas por aquí...

    Tengo un pequeño problema. Usé el que me diste en el enlace, lo adapté con mi texto, pero no logro pegar los diferentes textos uno tras otro sin que los textos “se anulen” entre sí. No sé muy bien cómo explicarlo...

    De hecho, retomé exactamente lo que tú creaste y quería copiarlo y pegarlo seguido para solo reemplazar el texto cada vez, pero no funciona.

    ¡Ayuda!
    0
    1. RAD ZONE Mensajes publicados 5362 Estado Colaborador 1 360
       
      hola

      debe ser un problema de declaración de "sub" o de id del texto !?
      ¿tendrías un enlace para verlo?

      o el código completo de tu página !!

      A+
      0