- 首页
- 前端开发
- 下拉菜单中的菜单闪烁(绝对位置，悬停后可见)
下拉菜单中的菜单闪烁(绝对位置，悬停后可见)
[英] Menu-Flickering from Dropdown (position absolute, visible after hover)
本文介绍了下拉菜单中的菜单闪烁(绝对位置，悬停后可见)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个菜单闪烁问题，我花了 3 个小时调查这个闪烁的来源 - 但我无法解决它.
将鼠标悬停在职业"点上并用鼠标导航到下拉菜单以查看闪烁.
我当前的浏览器:Chrome 51.0.2704.103 m 但也发生在 Firefox 中 - 但不像 Chrome 那样难".
JSFiddle:https://jsfiddle.net/amwkgtue/
我知道为什么小提琴不能正常工作:你必须扩展预览窗口，这样导航实际上是浮动的(它有最小宽度:1440px) - 或者全屏显示:https://fiddle.jshell.net/amwkgtue/show/
<div class="fixed"><div class="bluegradient"><div class="容器导航"><div class="row"><div class="col-sm-12"><nav class="nav" id="navigation"><ul class="nav"><li class="active"><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">地方</a></li><li><a href="#">产品</a></li><li><a href="#">服务</a></li><li><a href="#">示例</a></li><li class="parent"><a href="#">职业生涯</a><div class="childcontainer"><div class="容器"><div class="row"><div class="col-sm-12"><ul class="子行"><li class="col-sm-4 parent"><a href="#">示例</a><ul class="child"><li><a href="#">示例</a></li><li><a href="#">示例</a></li><li><a href="#">示例</a></li><li><a href="#">示例</a></li><li><a href="#">示例</a></li><a href="#" class="hidden-md hidden-lg navcaret"></a><li class="col-sm-4"><a href="#">示例</a></li>
<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><a href="#"><img src="typo3conf/ext/sitetemplate/Resources/Public/img/linkedin.png" class="img-responsive"></a><li><a href="#"><img src="typo3conf/ext/sitetemplate/Resources/Public/img/youtube.png" class="img-responsive"></a>
<a href="#" class="hidden-md hidden-lg navcaret"></a><li class="parent"><a href="#">联系方式</a><a href="#" class="hidden-md hidden-lg navcaret"></a><li><a href="#">商店</a></li></nav>
</标题>
不要介意丢失的图像，它们不是重现闪烁所必需的.
scss:
/* 颜色 */$primary: #24366e;//蓝色的$黄色:#ffed00；//黄色的$灰色:#f3f7fb；$font: "瑞士薄",宋体，无衬线字体;$font-light: "瑞士灯",宋体，无衬线字体;$font-medium: "瑞士-中等",宋体，无衬线字体;$fontmedium: 500;////////////身体 {背景色:#fff;字体系列:$font;字体粗细:400；行高:1.48；}一种，按钮，.btn，.btn-小{&:焦点，&:悬停{大纲:0；}}.容器，.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 {填充左:4%；右填充:4%；}.排 {左边距:-4%；右边距:-4%；}@media(最小宽度:768px){.容器，.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;}.排 {左边距:-35px；边距右:-35px；}}标题{位置:相对；宽度:100%；}$transition:所有缓入缓出 0.3 秒；标头.固定{宽度:100%；高度:121px；最大高度:121px；位置:固定；过渡:$过渡；&.附加{过渡:$过渡；最大高度:100px；高度:100px；}}@media(最小宽度:768px){标头.固定{高度:200px；最大高度:200px；&.附加{高度:140px；最大高度:140px；}}}@media(最小宽度:1025px){标头.固定{高度:248px；最大高度:248px；过渡:$过渡；&.附加{高度:148px；最大高度:148px；过渡:$过渡；}}}.固定的 {顶部:0；左:0；右:0；宽度:100%；高度:100%；z-索引:10；}.bluegradient {背景:线性梯度(到底部，rgba(36, 54, 110, 1) 0%, rgba(36, 54, 110, 1) 38%, rgba(36, 54, 110, 0.35) 100%)；高度:100%；}.导航 {div[class^='col-'] {位置:静态；}}@media(最小宽度:1025px){.mobilemenu {显示:无；z-索引:-20；}.导航 {边距顶部:0px；宽度:100%！重要；最大高度:65px；}#导航 {宽度:100%；}#navigation .col-sm-12 {位置:相对；}.navbar-header {显示:无；}.fixed.affix .navigation #navigation {填充顶部:4px；-webkit-padding-before: 5px;ul{李{一种 {@media(最大宽度:1280px){填充:10px 12px ！重要；}填充:10px 25px ！重要；}&.parent:悬停{>.子容器{padding-top: 148px !important;}}}}}.fixed .navigation #navigation {显示:块；填充顶部:195px；-webkit-padding-before: 196px;文本对齐:居中；ul{显示:内联块；边距:0；填充:0；李{向左飘浮;位置:静态；一种 {颜色:#fff;字体大小:18px；字体系列:$font-light;过渡:所有缓入缓出 0.3 秒；文本转换:大写；@media(最大宽度:1280px){填充:13px 12px ！重要；}填充:13px 25px；&:悬停，&:焦点{背景色:$primary;文字装饰:无；颜色:$黄色；过渡:所有缓入缓出 0.3 秒；}}.childcontainer {可见性:隐藏；不透明度:0；位置:绝对；顶部:0；过渡:所有缓入缓出 0.6 秒；宽度:100%；背景色:#fff;左:0；z-索引:-1；}>.childcontainer>.container-fluid {背景色:$primary;可见性:隐藏；不透明度:0；最小高度:51px；最大高度:52px；过渡:所有缓入缓出 0.6 秒；ul.list-内联{显示:无；}}ul.child {显示:无；ul.child {显示:无；}}&.parent:悬停，&.parent:focus {>a {颜色:$黄色；背景色:$primary;}>.子容器{显示:块；可见性:可见；背景色:#fff;不透明度:1；顶部:0；填充顶部:248px；过渡:所有缓入缓出 0.6 秒；}>.childcontainer>.container {最小高度:92px；}>.childcontainer>.container>.row>.col-sm-12>ul.child {显示:块；列表样式类型:无；宽度:100%；/*@-moz-document url-prefix() {左:1px；}*/>li>a {填充:10px 25px；显示:块；背景图像:无；背景尺寸:自动 24px；背景位置:左 -1px 中心；颜色:$primary;}>li:hover>a,>li.active>a,>li:focus>a {背景图片:网址(../img/arrow_blue.png)；背景重复:不重复；背景尺寸:自动 24px；背景色:#fff;}li.parent:悬停{>ul.child {显示:无；位置:绝对；左:100%；边距顶部:-43px；左边框:1px 实心 #fff;}}}>.childcontainer>.container-fluid {背景色:$primary;可见性:可见；不透明度:1；过渡:所有缓入缓出 0.6 秒；.社交栏{文本对齐:右；填充顶部:10px；填充底部:5px；ul＞li＞a{背景色:继承；文字装饰:无；颜色:继承；过渡:无；显示:内联块；填充:0；&:悬停，&:焦点{过渡:无；颜色:继承；文字装饰:无；背景色:继承；}}}ul.list-内联{显示:内联块；李{显示:内联块！重要；右边距:15px；&:last-of-type {边距右:0px；}图像{最大宽度:30px；}}}}}&.active {>a {颜色:$黄色；}}}}}}@media(最小宽度:1440px){.fixed .navigation #navigation {显示:块；填充顶部:26px；-webkit-padding-before: 27px;文本对齐:居中；ul{显示:内联块；边距:0；填充:0；}}.导航 {宽度:1370px！重要；}#导航 {填充顶部:21px；-webkit-padding-before: 22px;}}
啊忘了提这个:
这个导航以前是
解决方案
我做了一个解决方法，因为我在浮点中找不到闪烁问题 - 所以再次切换到行内块列表元素而不是浮动列表元素.
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!
解决方案
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.
这篇关于下拉菜单中的菜单闪烁(绝对位置，悬停后可见)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
