如何使用 :checked 响应式导航栏使用 css
how to use :checked for responsive navbar using css
我添加了一个带有 class checkButton 的复选框。
<div class="hamburger">
<input type="checkbox" id="check"/>
<label for="check" class="checkButton">
<i class="fas fa-bars" style="font-size: 35px"></i>
</label>
</div>
</div>
<div>
<ul class="navItems">
<li><a href="#home" class="navItem active">HOME</a></li>
<li><a href="#services" class="navItem">SERVICES</a></li>
<li><a href="#projects" class="navItem">PROJECTS</a></li>
<li><a href="#ourTeam" class="navItem">OUR TEAM</a></li>
<li><a href="#contact" class="navItem">CONTACT</a></li>
</ul>
</div>
然后我添加了一些 CSS 来确定点击时的外观。
ul{
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
z-index: 0;
right: 100%;
background-color: #e54136;
transition: all .5s;
}
能否请您告诉我如何使用 :clicked
和 link 以便我的 ul
在单击 checkButton
class 时发生变化。
这是我所做的,但没有用。
ul{
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
z-index: 0;
right: 100%;
background-color: #e54136;
transition: all .5s;
}
勾选时,必须在ul
中带上right: 0;
。
.checkButton:checked ~ ul{
right: 0%;
}
General Sibling Combinator 引用左侧元素的兄弟。
您的 ul
不是您的 input
的兄弟姐妹。它是 child 输入的祖父母(或 表亲,一旦删除 )的兄弟姐妹。
no way 到 select ul
来自 input
所以要让它工作,你需要重新安排你的标记。
……但是不要。 CSS 单独不是解决这个问题的好工具。使用 JavaScript。利用 ARIA.
等辅助工具
这应该有效
var check = document.querySelector('.hamburger > .checkButton');
var menu = document.querySelector('.navItems');
check.addEventListener('click', function(e) {
e.preventDefault();
menu.classList.toggle('show');
});
ul {
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
z-index: 0;
right: 100%;
background-color: #e54136;
transition: all .5s;
}
ul.show {
right: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<div class="hamburger">
<button class="checkButton">
<i class="fas fa-bars"></i>
</button>
</div>
<ul class="navItems">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
这是一个非常简单的例子,说明它在没有 JS 的情况下应该如何工作:
label {
cursor:pointer;
}
input + nav {
visibility:hidden;
}
input:checked + nav {
visibility:visible;
}
<label for="a1">Hamburger button, click me</label>
<input type="checkbox" id="a1">
<nav>Hidden menu</nav>
ul ~ p 选择前面有
元素的每个元素。
为了更好地理解阅读 https://www.w3schools.com/cssref/css_selectors.asp
但是如果你不想使用 jQuery
的 js
这是带有复选框的代码
ul.navItems{
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
z-index: 0;
right: 100%;
background-color: #e54136;
transition: all .5s;
}
.hamburger input:checked + ul.navItems {
right: 0%;
}
<div>
<div class="hamburger">
<input type="checkbox" id="check"/>
<ul class="navItems">
<li><a href="#home" class="navItem active">HOME</a></li>
<li><a href="#services" class="navItem">SERVICES</a></li>
<li><a href="#projects" class="navItem">PROJECTS</a></li>
<li><a href="#ourTeam" class="navItem">OUR TEAM</a></li>
<li><a href="#contact" class="navItem">CONTACT</a></li>
</ul>
</div>
</div>
我添加了一个带有 class checkButton 的复选框。
<div class="hamburger">
<input type="checkbox" id="check"/>
<label for="check" class="checkButton">
<i class="fas fa-bars" style="font-size: 35px"></i>
</label>
</div>
</div>
<div>
<ul class="navItems">
<li><a href="#home" class="navItem active">HOME</a></li>
<li><a href="#services" class="navItem">SERVICES</a></li>
<li><a href="#projects" class="navItem">PROJECTS</a></li>
<li><a href="#ourTeam" class="navItem">OUR TEAM</a></li>
<li><a href="#contact" class="navItem">CONTACT</a></li>
</ul>
</div>
然后我添加了一些 CSS 来确定点击时的外观。
ul{
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
z-index: 0;
right: 100%;
background-color: #e54136;
transition: all .5s;
}
能否请您告诉我如何使用 :clicked
和 link 以便我的 ul
在单击 checkButton
class 时发生变化。
这是我所做的,但没有用。
ul{
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
z-index: 0;
right: 100%;
background-color: #e54136;
transition: all .5s;
}
勾选时,必须在ul
中带上right: 0;
。
.checkButton:checked ~ ul{
right: 0%;
}
General Sibling Combinator 引用左侧元素的兄弟。
您的 ul
不是您的 input
的兄弟姐妹。它是 child 输入的祖父母(或 表亲,一旦删除 )的兄弟姐妹。
no way 到 select ul
来自 input
所以要让它工作,你需要重新安排你的标记。
……但是不要。 CSS 单独不是解决这个问题的好工具。使用 JavaScript。利用 ARIA.
等辅助工具这应该有效
var check = document.querySelector('.hamburger > .checkButton');
var menu = document.querySelector('.navItems');
check.addEventListener('click', function(e) {
e.preventDefault();
menu.classList.toggle('show');
});
ul {
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
z-index: 0;
right: 100%;
background-color: #e54136;
transition: all .5s;
}
ul.show {
right: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<div class="hamburger">
<button class="checkButton">
<i class="fas fa-bars"></i>
</button>
</div>
<ul class="navItems">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
这是一个非常简单的例子,说明它在没有 JS 的情况下应该如何工作:
label {
cursor:pointer;
}
input + nav {
visibility:hidden;
}
input:checked + nav {
visibility:visible;
}
<label for="a1">Hamburger button, click me</label>
<input type="checkbox" id="a1">
<nav>Hidden menu</nav>
ul ~ p 选择前面有
元素的每个元素。 为了更好地理解阅读 https://www.w3schools.com/cssref/css_selectors.asp
但是如果你不想使用 jQuery
的 js这是带有复选框的代码
ul.navItems{
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
z-index: 0;
right: 100%;
background-color: #e54136;
transition: all .5s;
}
.hamburger input:checked + ul.navItems {
right: 0%;
}
<div>
<div class="hamburger">
<input type="checkbox" id="check"/>
<ul class="navItems">
<li><a href="#home" class="navItem active">HOME</a></li>
<li><a href="#services" class="navItem">SERVICES</a></li>
<li><a href="#projects" class="navItem">PROJECTS</a></li>
<li><a href="#ourTeam" class="navItem">OUR TEAM</a></li>
<li><a href="#contact" class="navItem">CONTACT</a></li>
</ul>
</div>
</div>