个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我试图用一些点 HTML 和 CSS 制作一个导航开启器，但脚本无法正常工作。非常感谢任何帮助。
我的代码:
const burger = document.querySelector(".burger");
const navLinks = document.querySelector(".item-menu");
const links = document.querySelectorAll(".list");
burger.addEventListener("click", () => {
navLinks.classList.toggle("open");
});* {
margin: 0px;
padding: 0;
}
body {
font-family: cursive, sans-serif, fantasy;
background-color: #f3f3f4
}
nav {
height: 12vh;
background-color: #0303;
display: block;
}
.item-menu {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
width: 50%;
height: 100%;
margin-left: auto;
cursor: pointer;
}
.a
/* menu words */
{
text-decoration: none;
list-style: none;
color: black;
}
/*---------------------------------PHONE---------------------------------*/
@media only screen and (max-width: 750px) {
/* BURGER NAV DOTS */
.dot {
float: right;
display: block;
height: 25px;
width: 25px;
border-radius: 50%;
}
#burger:hover {
cursor: pointer;
}
#burger:hover .dot:nth-child(1) {
box-shadow: 0 0 10px #fff900;
}
#burger:hover .dot:nth-child(2) {
box-shadow: 0 0 10px #08ff28;
}
#burger:hover .dot:nth-child(3) {
box-shadow: 0 0 10px #ff005a;
}
#burger:hover .dot:nth-child(4) {
box-shadow: 0 0 10px #3896ff;
}
/* DOTS */
#burger .dot:nth-child(1) {
background-color: #fff900;
animation: animate 2s linear inifinite;
}
#burger .dot:nth-child(2) {
background-color: #08ff28;
animation: animate 2s linear inifinite;
}
#burger .dot:nth-child(3) {
background-color: #ff005a;
animation: animate 2s linear inifinite;
}
#burger .dot:nth-child(4) {
background-color: #3896ff;
animation: animate 2s linear inifinite;
}
#burger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
width: 50px;
height: 50px;
}
nav {
position: relative;
}
.item-menu {
position: fixed;
top: 2%;
left: -5%;
height: 85vh;
width: 100%;
clip-path: inset(0px 0px 692px 612px);
-webkit-clip-path: inset(0px 0px 692px 612px);
pointer-events: none;
cursor: pointer;
display: flex;
width: 84%;
height: 84%;
transition: all 1s ease-out;
align-items: center;
}
.a {
position: absolute;
top: 3%;
}
.item-menu.open {
clip-path: inset(0px 0px 692px 0px);
-webkit-clip-path: inset(0px 0px 692px 0px);
transition: all 1s ease-out;
pointer-events: all;
}
}<!DOCTYPE html>
<html>
<head>
<title> BURGER NAV </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--STYLESHEET-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<div id="burger">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<ul class="item-menu">
<li class="list"><a class="a" href=""> Home </a></li>
<li class="list"><a class="a" href=""> Portfoglio </a></li>
<li class="list"><a class="a" href=""> Experiences </a></li>
<li class="list"><a class="a" href=""> About me </a></li>
<li class="list"><a class="a" href=""> Contact </a></li>
</ul>
</nav>
</body>
</html>我的问题:
嗯，看起来按钮不能正常工作，我不明白为什么。他们告诉我脚本没有加载并把它放在主体的末尾并且已经加载了。我试图更改一些类，添加更多类，执行一个函数……以上都没有用……
拜托，我需要帮助...我快要崩溃了:)) =)) 也许编码不适合我 :X
最佳答案
在 'burger' 的 querySelector 中将其设置为const burger = document.querySelector("#burger");这是一个 id，所以我们使用“#”点“。”是给类(class)的
关于javascript - "Uncaught TypeError: Cannot read property ' 添加事件监听器 ' of null"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56013233/
24
4
0
最近开始学习oracle和sql。 在学习的过程中，我遇到了几个问题，我的 friend 在接受采访时被问到这些问题。 SELECT * FROM Employees WHERE NULL IS N
这个问题在这里已经有了答案: Can we subtract NULL pointers? (4 个回答) 关闭 2 个月前。 是否定义了NULL - NULL？ (char *)NULL - (ch
是否有推荐的方法(根据 .net Framework 指南)检查 null，例如: if (value == null) {//code1} else {//code2} 或 if (value !=
我正在尝试将值插入数据库，但出现这样的错误任何人都可以告诉我为什么该值为空，如下所示: An exception occurred while executing 'INSERT INTO perso
这个问题在这里已经有了答案: String concatenation with a null seems to nullify the entire string - is that desire
您好，我正在 Android 联系人搜索模块中工作。我正在查询下方运行。 cur = context.getContentResolver().query(ContactsContract.Data.
下面的 SQL 表定义说明了从我的 MYSQL 数据库创建表的语句之一，该数据库是由我公司的前开发人员开发的。 DROP TABLE IF EXISTS `classifieds`.`category
我主要有应用程序开发背景。在编程语言中 variable == null或 variable != null有效。 当涉及到 SQL 时，以下查询不会给出任何语法错误，但也不会返回正确的结果。 sel
我在尝试检查某些元素是否为 NULL 时遇到段错误或不。任何人都可以帮忙吗？ void addEdge(int i, int j) { if (i >= 0 && j > 0)
在 SQL 服务器中考虑到以下事实:Col1 和 Col2 包含数值和 NULL 值 SELECT COALESCE(Col1,Col2) 返回一个错误:“COALESCE 的至少一个参数必须是一个不
在 SQL 服务器中考虑到以下事实:Col1 和 Col2 包含数值和 NULL 值 SELECT COALESCE(Col1,Col2) 返回一个错误:“COALESCE 的至少一个参数必须是一个不
下面查询的关系代数表达式是什么？我找不到“Is Null”的表达式。 SELECT reader.name FROM reader LEFT JOIN book_borrow ON reader.ca
我正在尝试使用三元运算符来检查值是否为 null 并返回一个表达式或另一个。将此合并到 LINQ 表达式时，我遇到的是 LINQ 表达式的 Transact-SQL 转换试图执行“column = n
我在给定的代码中看到了以下行: select(0, (fd_set *) NULL, (fd_set *) NULL, (fd_set *) NULL, &timeout); http://linux
var re = /null/g; re.test('null null'); //> true re.test('null null'); //> true re.test('null null')
这个问题在这里已经有了答案: 关闭 13 年前。 我今天避开了一场关于数据库中空值的激烈辩论。 我的观点是 null 是未指定值的极好指示符。团队中有意见的其他每个人都认为零和空字符串是可行的方法。
由于此错误，我无法在模拟器中运行我的应用: Error:null value in entry: streamOutputFolder=null 或 gradle - Error:null value
我正在尝试在 Android 应用程序中创建电影数据库，但它返回错误。知道这意味着什么吗？ public Cursor returnData() { return db.query(TABLE
我一直在检查浏览器中的日期函数以及运行时间 new Date (null, null, null); 在开发工具控制台中，它给出了有效的日期 Chrome v 61 回归 Sun Dec 31 189
为什么 NA==NULL 会导致 logical (0) 而不是 FALSE？ 为什么 NULL==NULL 会导致 logical(0) 而不是 TRUE？ 最佳答案 NULL 是一个“零长度”对象
我是一名优秀的程序员,十分优秀！