繁华开满天机
我增加了 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>