0

I've made up a responsive menu wherein the list-item elements after the 4th get display:none; opacity:0 on mobile. The 4th element is another list item that's an icon. When you hover over the icon the hidden menu items appear as a block list below using

li:nth-child(4):hover ~ li { display:block; opacity:1; }

No matter where I stick transition: all 0.5s ease in my CSS I cannot get a transition going. Am I trying to do something that just won't work because I'm acting on a sibling selector, or am I doing something wrong?

See fiddle: https://jsfiddle.net/nicoleamurray/zap1L8hq/ which displays the mobile version.

UPDATE: Got it working really nicely with height! 

`.mainmenu{
float: right;
text-align: right;
}
.mainmenu li{
display:inline-block;
}
.mainmenu li:nth-child(4):hover ~ li{
opacity:1;
transition-delay: 0s;
height: 20px;
}
.mainmenu li:nth-child(n+5){
opacity:0;
overflow: hidden;
height: 0;
display: block;
transition: all 0.5s 1s;
}`
nicole
  • 11
  • 5

1 Answers1

0

You can not transition the display: property. It's either seen or hidden. There are no "in-between" variations to transition to/from.

If both states are set to display: block; then the transition functions. inline-block also works.. but may mean some other layout refinement is necessary. For the snippet below, I just used block;

body { margin: 50px;}

.mainmenu{
    float: right;
    text-align: right;
}
.mainmenu li{
    display:inline-block;
}
.mainmenu li:nth-child(4):hover ~ li{
  display:block;
  opacity:1;
}

.mainmenu li:nth-child(n+5){
  display:block;
  opacity:0;
  transition: all 0.5s ease;
}
 <ul class="mainmenu" role="menubar">
   <li><a href="#">Home</a></li>
   <li><a href="#">Features</a></li>
   <li><a href="#">Pages</a></li>
   <li class="mainmenu__icon">:</li>
   <li><a href="#">Events</a></li>
   <li><a href="#">Shortcodes</a></li>
   <li><a href="#">Demo</a></li>
</ul>
Scott
  • 21,475
  • 8
  • 43
  • 55
  • i know you cannot transition display, which is why i added an opacity to all states/elements. the problem with this solution is because the display is NOT `none`, the invisible menu items are still technically there, just at 0 opacity. hover your mouse over where the menu items are and the mouse will turn to pointer. i do need them actually hidden. – nicole Aug 19 '16 at 15:00
  • based on your feedback though i'm going to try this: http://stackoverflow.com/questions/22103006/css3-transition-doesnt-work-with-display-property – nicole Aug 19 '16 at 15:06