我的移动崩溃引导程序菜单有问题。我还使用另一个超级菜单(yamm.css)在桌面模式下有更多的可能性。
目前我正处于一个我不知道该怎么做的地步,因为我根本无法看到问题,为什么我的下拉列表不会将内容滑落 - 而只是“滑动”它。数据崩溃完美地工作,它向下滑动内容并显示导航,但导航中的下拉列表没有。
最好看看jsfiddle:http://jsfiddle.net/u6pe61vu/3/
信息:只有Point“Qualität”有一个下拉列表/子菜单。
但是堆栈要我添加代码...所以我这样做:
代码:
<div class="container navigation" id="navigation">
<nav class="navbar navbar-default navbar-static-top yamm">
<div class="navbar-header"> <a class="collapsed visible-xs" data-toggle="collapse" data-target="#main" aria-expanded="false">Menü</a>
<button type="button" class="navbar-toggle collapsed" id="toggleButton" data-toggle="collapse" data-target="#main" aria-expanded="false">
<div class="hamburger"> <span class="sr-only">Button um die Navigation anzeigen zu lassen.</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="navbar-close hidden"> <span class="sr-only">Button um die Navigation zu schließen.</span> <span class="icon-close"></span>
</div>
</button>
</div>
<div class="collapse navbar-collapse" id="main">
<ul class="nav nav-pills nav-justified">
<li><a href="#">Ausbau <span class="sr-only">(aktiv)</span></a>
</li>
<li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Qualität <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<div class="yamm-content row">
<ul class="col-md-3 col-sm-3 list-unstyled">
<li class="listheading"><a href="#">Qualitätsprozess</a>
</li>
</ul>
<ul class="col-md-3 col-sm-3 list-unstyled">
<li class="listheading"><a href="#">Aktuell</a>
</li>
<li><a href="#">Aktuell</a>
</li>
<li><a href="#">Aktuell</a>
</li>
<li><a href="#">Aktuell</a>
</li>
<li><a href="#">Aktuell</a>
</li>
</ul>
<ul class="col-md-3 col-sm-3 list-unstyled">
<li class="listheading"><a href="#">Aktuell</a>
</li>
<li><a href="#">Aktuell</a>
</li>
</ul>
<ul class="col-md-3 col-sm-3 list-unstyled">
<li class="listheading"><a href="#">Unterpunkt 4</a>
</li>
<li><a href="#">Lorem Ipsum</a>
</li>
<li><a href="#">Lorem Ipsum</a>
</li>
<li><a href="#">Lorem Ipsum</a>
</li>
<li><a href="#">Lorem Ipsum</a>
</li>
</ul>
</div>
<div class="yamm-content row">
<ul class="col-md-3 col-sm-3 list-unstyled">
<li class="listheading"><a href="#">Unterpunkt 5</a>
</li>
<li><a href="#">Lorem Ipsum</a>
</li>
<li><a href="#">Lorem Ipsum</a>
</li>
<li><a href="#">Lorem Ipsum</a>
</li>
<li><a href="#">Lorem Ipsum</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<li><a href="#">Themen</a>
</li>
<li><a href="#">Service</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
CSS:
$primary: #7ba4d0;
$gradient-navi-start: #7ba4d0;
$gradient-navi-end: #6290bf;
$open-navi: #f3f8fc;
$font-color: #2d2d2d;
$grey: #d5d9dc;
$darkgrey: #656565;
$green: #b6ceb4;
$yellow: #fcf18e;
$orange: #fbcda4;
$red: #ef8a90;
$purple: #c6bdd3;
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
position: static;
}
.yamm .container {
position: relative;
}
.yamm .dropdown-menu {
left: auto;
}
.yamm .yamm-content {
padding: 20px 30px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
left: 0;
right: 0;
}
.navbar {
min-height: 0;
border: 0;
}
.navbar-default {
background-color: transparent;
background-image: none;
border-color: transparent;
border-radius: 4px;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, $open-navi 100%, $open-navi 100%) repeat scroll 0 0;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f8fc', endColorstr='#f3f8fc', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
color: $primary;
text-shadow: none;
border-color: $open-navi;
}
.nav-pills>li>a:hover, .nav-pills>li>a:focus {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, $open-navi 100%, $open-navi 100%) repeat scroll 0 0;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f8fc', endColorstr='#f3f8fc', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
color: $primary;
text-shadow: none;
}
.nav-pills>li>a {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, $gradient-navi-start 100%, $gradient-navi-end 100%) repeat scroll 0 0;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7ba4d0', endColorstr='#6290bf', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
color: #fff;
border-radius: 0px;
font-size: 18px;
text-shadow: 1px 1px 0px rgba(30, 30, 30, 0.45);
padding: 19px 15px 22px 15px;
}
.nav-pills>li:first-of-type>a {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.nav-pills>li:last-of-type>a {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.nav-pills>li {
border-right: 1px solid #4c7ba5;
border-left: 1px solid #8baed2;
}
.nav-pills>li:last-of-type {
border-right: 0;
}
.nav-pills>li:first-of-type {
border-left: 0;
}
.dropdown-menu {
margin: 0px 0px 0px;
border: 0;
background-color: $open-navi;
-webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.175);
box-shadow: 0 8px 10px rgba(0,0,0,0.175);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.yamm .yamm-content {
padding: 20px 10px;
}
.yamm-content ul {
display: block;
}
.yamm-content ul li {
display: inline-block;
width: 100%;
}
.yamm-content ul li a {
padding: 10px 26px 8px 26px;
color: $font-color;
border-bottom: 1px solid $grey;
width: 100%;
display: inline-block;
font-size: 13px;
}
.yamm-content ul li a:hover {
color: #656565;
text-decoration: none;
}
.listheading a {
background-image: url(../img/arrowlist.png);
background-repeat: no-repeat;
background-position: 10px 11px;
background-color: $primary;
color: #fff !important;
font-size: 13px;
border: 0 !important;
}
.listheading a:hover {
text-decoration: underline !important;
color: #fff !important;
}
@media (max-width: 767px) {
.navigation {
background-color: $primary;
margin-top: 10px;
}
.container.navigation {
padding-left: 0px;
padding-right: 0px;
}
.navbar-header a {
cursor: pointer;
color: #fff;
font-size: 18px;
display: inline-block !important;
padding-top: 12px;
padding-left: 10px;
}
.navbar-header .navbar-toggle {
border: 0;
background-color: $primary;
}
.navbar-header .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: $primary;
}
.navbar-header .navbar-close {
color: #fff;
font-size: 16px;
}
.navbar-header .navbar-close .icon-close {
background: url(../img/icon-close.png) no-repeat;
height: 15px;
width: 15px;
display: block;
}
.navbar-header .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-header a:hover {
text-decoration: none;
}
.navbar-default {
margin-bottom: 0px !important;
box-shadow: none !important;
}
.navbar-default .navbar-collapse {
border: 0;
box-shadow: none;
background-color: $open-navi;
padding-left: 0px;
padding-right: 0px;
}
.nav-pills>li {
border: 0;
}
.nav-justified>li>a {
text-align: left;
}
.nav-pills>li>a {
background: $open-navi;
border-radius: 0px !important;
color: $font-color;
text-shadow: none;
padding: 10px 25px;
}
.nav-pills>li>a:hover {
background: #fff;
color: $darkgrey;
}
.nav-pills>li>a.dropdown-toggle {
padding-left: 25px;
background: url(../img/arrowblack.png);
background-repeat: no-repeat;
background-position: 6px 16px;
}
.nav-pills>li>a.dropdown-toggle:hover {
background-color: #fff;
}
.nav-pills>li>a>.caret {
display: none;
}
.nav-pills>li+li {
margin-left: 0px;
}
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
color: $font-color;
background-color: #fff;
}
}
提前多多感谢!
答案 0 :(得分:0)
我用一些css(布局)修复它,这在智能手机的媒体查询中修复:
.dropdown-menu {
position:relative;
}
如果我切换到位置:相对下拉菜单只是向下滑动,菜单的其余部分仍然存在,并且与之前绝对定位的下拉菜单没有重叠,但为什么不能解决这个问题。盒子?