问题
i have a menu-flicker-problem and spend 3 hours investigating where this flicker is coming from - but i can't solve it.
hover over the point "Career" and navigate with the mouse to the dropdownmenu to see the flickering.
my current browser: Chrome 51.0.2704.103 m but also happens in Firefox - but not that "hard" like in Chrome.
JSFiddle: https://jsfiddle.net/amwkgtue/
i know why the fiddle is not working correctly: you have to expand the preview-window so the nav is actually floating (it has min-width: 1440px) - or go full fullscreen: https://fiddle.jshell.net/amwkgtue/show/
<header>
<div class="fixed">
<div class="bluegradient">
<div class="container navigation">
<div class="row">
<div class="col-sm-12">
<nav class="nav" id="navigation">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Places</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Example</a></li>
<li class="parent"><a href="#">Career</a>
<div class="childcontainer">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="child row">
<li class="col-sm-4 parent"><a href="#">Example</a>
<ul class="child">
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
<li><a href="#">Example</a></li>
</ul>
<a href="#" class="hidden-md hidden-lg navcaret"></a>
</li>
<li class="col-sm-4"><a href="#">Example</a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="socialbar col-sm-12">
<ul class="list-inline">
<li>
<a href="#"><img src="typo3conf/ext/sitetemplate/Resources/Public/img/facebook.png" class="img-responsive"></a>
</li>
<li>
<a href="#"><img src="typo3conf/ext/sitetemplate/Resources/Public/img/linkedin.png" class="img-responsive"></a>
</li>
<li>
<a href="#"><img src="typo3conf/ext/sitetemplate/Resources/Public/img/youtube.png" class="img-responsive"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<a href="#" class="hidden-md hidden-lg navcaret"></a>
</li>
<li class="parent"><a href="#">Contact</a>
<a href="#" class="hidden-md hidden-lg navcaret"></a>
</li>
<li><a href="#">Shop</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
don't mind the missing images, they are not necessary to reproduce the flicker.
scss:
/* COLORS */
$primary: #24366e; // BLUE
$yellow: #ffed00; // YELLOW
$grey: #f3f7fb;
$font: "Swiss-Thin",
Arial,
sans-serif;
$font-light: "Swiss-Light",
Arial,
sans-serif;
$font-medium: "Swiss-Medium",
Arial,
sans-serif;
$fontmedium: 500;
////////////
body {
background-color: #fff;
font-family: $font;
font-weight: 400;
line-height: 1.48;
}
a,
button,
.btn,
.btn-small {
&:focus,
&:hover {
outline: 0;
}
}
.container,
.container-fluid,
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
padding-left: 4%;
padding-right: 4%;
}
.row {
margin-left: -4%;
margin-right: -4%;
}
@media (min-width: 768px) {
.container,
.container-fluid,
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
padding-left: 35px;
padding-right: 35px;
}
.row {
margin-left: -35px;
margin-right: -35px;
}
}
header {
position: relative;
width: 100%;
}
$transition: all ease-in-out 0.3s;
header .fixed {
width: 100%;
height: 121px;
max-height: 121px;
position: fixed;
transition: $transition;
&.affix {
transition: $transition;
max-height: 100px;
height: 100px;
}
}
@media (min-width: 768px) {
header .fixed {
height: 200px;
max-height: 200px;
&.affix {
height: 140px;
max-height: 140px;
}
}
}
@media (min-width: 1025px) {
header .fixed {
height: 248px;
max-height: 248px;
transition: $transition;
&.affix {
height: 148px;
max-height: 148px;
transition: $transition;
}
}
}
.fixed {
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.bluegradient {
background: linear-gradient(to bottom, rgba(36, 54, 110, 1) 0%, rgba(36, 54, 110, 1) 38%, rgba(36, 54, 110, 0.35) 100%);
height: 100%;
}
.navigation {
div[class^='col-'] {
position: static;
}
}
@media (min-width: 1025px) {
.mobilemenu {
display: none;
z-index: -20;
}
.navigation {
margin-top: 0px;
width: 100% !important;
max-height: 65px;
}
#navigation {
width: 100%;
}
#navigation .col-sm-12 {
position: relative;
}
.navbar-header {
display: none;
}
.fixed.affix .navigation #navigation {
padding-top: 4px;
-webkit-padding-before: 5px;
ul {
li {
a {
@media (max-width: 1280px) {
padding: 10px 12px !important;
}
padding: 10px 25px !important;
}
&.parent:hover {
>.childcontainer {
padding-top: 148px !important;
}
}
}
}
}
.fixed .navigation #navigation {
display: block;
padding-top: 195px;
-webkit-padding-before: 196px;
text-align: center;
ul {
display: inline-block;
margin: 0;
padding: 0;
li {
float: left;
position: static;
a {
color: #fff;
font-size: 18px;
font-family: $font-light;
transition: all ease-in-out 0.3s;
text-transform: uppercase;
@media (max-width: 1280px) {
padding: 13px 12px !important;
}
padding: 13px 25px;
&:hover,
&:focus {
background-color: $primary;
text-decoration: none;
color: $yellow;
transition: all ease-in-out 0.3s;
}
}
.childcontainer {
visibility: hidden;
opacity: 0;
position: absolute;
top: 0;
transition: all ease-in-out 0.6s;
width: 100%;
background-color: #fff;
left: 0;
z-index: -1;
}
>.childcontainer>.container-fluid {
background-color: $primary;
visibility: hidden;
opacity: 0;
min-height: 51px;
max-height: 52px;
transition: all ease-in-out 0.6s;
ul.list-inline {
display: none;
}
}
ul.child {
display: none;
ul.child {
display: none;
}
}
&.parent:hover,
&.parent:focus {
>a {
color: $yellow;
background-color: $primary;
}
>.childcontainer {
display: block;
visibility: visible;
background-color: #fff;
opacity: 1;
top: 0;
padding-top: 248px;
transition: all ease-in-out 0.6s;
}
>.childcontainer>.container {
min-height: 92px;
}
>.childcontainer>.container>.row>.col-sm-12>ul.child {
display: block;
list-style-type: none;
width: 100%;
/*@-moz-document url-prefix() {
left: 1px;
}*/
>li>a {
padding: 10px 25px;
display: block;
background-image: none;
background-size: auto 24px;
background-position: left -1px center;
color: $primary;
}
>li:hover>a,
>li.active>a,
>li:focus>a {
background-image: url(../img/arrow_blue.png);
background-repeat: no-repeat;
background-size: auto 24px;
background-color: #fff;
}
li.parent:hover {
>ul.child {
display: none;
position: absolute;
left: 100%;
margin-top: -43px;
border-left: 1px solid #fff;
}
}
}
>.childcontainer>.container-fluid {
background-color: $primary;
visibility: visible;
opacity: 1;
transition: all ease-in-out 0.6s;
.socialbar {
text-align: right;
padding-top: 10px;
padding-bottom: 5px;
ul>li>a {
background-color: inherit;
text-decoration: none;
color: inherit;
transition: none;
display: inline-block;
padding: 0;
&:hover,
&:focus {
transition: none;
color: inherit;
text-decoration: none;
background-color: inherit;
}
}
}
ul.list-inline {
display: inline-block;
li {
display: inline-block !important;
margin-right: 15px;
&:last-of-type {
margin-right: 0px;
}
img {
max-width: 30px;
}
}
}
}
}
&.active {
>a {
color: $yellow;
}
}
}
}
}
}
@media (min-width: 1440px) {
.fixed .navigation #navigation {
display: block;
padding-top: 26px;
-webkit-padding-before: 27px;
text-align: center;
ul {
display: inline-block;
margin: 0;
padding: 0;
}
}
.navigation {
width: 1370px !important;
}
#navigation {
padding-top: 21px;
-webkit-padding-before: 22px;
}
}
ah forgot to mention this:
this navigation was a <ul class="nav nav-justified"> before, and at that time the dropdown was working smoothly!
回答1:
It does not appear that you are using many of the Bootstrap classes for the header. Also, you have a "nav" nested within another "nav", which is causing styling issues.
Here is a very simple Bootstrap header with a hover dropdown:
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Places</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Example</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Career <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
@media (min-width: 768px) {
/* Make dropdown show on hover, rather than click (Only on desktop viewports) */
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
http://codepen.io/charliebeckstrand/pen/YWaaWp
回答2:
i did a workaround because i couldn't find the flickering issue in floating points - so switched to inline-block list elements again instead of floating list-elements.
来源：https://stackoverflow.com/questions/38506880/menu-flickering-from-dropdown-position-absolute-visible-after-hover