Sujet Précédent Sujet Suivant

Menu déroulant vertical HTML CSS gauche

Résolu/Fermé
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 - Modifié le 9 avril 2019 à 14:55
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 - 12 avril 2019 à 12:51
Bonjour,

J'ai déjà créer un menu déroulant : https://forums.commentcamarche.net/forum/affich-35711363-menu-deroulant-html-css#p35712412

Je voudrais faire de même, mais à gauche : https://www.pierre-giraud.com/html-css-apprendre-coder-cours/
A voir également:

4 réponses

Réponse 1 / 4
Zero
10 avril 2019 à 11:40
Hello,

Je ne sais pas si tu parles du sommaire mais pour le mettre à gauche il faut :

Placer la div.sommaire-wrapper après la div.cours-wrapper 
<div class="cours-wrapper"></div>
<div class="sommaire-wrapper"></div>


Modifier le CSS 

.cours-container3 {
    float: left;
    width: 100%;
    position: relative;
    left: 75%;
    border-right: 1px solid #EEE;
    background-color: #c4733d;
}
.sommaire-wrapper, .cours-wrapper, .right-colomn-wrapper {
    float: left;
    position: relative;
    right: 75%;
}
0
Réponse 2 / 4
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 1
10 avril 2019 à 19:43
Mon menu déroulant vertical :

HTML : 

<ul id="menu-accordeon">
   <li><a href="#">Lien menu 1</a>
      <ul>
         <li><a href="#">lien sous menu 1</a></li>
         <li><a href="#">lien sous menu 1</a></li>
         <li><a href="#">lien sous menu 1</a></li>
         <li><a href="#">lien sous menu 1</a></li>
      </ul>
   </li>
    <li><a href="#">Lien menu 2</a>
      <ul>
         <li><a href="#">Lien sous menu 2</a></li>
         <li><a href="#">Lien sous menu 2</a></li>
         <li><a href="#">Lien sous menu 2</a></li>
         <li><a href="#">Lien sous menu 2</a></li>
      </ul>
   </li>
   <li><a href="#">Lien menu 3</a>
      <ul>
         <li><a href="#">Lien sous menu 3</a></li>
         <li><a href="#">Lien sous menu 3</a></li>
         <li><a href="#">Lien sous menu 3</a></li>
         <li><a href="#">Lien sous menu 3</a></li>
      </ul>
   </li>
</ul>


CSS : 

#menu-accordeon {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  width: 180px;
}
#menu-accordeon ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
}
#menu-accordeon li {
   background-color:#729EBF; 
   background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
   background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
   border-radius: 6px;
   margin-bottom:2px;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #333A40
}
#menu-accordeon li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
   background: #444;
   box-shadow: none;
   border:none;
   margin:0
}
#menu-accordeon a {
  display:block;
  text-decoration: none;
  color: #fff;
  padding: 8px 0;
  font-family: verdana;
  font-size:1.2em
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size:1em
}
#menu-accordeon li:hover {
   background: #729EBF
}
#menu-accordeon li li:hover {
   background: #999;
}
#menu-accordeon ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
#menu-accordeon li:hover li {
  max-height: 15em;
}


Je modifie quoi, ça marche pas ?
0
Réponse 3 / 4
Zero
11 avril 2019 à 08:37
Salut ,

J'ai 2 solutions : 
#menu-accordeon {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    width: 180px;
    float: right;
}


OU 

#menu-accordeon {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    width: 180px;
    position: absolute;
    right: 0;
}


Tout dépend de l'agencement de ta page.
0
Réponse 4 / 4
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 1
11 avril 2019 à 18:12
Le code que tu m'a donné place le menu à droite, je le veux à gauche avec le texte à côté
0
Zero
12 avril 2019 à 10:07
J'ai lu trop vite... 

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">
      #menu-accordeon {
        padding:0;
        margin:0;
        list-style:none;
        text-align: center;
        width: 12%;
        float: left;
      }
      #menu-accordeon ul {
        padding:0;
        margin:0;
        list-style:none;
        text-align: center;
      }
      #menu-accordeon li {
         background-color:#729EBF; 
         background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
         background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
         border-radius: 6px;
         margin-bottom:2px;
         box-shadow: 3px 3px 3px #999;
         border:solid 1px #333A40
      }
      #menu-accordeon li li {
         max-height:0;
         overflow: hidden;
         transition: all .5s;
         border-radius:0;
         background: #444;
         box-shadow: none;
         border:none;
         margin:0
      }
      #menu-accordeon a {
        display:block;
        text-decoration: none;
        color: #fff;
        padding: 8px 0;
        font-family: verdana;
        font-size:1.2em
      }
      #menu-accordeon ul li a, #menu-accordeon li:hover li a {
        font-size:1em
      }
      #menu-accordeon li:hover {
         background: #729EBF
      }
      #menu-accordeon li li:hover {
         background: #999;
      }
      #menu-accordeon ul li:last-child {
         border-radius: 0 0 6px 6px;
         border:none;
      }
      #menu-accordeon li:hover li {
        max-height: 15em;
      }
      .fl {
          float: left;
          width: 80%;
          margin-left: 20px;
      }
   </style>
