[Résolu] Un menu déroulant....déroutant !

Bonjour,

Je vais tenter d'être le plus clair possible sur un problème qui me fait pousser les cheveux à l'envers depuis quelques temps ! Voilà, je viens de coder une barre de menu avec sous-menu html et css) et là, je me dis...tiens si je m'essayais au js afin de lui changer sa hauteur au scroll. Le résultat fonctionne à un "détail" près: le sous-menu ne s'affiche plus une fois que l'on scroll... Si une âme charitable pouvait m'aiguiller sur ce détail, ce serait merveilleux !

<nav id="menu-stick">   
      <ul id="menu">
        <li><a href="">Menu 1</a>
          <ul id="sous-menu">
            <li>sous-menu1</li>
            <li>sous-menu2</li>
            <li>sous-menu3</li>
            <li>sous-menu4</li>
          </ul>
        </li>
        <li><a href="">Menu 2</a></li>
        <li><a href="">Menu 3</a></li>
        <li><a href="">Menu 4</a></li>
      </ul>
    </nav>

nav{
  position: fixed;
  top:0;
  background:rgba(0,0,0,0.8);
  width:100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

nav ul{
  display: flex;
  align-items: center;
}

nav ul li{
  list-style: none;

}

nav a:link,nav a:visited {
  text-decoration: none;
  color:#d6d6d6;
  position: relative;
  display: block;
  font-size:1.5em;
  font-weight: 500px;
  padding:10px 25px;
  font-family: 'Raleway', sans-serif;
}

nav a:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 20px;
  left: 20px;
  height: 2px;
  background-color: #ffcf3f;
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.4s;
}

nav a:hover:after,
nav a:focus:after {
  opacity: 0.6;
  transform: translateY(0);
}


nav a:focus {
  outline: none;
}

#menu li:first-child{
  position: relative;
}

#sous-menu{
  display: flex;
  flex-direction: column;
  line-height: 1.5em;
  position: absolute;
  z-index: 555555;
  padding: 0;
  left:10px;
  background: #333;
  height:0;
  overflow: hidden;
  transition: height 0.5s;
}

#sous-menu li{
  box-sizing: border-box;
  color:white;
  width:115px;
  padding:15px;
  box-shadow: 0 0 0 0 rgba(30, 144, 255,1) inset;
  transition: box-shadow 0.6s;

}

#sous-menu li:hover{
  box-shadow: 300px 0 0 0 rgba(30, 144, 255,1) inset;
}

#menu li:first-child:hover #sous-menu{
  height:216px;
}

   $(window).on('scroll', function () {
      var scrollTop = $(window).scrollTop();
      if (scrollTop > 50) {
        $('#menu-stick').stop().animate({height: "80px"},20);     
      }
      else {
       $('#menu-stick').stop().animate({height: "120px"},20);
     }
   });

Modifié par Shupps (11 Mar 2019 - 22:16)

Chez moi sur firefox 60 cela fonctionne :
http://jsfiddle.net/e82dhnro/

est-ce bien un scroll vertical qui pose problème ?

Bonjour,

Tout d'abord encore merci pour vos réponses. Effectivement adrien881 , étonnament le code fonctionne sur jsfiddle, le truc est effectivement sur un scroll vertical cela doit rétrécir le nav, en hauteur, qui passe de 120px à 80px et à ce moment là mon sous menu n'apparait presque plus: il ne dépasse plus le nav, je ne voit donc qu'une infime partie du sous-menu1. Je test avec chrome et firefox chez moi et même constat. Super étrange...
Modifié par Shupps (12 Mar 2019 - 14:19)

Du coup dur dur de voir ce qui ne vas pas à l'aveugle. Tu as un exemple en ligne du code qui ne marche pas ? Ca doit etre lié a ce qu'il y a autour de ce code.

Apparament c'est Jquery qui force un overflow:hidden avec le animate...

Après, tu n'as pas besoin d'un animate en Js pour juste ça. Fait juste un css("height","80px") et dans ton css tu rajoute juste transition: height 200ms;
Modifié par _laurent (12 Mar 2019 - 15:02)

Yes, j'avais pensé à la transition, mais j'aurais voulu le faire partir au scroll...