css - How can I fix this nav menu opacity issue? -
i've pasted code here:
https://jsfiddle.net/jtbennett/sdydw4l6/ [css - fadein stuff @ top, nav stuff @ bottom]
but copy+paste following if want see actual issue in browser...jsfiddle fixes somehow.
html:
<header class="masthead" style="z-index:9999; top:30%;"> <nav> <div class="nav-container"> <div id="fadein-menu-1"> <input id="slider1" name="slider1" type="checkbox"> <label class="slide has-child" for="slider1"> <span class="element">vi</span> <span class="name">v:hcc</span> </label> <div class="child-menu"> <a href="#">option 1</a> <a href="#">option 2</a> <a href="#">option 3</a> </div> </div> <div id="fadein-menu-2"> <a class="slide" href="#"> <span class="element">cd</span> <span class="name">cadence</span> </a> </div> <div id="fadein-menu-3"> <input id="slider2" name="slider2" type="checkbox"> <label class="slide has-child" for="slider2"> <span class="element">cp</span> <span class="name">capture</span> </label> <div class="child-menu"> <a href="#">option 1</a> <a href="#">option 2</a> <a href="#">option 3</a> <a href="#">option 4</a> <a href="#">option 5</a> <a href="#">option 6</a> </div> </div> <div id="fadein-menu-4"> <a class="slide" href="#"> <span class="element">ea</span> <span class="name">v:ea</span> </a> </div> </header> css:
/* delayed fade-in css */ #fadein-menu-1 { opacity:0; -webkit-animation: fadein 1s ease-in 1s 1 forwards; /* safari, chrome , opera > 12.1 */ -moz-animation: fadein 1s ease-in 1s 1 forwards; /* firefox < 16 */ -ms-animation: fadein 1s ease-in 1s 1 forwards; /* internet explorer */ -o-animation: fadein 1s ease-in 1s 1 forwards; /* opera < 12.1 */ animation: fadein 1s ease-in 1s 1 forwards; } #fadein-menu-2 { opacity:0; -webkit-animation: fadein 1s ease-in 1.2s 1 forwards; /* safari, chrome , opera > 12.1 */ -moz-animation: fadein 1s ease-in 1.2s 1 forwards; /* firefox < 16 */ -ms-animation: fadein 1s ease-in 1.2s 1 forwards; /* internet explorer */ -o-animation: fadein 1s ease-in 1.2s 1 forwards; /* opera < 12.1 */ animation: fadein 1s ease-in 1.2s 1 forwards; } #fadein-menu-3 { opacity:0; -webkit-animation: fadein 1s ease-in 1.4s 1 forwards; /* safari, chrome , opera > 12.1 */ -moz-animation: fadein 1s ease-in 1.4s 1 forwards; /* firefox < 16 */ -ms-animation: fadein 1s ease-in 1.4s 1 forwards; /* internet explorer */ -o-animation: fadein 1s ease-in 1.4s 1 forwards; /* opera < 12.1 */ animation: fadein 1s ease-in 1.4s 1 forwards; } #fadein-menu-4 { opacity:0; -webkit-animation: fadein 1s ease-in 1.6s 1 forwards; /* safari, chrome , opera > 12.1 */ -moz-animation: fadein 1s ease-in 1.6s 1 forwards; /* firefox < 16 */ -ms-animation: fadein 1s ease-in 1.6s 1 forwards; /* internet explorer */ -o-animation: fadein 1s ease-in 1.6s 1 forwards; /* opera < 12.1 */ animation: fadein 1s ease-in 1.6s 1 forwards; } @keyframes fadein { { 0% { opacity:0; } 100% { opacity:1; } } } /* firefox < 16 */ @-moz-keyframes fadein { { opacity: 0; } { opacity: 1; } } /* safari, chrome , opera > 12.1 */ @-webkit-keyframes fadein { { opacity: 0; } { opacity: 1; } } /* internet explorer */ @-ms-keyframes fadein { { opacity: 0; } { opacity: 1; } } /* opera < 12.1 */ @-o-keyframes fadein { { opacity: 0; } { opacity: 1; } } /* navigation */ { text-decoration: none; } .masthead { font-family: "open sans", sans-serif; } nav { display: table; position: relative; table-layout: fixed; width: 100%; } nav input { display: none; } nav label { margin: 0; } nav div.nav-container { display: table-row; } nav div.nav-container > div { display: table-cell; } nav div.nav-container > div:nth-of-type(5n+1) .slide, nav div.nav-container > div:nth-of-type(5n+1) { border-color: #186eb5; } nav div.nav-container > div:nth-of-type(5n+1) .slide:hover, nav div.nav-container > div:nth-of-type(5n+1) a:hover { color: #186eb5; } nav div.nav-container > div:nth-of-type(5n+1) .slide ~ .child-menu, nav div.nav-container > div:nth-of-type(5n+1) ~ .child-menu { background-color: #186eb5; } nav div.nav-container > div:nth-of-type(5n+1) input:checked ~ label, nav div.nav-container > div:nth-of-type(5n+1) .slide.active ~ label { color: #186eb5; } nav div.nav-container > div:nth-of-type(5n+2) .slide, nav div.nav-container > div:nth-of-type(5n+2) { border-color: #5aab1e; } nav div.nav-container > div:nth-of-type(5n+2) .slide:hover, nav div.nav-container > div:nth-of-type(5n+2) a:hover { color: #5aab1e; } nav div.nav-container > div:nth-of-type(5n+2) .slide ~ .child-menu, nav div.nav-container > div:nth-of-type(5n+2) ~ .child-menu { background-color: #5aab1e; } nav div.nav-container > div:nth-of-type(5n+2) input:checked ~ label, nav div.nav-container > div:nth-of-type(5n+2) .slide.active ~ label { color: #5aab1e; } nav div.nav-container > div:nth-of-type(5n+3) .slide, nav div.nav-container > div:nth-of-type(5n+3) { border-color: #db0a21; } nav div.nav-container > div:nth-of-type(5n+3) .slide:hover, nav div.nav-container > div:nth-of-type(5n+3) a:hover { color: #db0a21; } nav div.nav-container > div:nth-of-type(5n+3) .slide ~ .child-menu, nav div.nav-container > div:nth-of-type(5n+3) ~ .child-menu { background-color: #db0a21; } nav div.nav-container > div:nth-of-type(5n+3) input:checked ~ label, nav div.nav-container > div:nth-of-type(5n+3) .slide.active ~ label { color: #db0a21; } nav div.nav-container > div:nth-of-type(5n+4) .slide, nav div.nav-container > div:nth-of-type(5n+4) { border-color: #6926b8; } nav div.nav-container > div:nth-of-type(5n+4) .slide:hover, nav div.nav-container > div:nth-of-type(5n+4) a:hover { color: #6926b8; } nav div.nav-container > div:nth-of-type(5n+4) .slide ~ .child-menu, nav div.nav-container > div:nth-of-type(5n+4) ~ .child-menu { background-color: #6926b8; } nav div.nav-container > div:nth-of-type(5n+4) input:checked ~ label, nav div.nav-container > div:nth-of-type(5n+4) .slide.active ~ label { color: #6926b8; } nav div.nav-container > div:nth-of-type(5n+5) .slide, nav div.nav-container > div:nth-of-type(5n+5) { border-color: #fc1dcf; } nav div.nav-container > div:nth-of-type(5n+5) .slide:hover, nav div.nav-container > div:nth-of-type(5n+5) a:hover { color: #b1028d; } nav div.nav-container > div:nth-of-type(5n+5) .slide ~ .child-menu, nav div.nav-container > div:nth-of-type(5n+5) ~ .child-menu { background-color: #fd4fda; } nav div.nav-container > div:nth-of-type(5n+5) input:checked ~ label, nav div.nav-container > div:nth-of-type(5n+5) .slide.active ~ label { color: #fc1dcf; } nav a, nav label { -moz-transition-property: color; -o-transition-property: color; -webkit-transition-property: color; transition-property: color; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } nav .slide { padding: 10px 10px; font-size: 1em; display: block; color: #393939; border-top: 4px solid transparent; position: relative; -moz-transition-property: border-width, color; -o-transition-property: border-width, color; -webkit-transition-property: border-width, color; transition-property: border-width, color; -moz-transition-duration: 0.1s, 0.2s; -o-transition-duration: 0.1s, 0.2s; -webkit-transition-duration: 0.1s, 0.2s; transition-duration: 0.1s, 0.2s; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -moz-transition-delay: 0.2s, 0s; -o-transition-delay: 0.2s, 0s; -webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s; } nav .slide .element { font-size: 1.25em; font-weight: 600; font-style: normal; display: block; line-height: 1; } nav .slide .name { font-size: 0.6875em; position: relative; } nav .has-child .name:after { content: ""; width: 10px; height: 4px; background-image: url("http://www.elemental-shift.com/remote-assets/down-arrow.svg"); display: block; position: absolute; bottom: -9px; left: 1px; background-repeat: no-repeat; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -webkit-transition-property: -webkit-transform; transition-property: transform; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } nav .child-menu { display: block; position: absolute; max-height: 0; overflow: hidden; background-color: #393939; width: 100%; top: 65px; left: 0; z-index: 5000; -moz-transition-property: max-height; -o-transition-property: max-height; -webkit-transition-property: max-height; transition-property: max-height; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } nav .child-menu { color: white; display: inline-block; padding: 15px 30px 15px 10px; font-size: 0.9375em; } nav input:checked ~ .child-menu { max-height: 100px; -moz-transition-property: max-height; -o-transition-property: max-height; -webkit-transition-property: max-height; transition-property: max-height; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } nav input:checked ~ .has-child .name:after { -moz-transform: rotatex(180deg); -webkit-transform: rotatex(180deg); transform: rotatex(180deg); } @media screen , (min-width: 48.0625em) { nav { display: block; table-layout: auto; } nav div.nav-container { display: block; } nav div.nav-container > div { display: block; margin: 5px 0; } nav div.nav-container > div:hover .slide { border-left-width: 55px; -moz-transition-delay: 0; -o-transition-delay: 0; -webkit-transition-delay: 0; transition-delay: 0; } nav .slide { display: block; width: auto; border-left: solid 4px #393939; border-top: none; } nav .slide .element { line-height: 1; } nav .child-menu { display: block; position: relative; top: 0; background-color: transparent !important; margin-left: 55px; width: auto; max-height: 0px; overflow: hidden; border-top: none; } nav .child-menu { color: #393939; display: block; padding: 3px 0 3px 10px; font-size: 0.8125em; } nav input:checked ~ div.child-menu { max-height: 120px; } nav input:checked ~ .slide { border-width: 55px; } .masthead { position: absolute; top: 0; left: 0; width: 150px; } } it works fine in jsfiddle, when run in browser there's issue child menu in default full-size position (top-aligned) remaining @ 0 opacity. it's same in chrome , safari, , it's issue opacity not resolving after animation commands, seems strange happens default child menu. if remove opacity:0; lines #fadein-menu-1/2/3/4 ids, submenu works again.
i feel i'm missing 1 blatant, stupid little thing...but cannot find life of me. appreciate here.
the problem:
animation: fadein 1s ease-in 1.4s 1 forwards; you trying fade-in element has opacity:0;. animation runs once means element fades-in , element return default style(opacity:0;). can not see elements.
solution: remove opacity default style.
#fadein-menu-1 { /* remove elements */ //opacity:0; -webkit-animation: fadein 1s ease-in 1s 1 forwards; /* safari, chrome , opera > 12.1 */ -moz-animation: fadein 1s ease-in 1s 1 forwards; /* firefox < 16 */ -ms-animation: fadein 1s ease-in 1s 1 forwards; /* internet explorer */ -o-animation: fadein 1s ease-in 1s 1 forwards; /* opera < 12.1 */ animation: fadein 1s ease-in 1s 1 forwards; } 
Comments
Post a Comment