编辑汉堡菜单内容的宽度但保持背景全宽
Edit width of the burger menu content but keep background full width
我对编码还很陌生,正在尝试创建一个网站作为练习,但我遇到了困难。
我希望我的导航具有全宽背景,但内容限制为 1180 像素
我试过使用
width: 1180px;
margin: 0 auto;
我遇到的问题是这样做包含点击的汉堡菜单背景。
html:
<header class="header">
<a href="/" class="logo">LOGO</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
css:
.header {
background-color: #fff;
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #1a1a1a;
}
.header li a {
display: inline-block;
padding: 20px 20px;
text-decoration: none;
color: #B3B3B3;
}
.header li a:hover {
color: #fff;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
https://codepen.io/zwirled/pen/PoPjxym
非常感谢任何帮助!
谢谢
问题是position:fixed。使用 div 元素作为位置辅助。这些元素会将 div 元素作为包含块元素。它是它的直接后代。将input元素从div元素中取出来控制下拉。添加边距:li 和位置辅助均为 0 auto。
HTML:
<header class="header">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<div class="positionaid">
<a href="/" class="logo">LOGO</a>
<label class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
</div>
<ul class="menu">
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
CSS:
.header {
left: 0px;
width: 100%;
background-color: #fff;
position: fixed;
z-index: 3;
}
.header li, .positionaid {
width:1080px;
margin: 0 auto;
}
祝你好运。
我对编码还很陌生,正在尝试创建一个网站作为练习,但我遇到了困难。
我希望我的导航具有全宽背景,但内容限制为 1180 像素
我试过使用
width: 1180px;
margin: 0 auto;
我遇到的问题是这样做包含点击的汉堡菜单背景。
html:
<header class="header">
<a href="/" class="logo">LOGO</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
css:
.header {
background-color: #fff;
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #1a1a1a;
}
.header li a {
display: inline-block;
padding: 20px 20px;
text-decoration: none;
color: #B3B3B3;
}
.header li a:hover {
color: #fff;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
https://codepen.io/zwirled/pen/PoPjxym
非常感谢任何帮助!
谢谢
问题是position:fixed。使用 div 元素作为位置辅助。这些元素会将 div 元素作为包含块元素。它是它的直接后代。将input元素从div元素中取出来控制下拉。添加边距:li 和位置辅助均为 0 auto。
HTML:
<header class="header">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<div class="positionaid">
<a href="/" class="logo">LOGO</a>
<label class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
</div>
<ul class="menu">
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
CSS:
.header {
left: 0px;
width: 100%;
background-color: #fff;
position: fixed;
z-index: 3;
}
.header li, .positionaid {
width:1080px;
margin: 0 auto;
}
祝你好运。