Partage

Sous menu qui ne s'affiche pas

18 mai 2017 à 14:54:06

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

18 mai 2017 à 14:59:36

ton problème est un problème javascript. vois plutôt dans la partie JS du forum
Mon portfolio / Nouveau projet -->Expedition wars/  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

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
Hier à 15:23

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.

Sous menu qui ne s'affiche pas

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown