我在這裏粘貼代碼:我該如何解決這個導航菜單不透明問題?
https://jsfiddle.net/JTBennett/sdydw4L6/ [CSS - 淡入頂部的東西,資產淨值的東西在底部]
但複製粘貼+以下,如果你想看到實際問題瀏覽器... jsfiddle以某種方式修復它。
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 and 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 and 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 and 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 and 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 {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Navigation */
a {
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) a {
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) a ~ .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) a {
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) a ~ .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) a {
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) a ~ .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) a {
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) a ~ .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) a {
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) a ~ .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 a {
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 only screen and (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 a {
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;
}
}
它的實際工作中的jsfiddle就好了,但是當我在瀏覽器中運行它有一個與在默認全子菜單中選擇問題大小位置(頂部對齊)保持在0不透明度。在Chrome和Safari中都是一樣的,幾乎可以肯定的是這是一個不透明的問題,在動畫命令後不能自行解決,但這只是奇怪的,它只發生在默認的子菜單上。如果你刪除不透明度:0;來自#fadein-menu-1/2/3/4 ID的行,子菜單再次工作。
我覺得我只是想念一個公然,愚蠢的小東西......但我無法爲我的生活找到它。真的很感謝這裏的一些幫助。
對不起這個,但我從菜單中重建起來 - 你不會真正能夠看到問題,直到我找到衝突的確切來源。這個菜單處於很多其他代碼的中間,我仍然無法理解不透明問題。 我想我會再次打擾你們,如果我找到它,並不能找出它.. – Joel