Menu

Menu déroulant vertical HTML CSS gauche [Résolu]

Messages postés
30
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
20 avril 2019
-
Afficher la suite 

Votre réponse

4 réponses

0
Merci
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%;
}

Commenter la réponse de Zero
Messages postés
30
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
20 avril 2019
0
Merci
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 ?
Commenter la réponse de MaxBMX17
0
Merci
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.
Commenter la réponse de Zero
Messages postés
30
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
20 avril 2019
0
Merci
Le code que tu m'a donné place le menu à droite, je le veux à gauche avec le texte à côté
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>


MaxBMX17
Messages postés
30
Date d'inscription
vendredi 23 novembre 2018
Statut
Membre
Dernière intervention
20 avril 2019
-
Yes, Merci ça marche, super
Commenter la réponse de MaxBMX17