Menu déroulant avec + et - Kompozer

Résolu/Fermé
Signaler
-
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
-
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.

3 réponses

Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 343
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
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
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
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 343
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