</head>
<body>
   <ul id="menu-accordeon">
      <li><a href="#">Lien menu 1</a>
         <ul>
            <li><a href="#">lien sous menu 1</a></li>
            <li><a href="#">lien sous menu 1</a></li>
            <li><a href="#">lien sous menu 1</a></li>
            <li><a href="#">lien sous menu 1</a></li>
         </ul>
      </li>
       <li><a href="#">Lien menu 2</a>
         <ul>
            <li><a href="#">Lien sous menu 2</a></li>
            <li><a href="#">Lien sous menu 2</a></li>
            <li><a href="#">Lien sous menu 2</a></li>
            <li><a href="#">Lien sous menu 2</a></li>
         </ul>
      </li>
      <li><a href="#">Lien menu 3</a>
         <ul>
            <li><a href="#">Lien sous menu 3</a></li>
            <li><a href="#">Lien sous menu 3</a></li>
            <li><a href="#">Lien sous menu 3</a></li>
            <li><a href="#">Lien sous menu 3</a></li>
         </ul>
      </li>
   </ul>
   <div class="fl">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget magna tincidunt, volutpat augue et, porta nisl. In rhoncus massa lorem, sit amet sollicitudin quam mollis non. Cras imperdiet tortor quis accumsan faucibus. Suspendisse potenti. Curabitur gravida viverra rhoncus. Vestibulum viverra, metus vitae feugiat lobortis, lectus metus rhoncus erat, vitae rhoncus nisi nunc in est. Nam hendrerit, eros sit amet vestibulum varius, sem odio mollis velit, id sagittis nisl nibh a tellus. Donec consequat sodales velit, et maximus orci dictum ac.

      Phasellus nunc risus, mollis ac efficitur interdum, ullamcorper non dui. Nulla facilisi. Vestibulum vitae nisl vel nulla aliquam fringilla et id mauris. Phasellus pulvinar, sem id auctor rutrum, sem augue dictum arcu, a interdum mauris nulla sed dui. Morbi sodales feugiat accumsan. Vivamus id scelerisque neque, vitae efficitur elit. Quisque ullamcorper tellus nunc, quis suscipit nibh pharetra vel. Etiam neque risus, tincidunt id mauris eu, scelerisque scelerisque odio. In volutpat turpis vitae justo mattis, at gravida nunc rhoncus. Phasellus condimentum sit amet sapien malesuada pellentesque. Integer pharetra, massa vitae convallis convallis, arcu nisi iaculis odio, et hendrerit arcu ipsum in lorem. Duis consectetur elit et libero egestas, quis semper sapien facilisis.

      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse elit massa, sagittis eu augue nec, tincidunt fringilla tellus. Integer laoreet facilisis gravida. Aenean metus metus, consectetur sed ipsum id, laoreet ultrices sapien. Donec eu metus sed dolor eleifend fermentum nec et tortor. Etiam blandit magna et lectus tempus, in condimentum ligula mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

      In eu orci ut nisi facilisis fringilla. Sed suscipit libero interdum, congue neque at, viverra ipsum. Donec hendrerit metus nisl, eget efficitur lorem venenatis pulvinar. Duis non dignissim arcu. Donec nec sapien ac arcu dapibus auctor. Curabitur cursus mauris turpis, nec tempor nisl malesuada quis. Integer congue sit amet massa et ultricies. Morbi sed tincidunt arcu. Vivamus sagittis tellus at nibh maximus, vel laoreet ipsum laoreet.

      Praesent sed erat accumsan, tincidunt eros a, egestas dui. Morbi ac enim egestas, vulputate elit eget, faucibus dui. Proin elementum tristique accumsan. Curabitur commodo leo cursus rutrum egestas. Nulla aliquam vitae est vel tristique. Proin ut elementum tellus. Vivamus ultricies nec urna quis iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean eu tristique turpis. Ut id quam diam. Suspendisse dapibus leo ac feugiat porta. Phasellus eu nisi dolor. Nam molestie quis odio sed tincidunt.
</div>
</body>
</html>
0
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 1
12 avril 2019 à 12:51
Yes, Merci ça marche, super
0

Discussions similaires

Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
le signe " | " dans excel
zed -
Utilisateur anonyme -

4 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Barre verticale droite sur clavier mac
oui -
jeanbern -

1 réponse
Touche du clavier barre verticale
k_lou -
Architecte_300 -

6 réponses