Menu déroulant avec + et - Kompozer

Résolu
Isobel -  
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

Je souhaiterais créer un menu déroulant sur mon site mais pas avec une barre de défilement. J'aimerais qu'on puisse cliquer sur mon lien, que le texte se déplie en-dessous, et qu'on puisse le replier à sa guise. Comme avec les + et -. Je ne sais pas si je suis claire.

Comment faire ?

Merci d'avance.
A voir également:

3 réponses

Réponse 1 / 3
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
salut

voila une solution a adapter a ce que tu veux,mais c est le principe !!

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

ou en CSS pure !

exemple 
<!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
Réponse 2 / 3
Isobel
 
Oups j'ai répondu sur le lien que tu m'as donné...

C'est exactement ce que je cherchais !

Merci, merci et re-merci ! Très bonne soirée à vous.
0
Réponse 3 / 3
Isobel
 
Rad zone, si jamais tu passes par là...

J'ai un petit souci. J'ai utilisé celui du lien que tu m'as donné, que j'ai adapté avec mon texte, mais je ne parviens pas à "coller" les différents textes que j'ai les uns à la suite des autres sinon les textes "s'annulent" entre eux. Je ne sais pas trop comment expliquer cela...

En fait, j'ai repris exactement ce que tu as créé et je voulais le copier coller à la suite pour n'avoir qu'à remplacer le texte à chaque fois, mais cela ne marche pas.

À l'aide !
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
salut

ce doit etre un probleme de declaration de "sub" ou d id du texte !?
tu aurais un lien que je vois ca !?

ou le code complet de ta page !!

A+
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
menu caché
laurent -
ChariduP -

7 réponses
supprimer une liste déroulante
fred94 -
m@rina -

3 réponses