javascript - 我的导航栏的代码无法正常工作
问题描述
我是一个初学者,试图在一个练习网站上编写一个导航栏,但我无法得到正确的最终产品。
我的导航栏应该沿着页面顶部水平排列,然后在滚动时跟随页面并使用黑色阴影背景。目前加载页面时,文字在右侧垂直排列,然后在滚动时压缩。我在左上角还有一个缩小得太小的标志。最后,当您缩小页面时,右上角会弹出一个汉堡图标,该图标应该向您显示菜单选项,但它不再起作用。这就像这个页面的循环,我修复一件事并打破另一件事。我这样做只是为了好玩,因为我正在努力学习,但现在我感到沮丧,谢谢!
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
$(document).ready(function() {
$(".menu i").click(function() {
$("nav ul").toggleClass("active")
})
})
@import url('https://fonts.googleapis.com/css?family=Bungee|Bungee+Hairline|Oswald|Raleway&display=swap');
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .5s;
}
nav.black {
background: rgba(0, 0, 0, .8);
height: 80px;
padding: 10px 50px;
}
nav.logo {
float: left;
}
nav .logo img {
height: 80px;
transition: .5s;
}
nav.black .logo img {
padding: 20px;
height: 60px;
}
nav ul {
float: right;
margin: 0;
padding: 0px;
display: flex;
text-shadow: 2px 2px 4px #000000;
}
nav ul li {
List-style: none;
}
nav ul li a {
Line-height: 80px;
color: #fff;
padding: 5px 20px;
font-family: 'Raleway', sans-serif;
text-decoration: none;
text-transform: uppercase;
transition: .5s;
}
nav.black ul li a {
color: #fff;
Line-height: 20px;
}
nav ul li a.active,
nav ul li a:hover {
color: #fff;
background: #008cff;
}
.responsive-bar {
display: none;
}
@media (max-width: 800px) {
.responsive-bar {
display: block;
width: 100%;
height: 60px;
background: #262626;
position: fixed;
top: 0;
Left: 0;
padding: 5px 20px;
box-sizing: border-box;
z-index: 1;
}
.responsive-bar .logo img {
float: left;
height: 50px;
}
.responsive-bar .menu i {
float: right;
color: #fff;
margin: 0;
padding: 0;
Line-height: 50px;
cursor: pointer;
text-transform: uppercase;
}
nav {
padding: 60px;
}
nav.black {
display: none;
background: #262626;
height: 60px;
padding: 0;
}
nav .logo {
display: none;
}
nav ul {
position: absolute;
width: 100%;
top: 60;
Left: 0;
background: #262626;
float: none;
display: none;
}
nav ul.active {
display: block;
}
nav ul li {
width: 100%
}
nav ul li a {
display: block;
padding: 15px;
width: 100%;
height: 60px;
text-align: center;
Line-height: 30px;
color: #fff;
}
}
* {
box-sizing: border-box;
}
.main {
height: 1000px;
padding-left: 20px;
padding-right: 100px;
}
<div class="responsive-bar">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="menu">
<i class="fa fa-bars"></i>
</div>
</div>
<nav>
<div class="logo">
<img src="img/logo.png">
</div>
<ul>
<div class="active">
<li><a href="# ">Home</a></li>
<li><a href="#continue">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</div>
</ul>
</nav>
<div class="main">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
解决方案
推荐阅读
- android - 如何防止使用 gradlew 在 android 上为可穿戴设备创建 apk 文件?
- django-rest-framework - DRF 中的购物车
- json - 使用 TypeScript 翻译 PrimeNG 的菜单栏组件
- google-cloud-platform - GCP 中的 BillingAccountUser 角色问题
- nginx - NGINX 是否会使用代理重写工作以允许 localhost:8005 读取 localhost 上的 cookie,反之亦然?
- vue.js - 如何配置 Vite 的开发服务器以给出 404 错误?
- c# - 仅在调试期间使用 LINQ 进行查询
- azure-devops - 为什么 Web.*env*.config 文件没有被复制到工件中?
- linux - 如何在 Cassandra 服务器上查找每个客户端的流量配置文件?
- javascript - 爸爸每日笑话 API 返回未定义