Bootstrap 容器内桌面上的全角大型菜单
Full width mega menu on desktop within a Bootstrap Container
我正在尝试创建一个位于导航列表元素中的大型菜单,但同时大型菜单需要跨越页面的整个宽度。
我坚持认为大型菜单是相对于它的父级所在的位置而言的。
大型菜单与第一个导航项对齐,我希望它与整个页面的左边缘齐平。
是否有非 JS 解决方案?
附上的图片是我目前拥有的。
<div class="header">
<div class="container">
<div class="row">
<div class="col-xs-3 logo">Logo</div>
<div class="col-xs-6 nav">
<ul>
<li>
<a href="#">Link 1</a>
<div class="mega-menu">
This needs to be full width.
</div>
</li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</div>
<div class="col-xs-3 secondary-nav">Other links</div>
</div>
</div>
</div>
.header {
width: 100%;
}
.container {
background-color: #ccc;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.nav ul {
display: inline-block;
}
.nav ul li {
display: block;
float: left;
margin-right: 20px;
}
.nav ul li a {
background-color: #888;
color: #fff;
}
.nav .mega-menu {
background-color: #aaa;
display: block;
height: 500px;
position: absolute;
top: 35px;
width: 100vw;
}
将这两行添加到您的 .nav .mega-menu 的 css:
.nav .mega-menu {
position: fixed;
left: 0px;
}
jsfiddle:
https://jsfiddle.net/n2oodnrz/23/
您可以将 "position: static;" 添加到 CSS 中的 .nav。绝对定位的元素将 "stuck" 在任何具有非静态定位的父元素中。
我正在尝试创建一个位于导航列表元素中的大型菜单,但同时大型菜单需要跨越页面的整个宽度。
我坚持认为大型菜单是相对于它的父级所在的位置而言的。 大型菜单与第一个导航项对齐,我希望它与整个页面的左边缘齐平。
是否有非 JS 解决方案?
附上的图片是我目前拥有的。
<div class="header">
<div class="container">
<div class="row">
<div class="col-xs-3 logo">Logo</div>
<div class="col-xs-6 nav">
<ul>
<li>
<a href="#">Link 1</a>
<div class="mega-menu">
This needs to be full width.
</div>
</li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</div>
<div class="col-xs-3 secondary-nav">Other links</div>
</div>
</div>
</div>
.header {
width: 100%;
}
.container {
background-color: #ccc;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.nav ul {
display: inline-block;
}
.nav ul li {
display: block;
float: left;
margin-right: 20px;
}
.nav ul li a {
background-color: #888;
color: #fff;
}
.nav .mega-menu {
background-color: #aaa;
display: block;
height: 500px;
position: absolute;
top: 35px;
width: 100vw;
}
将这两行添加到您的 .nav .mega-menu 的 css:
.nav .mega-menu {
position: fixed;
left: 0px;
}
jsfiddle: https://jsfiddle.net/n2oodnrz/23/
您可以将 "position: static;" 添加到 CSS 中的 .nav。绝对定位的元素将 "stuck" 在任何具有非静态定位的父元素中。