View original (French)

Dropdown menu with + and - Kompozer

Solved
Isobel -  
RAD ZONE Posted messages 5362 Status Contributor -
Bonjour,

I would like to create a dropdown menu on my site but without a scrollbar. I want users to be able to click on my link, have the text unfold below, and be able to fold it back at will, like with the + and -. I'm not sure if I'm being clear.

How to do it?

Thank you in advance.

3 answers

  1.
    RAD ZONE Posted messages 5362 Status Contributor 1 360
     
    Hello

    Here is a solution to adapt to what you want, but it's the principle !!

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

    or in pure CSS!

    example 
    <!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+

    ? The greatest mistake a man can make is to be afraid of making one. ?
    0
  2. Isobel
     
    Oops, I replied to the link you gave me...

    It's exactly what I was looking for!

    Thank you, thank you, and thank you again! Have a very good evening.
    0
  3. Isobel
     
    Rad zone, if you ever pass by...

    I have a small issue. I used the one from the link you gave me, which I adapted with my text, but I can't seem to "paste" the different texts one after the other, otherwise the texts "cancel" each other out. I'm not really sure how to explain this...

    In fact, I took exactly what you created and I wanted to copy and paste it in a row so that I just had to replace the text each time, but it doesn't work.

    Help!
    0
    1. RAD ZONE Posted messages 5362 Status Contributor 1 360
       
      Hi

      it must be a problem with the declaration of "sub" or the text ID!?
      do you have a link so I can check it out!?

      or the complete code of your page!!

      See you +
      0