Sous menu qui ne s'affiche pas par TheoMezier - page 1

Bonjour,

Voilà je souhaite faire un menu qui affiche des sous menu lorsqu'on passe la souris dessus, j ai bien configuré la chose avec des :hover et tout mais sur une icone ça marche moyen sur une autre ça marche et pour les autres ça fonctionne niquel.

L'un de vous est il assez calé pour me conseiller la dessus ?

Pour précision j'ai chopé une partie de code sur le site frontend et je l'ai bricolé façon Frankenstein, mais dans l'ensemble ça tient debout.

Voici le code :

Javascript :

$(document).ready(function() {

  $(".trigger").click(function() {

$(".menu").toggleClass("active");

  });

});

CSS :

/* CSS pour le menu */

*, *:before, *:after {

  box-sizing: border-box;

margin: 0;

  padding: 0; }

.img_menu ~ .sous_menu

{

  visibility:hidden;

}

.img_menu ~ .sous_menu1

{

  visibility:hidden;

}

.cadre

{

border: 2px solid black;

}

.img_menu

{

  /*max-width: 100%;*/

  width:50px;

  height: auto;

  position: absolute;

      top: 50%;

    left: 50%;

}

.img_menu:hover

{

  transform: scale(2,2);

  z-index:-1000

}

.img_menu:hover ~ .sous_menu

{

  visibility:visible;

  z-index:100;

}

.img_menu:hover ~ .sous_menu1

{

  visibility:visible;

  z-index:100;

}

.lien

{

font-size:0.5em;

color: #000000;

position: relative;

 padding:1%;

margin:5%;

}

.cadre:hover

{

background-color:white;

}

.sous_menu1

{

                padding:5%;

left:90%;

z-index:100;

                position: relative;

   background-color: #AAB2B1;

width: 230%;

text-align: center;

}

.sous_menu

{

 position: relative;

   background-color: #AAB2B1;

padding:5%;

left:80%;

z-index:100;

width: 230%;

text-align: center;

}

.sous_menu:hover

{

visibility:visible;

z-index:1000

}

.absolute-center, .menu, .menu .btn .fa, .menu .btn.trigger .line {

  position: absolute;

  top: 31%;

  left: 6%;

  transform: translateX(-50%) translateY(-50%); }

.menu {

  width: 5em;

  height: 5em; }

  .menu .btn {

    position: absolute;

    top: 0;

   left: 0;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    opacity: 0;

    z-index: -10;

    cursor: pointer;

    transition: opacity 1s, z-index 0.3s, transform 1s;

    transform: translateX(0); }

    .menu .btn .fa {

      font-size: 3em;

      transition: color 0.3s; }

    .menu .btn:hover .fa {

      color: rgba(255, 255, 255, 0.7); }

    .menu .btn.trigger {

      opacity: 1;

      z-index: 100;

      cursor: pointer;

      transition: transform 0.3s; }

        .menu .btn.trigger:hover .line {

          background-color: rgba(255, 255, 255, 0.7); }

          .menu .btn.trigger:hover .line:before, .menu .btn.trigger:hover .line:after {

            background-color: rgba(255, 255, 255, 0.7); }

      .menu .btn.trigger .line {

        width: 60%;

        height: 6px;

        background: #000;

        border-radius: 6px;

        transition: background-color 0.3s, height 0.3s, top 0.3s; }

        .menu .btn.trigger .line:before, .menu .btn.trigger .line:after {

          content: "";

          display: block;

          position: absolute;

          left: 0;

          width: 100%;

          height: 6px;

          background: #000;

          border-radius: 6px;

          transition: background-color 0.3s, transform 0.3s; }

        .menu .btn.trigger .line:before {

          top: -12px;

          transform-origin: 15% 100%; }

        .menu .btn.trigger .line:after {

          top: 12px;

          transform-origin: 25% 30%; }

  .menu .rotater {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    transform-origin: 50% 50%; }

  .menu.active .btn-icon {

    opacity: 1;

    z-index: 50; }

  .menu.active .trigger .line {

    height: 0px;

    top: 45%; }

    .menu.active .trigger .line:before {

      transform: rotate(45deg);

      width: 110%; }

    .menu.active .trigger .line:after {

      transform: rotate(-45deg);

      width: 110%; }

/* .rotater:nth-child(1) { */

  /* transform: rotate(-22.5deg); } */

/* .menu.active .rotater:nth-child(1) .btn-icon { */

  /* transform: translateY(-10em) rotate(22.5deg); } */

.rotater:nth-child(1) {

  transform: rotate(22.5deg); }

.menu.active .rotater:nth-child(1) .btn-icon {

  transform: translateY(-10em) rotate(-22.5deg); }

.rotater:nth-child(2) {

  transform: rotate(67.5deg); }

.menu.active .rotater:nth-child(2) .btn-icon {

  transform: translateY(-10em) rotate(-67.5deg); }

.rotater:nth-child(3) {

  transform: rotate(112.5deg); }

.menu.active .rotater:nth-child(3) .btn-icon {

  transform: translateY(-10em) rotate(-112.5deg); }

