所以我有这个工作正常的导航栏。当我单击工具图标时，它会滚动，但之后我看不到工具图标。如果我尝试单击工具图标，它不起作用。我的意思是它不会向后滚动。我不知道出了什么问题。我该如何解决问题？下面是我的代码的工作示例。工作样本html, body { margin: 0; padding: 0; width: 100%; height: 100vh;}/* h1 { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); color: #000000; font-size: 48px; font-family: "Playfair Display"; font-weight: lighter;} *//* body{ background: #101010;} */.toggle-btn { position: fixed; margin: 1.4em; padding: 1em; width: 40px; height: 12px; right: 0; z-index: 1;}span.one { position: fixed; width: 40px; height: 2px; background: rgb(0, 0, 0); margin-right: 60px;}span.two { position: fixed; width: 40px; height: 2px; background: rgb(0, 0, 0); margin-top: 12px; margin-right: 60px;}.menu { z-index: 1; position: fixed; background:#000000; height: 100vh; width: 100%; top: -200%;}.data { padding: 8em 0 0 2em; text-align: left;}ul { list-style: none;}li:first-child { color: grey; font-family: Poppins; font-size: 24px;}li:not(:first-child) { color: #fff; font-size: 42px;}a { text-decoration: none; color: #cccccc; font-family: Poppins;}
1 回答
繁华开满天机
TA贡献1816条经验 获得超4个赞
我增加了 z-index 值。现在，您可以在单击侧面图标时关闭导航栏。单击它时，我还更改了小吃栏的背景颜色，以区分颜色。
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
/* h1 {
position: absolute;
top: 46%;
left: 50%;
transform: translate(-50%, -50%);
color: #000000;
font-size: 48px;
font-family: "Playfair Display";
font-weight: lighter;
} */
/*
body{
background: #101010;
} */
.toggle-btn {
position: fixed;
margin: 1.4em;
padding: 1em;
width: 40px;
height: 12px;
right: 0;
z-index: 99;
}
span.one {
position: fixed;
width: 40px;
height: 2px;
background: rgb(0, 0, 0);
margin-right: 60px;
}
span.two {
position: fixed;
width: 40px;
height: 2px;
background: rgb(0, 0, 0);
margin-top: 12px;
margin-right: 60px;
}
.menu {
z-index: 1;
position: fixed;
background: #000000;
height: 100vh;
width: 100%;
top: -200%;
}
.data {
padding: 8em 0 0 2em;
text-align: left;
}
ul {
list-style: none;
}
li:first-child {
color: grey;
font-family: Poppins;
font-size: 24px;
}
li:not(:first-child) {
color: #fff;
font-size: 42px;
}
a {
text-decoration: none;
color: #cccccc;
font-family: Poppins;
}
.colorchange {
background: white !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- navigation animation -->
<link rel="stylesheet" href="{{ url_for('static', filename='dist/css/nav.css') }}">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<!-- gallery css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" />
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400|Roboto+Mono:300i,400&display=swap" rel="stylesheet">
<!-- gsap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- parllax javascript -->
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.2.0/dist/simpleParallax.min.js"></script>
<!-- bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='dist/css/custom.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='node_modules/sal.js/dist/sal.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='dist/css/grid-gallery.css') }}">
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<script src="https://kit.fontawesome.com/a766f28a10.js"></script>
<title>AW Zone / {{title}}</title>
<style>
body {
font-family: 'Poppins', sans-serif;
font-family: 'Roboto Mono', monospace;
margin: 0;
padding: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- new navigation is here -->
<div class="toggle-btn">
<span class="one"></span>
<span class="two"></span>
</div>
<div class="menu">
<div class="data">
<ul>
<li>Navigation</li>
<li><a href="{{ url_for('index') }}" style="color: #ffffff;text-decoration: none;">Home</a></li>
<li><a href="{{ url_for('gallery') }}" style="color: #ffffff;text-decoration: none;">Gallery</a></li>
<li><a href="{{ url_for('about') }}" style="color: #ffffff;text-decoration: none;">About</a></li>
<li><a href="{{ url_for('contact') }}" style="color: #ffffff;text-decoration: none;">Contact</a></li>
</ul>
</div>
</div>
<!-- navbar ends here -->
<!-- bootstrap 4 JAVASCRIPT -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- greensock -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js"></script>
<script src="{{ url_for('static', filename='node_modules/sal.js/dist/sal.js') }}"></script>
<!-- script for gallery animation -->
<script type="text/javascript">
var t1 = new TimelineMax({
paused: true
});
t1.to(".one", 0.8, {
y: 6,
rotation: 45,
opacity: 1,
ease: Expo.easeInOut
});
t1.to(".two", 0.8, {
y: -6,
opacity: 1,
rotation: -45,
ease: Expo.easeInOut,
delay: -0.8
});
t1.to(".menu", 2, {
top: "0%",
ease: Expo.easeInOut,
delay: -2
});
t1.staggerFrom(".menu ul li", 2, {
x: -200,
opacity: 0,
ease: Expo.easeOut
}, 0.3);
t1.reverse();
$(document).on("click", ".toggle-btn", function() {
t1.reversed(!t1.reversed());
$("span.one").toggleClass("colorchange");
$("span.two").toggleClass("colorchange");
});
</script>
<!-- gallery effects -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<!-- script for gallery animation -->
<script>
baguetteBox.run('.grid-gallery', {
animation: 'slideIn'
});
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消