html - 为什么该复选框不适用于导航?
问题描述
我试图用 Only CSS 制作一个移动导航栏,但即使复选框有效,它也没有做他们的工作。(我变了
#main-navigation label { display: none;}
至
display: block;
看看盒子是否有效。)我用过
#toggle
代替
#main-navigation input
但它没有用......我实际上使用了很多东西,但有些东西我做错了或者我错过了。请帮忙
#nav-bg {
background-color: gray;
width: 50%;
height: 76px;
right: 0;
position: absolute;
}
#main-navigation {
float: right;
}
#main-navigation a {
text-decoration: none;
background-color: gray;
color: black;
font-size: 16px; /* (default) */
padding: 29px;
line-height: 76px;
margin-left: -3px;
border-right: solid thin;
border-right-color: darkgray;
transition: 800ms;
}
#main-navigation a:hover {
background-color: black;
color: ghostwhite;
transition: 800ms;
}
.navigation-active {
background-color: black !important;
color: ghostwhite !important;
}
.navigation-active:hover {
color: gray !important;
}
/* |||------------------------||| */
#main-navigation label {
display: none;
}
#main-navigation input {
display: block;
}
@media only screen and (max-width: 950px) {
#title-bg{
width: 50%;
}
/* {sourced */
#main-navigation label {
display: block;
cursor: pointer;
float: right;
font-size: 26px;
margin: 18px 31.5px;
}
#main-navigation {
display: block;
}
#main-navigation nav {
display: none;
margin-top: 76px;
transition: 800ms;
}
#main-navigation a {
display: block;
padding: 3px;
font-size: 14.5px;
text-align: center;
clear: right;
}
#main-navigation input:checked + #main-navigation nav {
display: block;
}
<div id="nav-bg">
<div id="main-navigation">
<!-- sourced --->
<input type="checkbox" id="toggle">
<label for="toggle">☰</label>
<!-- /sourced -->
<nav>
<a href="#" class="navigation-active">HOME</a>
<a href="#">QUESTS</a>
<a href="#">CONTACT</a>
<a href="#">ABOUT</a>
</nav>
</div>
</div>
解决方案
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
推荐阅读
- json - 如何使用具有重复捕获组的后视功能
- javascript - 在数据库中插入数据时数组到字符串转换错误
- vb.net - 如何在 DataGridView 中显示包含文件中的列
- vb.net - 如何阻止代码在 RunWorkerAsync 之后执行下一行,直到它完成?
- swift - MapKit从坐标Swift 5绘制折线
- hadoop - (hive) 插入失败:row_number () over partition by with problem
- c# - 如何将字段添加到另一个表的投影?
- javascript - 使用 v-date-picker 处理 mySQL 和 V-Calendar 之间日期的最佳实践
- python - 如何修复 BeautifulSoup 破坏 asyncio 和 aiohttp 的异步执行?
- file - 如何在Julia中编辑文件的一行?