.rotater:nth-child(4) {

  transform: rotate(157.5deg); }

.menu.active .rotater:nth-child(4) .btn-icon {

  transform: translateY(-10em) rotate(-157.5deg); }

.rotater:nth-child(5) {

  transform: rotate(202.5deg); }

.menu.active .rotater:nth-child(5) .btn-icon {

   transform: translateY(-10em) rotate(-202.5deg); }

/* .rotater:nth-child(7) { */

  /* transform: rotate(247.5deg); } */

/* .menu.active .rotater:nth-child(7) .btn-icon { */

  /* transform: translateY(-10em) rotate(-247.5deg); } */

/* .rotater:nth-child(8) { */

  /* transform: rotate(292.5deg); } */

/* .menu.active .rotater:nth-child(8) .btn-icon { */

  /* transform: translateY(-10em) rotate(-292.5deg); } */

/*# sourceMappingURL=menu.css.map */

HTML :

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>Titre</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="menu.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" >
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
</head>

<div class="menu">

  <div class="btn trigger">

    <span class="line"></span>

  </div>

  <div class="icons">

    <div class="rotater">

      <div class="btn btn-icon">

        <i class="fa">

                               <img class="img_menu" src="ressource/accueil.png"/>

<div class="sous_menu1">

                                               <div class="cadre"><a class="lien" href="index.php?page=accueil">Accueil</a></div>

                               </div>

                               </i>

      </div>

    </div>

    <div class="rotater">

      <div class="btn btn-icon">

        <i class="fa">

                               <img class="img_menu" src="ressource/profil.png"/>

                               <div class="sous_menu1">

                                               <div class="cadre"><a class="lien" href="index.php?page=formation">Formation</a></div><br/>

                                               <div class="cadre"><a class="lien" href="index.php?page=parcours">Parcours professionnel</a></div>

                               </div>

                               </i>

                </div>

    </div>

    <div class="rotater">

      <div class="btn btn-icon">

        <i class="fa">

                               <img class="img_menu" src="ressource/creation.png"/>

                               <div class="sous_menu">

                                               <div class="cadre"><a class="lien" href="index.php?page=projets">Projets</a></div><br/>

                                               <div class="cadre"><a class="lien" href="index.php?page=graphisme">Graphisme</a></div><br/>

                                               <div class="cadre"><a class="lien" href="index.php?page=video">Vidéos</a></div><br/>

                                               <div class="cadre"><a class="lien" href="index.php?page=bd">Bande-déssinée</a></div>

                               </div>

                               </i>

      </div>

    </div>

    <div class="rotater">

      <div class="btn btn-icon">

        <i class="fa">

                               <img class="img_menu" src="ressource/outil.png"/>

<div class="sous_menu">

                                               <div class="cadre"><a class="lien" href="index.php?page=outil>">Outils en ligne</a></div><br/>

                                               <div class="cadre"><a class="lien" href="index.php?page=artistique">Artistique</a></div><br/>

                                               <div class="cadre"><a class="lien" href="index.php?page=programmation">Programmmation / Réseau</a></div><br/>

                                               <div class="cadre"><a class="lien" href="index.php?page=administratif">Administratif/Gestion</a></div>

                               </div>

                               </i>

      </div>

    </div>

    <div class="rotater">

      <div class="btn btn-icon">

        <i class="fa">

                               <img class="img_menu" src="ressource/contact.png"/>

                               <div class="sous_menu">

                                               <div class="cadre"><a class="lien" href="index.php?page=contact">Contacts directs</a></div><br/>

<div class="cadre"><a class="lien" href="index.php?page=social">Réseaux sociaux</a></div>

                               </div>

                               </i>

      </div>

    </div>

  </div>

</div>

<script src="javascript.js" type="text/javascript"></script>

-
Edité par TheoMezier 19 mai 2017 à 17:00:31

TheoMezier

18 mai 2017 à 14:54:06

stefde3

18 mai 2017 à 14:59:36

ton problème est un problème javascript. vois plutôt dans la partie JS du forum

Le CSS ça peut craindre -->Conférence CSS3.CREATE

19 mai 2017 à 17:01:19

Eh bien en faite non c'est bien ici qu'il faut poster ce message car je reviens du forum javascript et c'est dans la partie CSS que j ai un problème.

19 mai 2017 à 18:57:12

c'est du bootstrap ou du wordpress ça non ?

-
Edité par stefde3 19 mai 2017 à 18:57:31

26 mai 2017 à 15:23:05

Désolé j'ai pas été présent ces derniers temps, alors en fait c'est à la base un code que j'ai pris sur Free Frontend et que j'ai modifié à ma sauce en changeant les images du menu et le nombre d'entre elles pour que ça loge dans le coin supérieur gauche de l'écran au lieu du milieu.

11 juin 2017 à 21:41:37

Personne?

Sous menu qui ne s'affiche pas

Sous menu qui ne s'affiche pas

Supprimer

Modérer

Signaler le message aux modérateurs