所以，我有一个导航栏，当宽度最大为 560px 时，移动设备上会出现汉堡菜单。我想做的是，当我单击 a : li a href （例如关于）时，我想关闭导航容器，而不是让它消失。有没有办法做到这一点？另外我希望这只适用于最大宽度 560px。
1 回答
忽然笑
TA贡献1806条经验 获得超5个赞
const ul = document.getElementsByTagName('ul')[0];
ul.addEventListener('click', () => {
const data = document.getElementById('nav');
data.checked = false
})
/*--------------------------------
FONTS
---------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/*--------------------------------
RESET
---------------------------------*/
* {
font-family: 'Noto Sans', sans-serif;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
scroll-behavior: smooth;
}
/*--------------------------------
GLOBAL
---------------------------------*/
p {
color: #767676;
line-height: 23px;
font-family: 'Nunito', sans-serif;
}
.btn {
color: #fff;
padding: 30px 60px;
font-size: 20px;
letter-spacing: 3px;
font-weight: 500;
background-color: #daa37f;
border-radius: 20px;
text-align: center;
text-transform: uppercase;
border-bottom: 5px solid #a37a60;
}
.btn--opacity {
animation: opacity 3s;
}
/*--------------------------------
NAVIGATION BAR
---------------------------------*/
nav {
background: rgb(0, 0, 0);
background: rgb(108, 108, 108);
background: linear-gradient(90deg, rgba(108, 108, 108, 1) 0%, rgba(78, 78, 78, 1) 35%, rgba(73, 73, 73, 1) 78%, rgba(29, 29, 29, 1) 100%);
height: 60px;
padding-right: 100px;
}
nav ul {
float: right;
}
nav ul li {
display: inline-block;
float: left;
}
nav ul li:not(:first-child) {
margin-left: 25px;
}
nav ul li a {
display: inline-block;
outline: none;
color: white;
font-size: 16px;
text-decoration: none;
letter-spacing: 0.04em;
}
nav ul li a:hover {
color: #d7a256;
text-decoration: none;
}
@media screen and (max-width: 560px) {
.nav-container {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: #1f2227;
opacity: 0;
transition: all 0.2s ease;
}
.nav-container ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-container ul li {
display: block;
float: none;
width: 100%;
text-align: right;
margin-bottom: 10px;
}
.nav-container ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-container ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-container ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-container ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-container ul li:not(:first-child) {
margin-left: 0;
}
.nav-container ul li a {
padding: 10px 25px;
opacity: 0;
color: #fff;
font-size: 24px;
font-weight: 600;
transform: translateY(-20px);
transition: all 0.2s ease;
}
.nav-open {
position: fixed;
right: 10px;
top: 10px;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-open i {
display: block;
width: 20px;
height: 2px;
background: white;
border-radius: 2px;
margin-left: 14px;
}
.nav-open i:nth-child(1) {
margin-top: 16px;
}
.nav-open i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-open i:nth-child(3) {
margin-top: 4px;
}
}
#nav:checked+.nav-open {
transform: rotate(45deg);
}
#nav:checked+.nav-open i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked+.nav-open i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked+.nav-open i:nth-child(2) {
opacity: 0;
}
#nav:checked+.nav-open i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked~.nav-container {
z-index: 9990;
opacity: 1;
}
#nav:checked~.nav-container ul li a {
opacity: 1;
transform: translateY(0);
}
.hidden {
display: none;
}
.mt-5,
.my-5 {
margin-top: 0rem !important;
}
/*--------------------------------
BANNER
---------------------------------*/
.banner {
background-image: url('../img/banner.jpg');
background-position: center;
background-size: cover;
background-attachment: fixed;
display: table;
width: 100%;
height: 93%;
position: relative;
}
.banner_overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: table;
height: 100%;
text-align: center;
}
.banner_container {
display: table-cell;
vertical-align: middle;
}
.banner_scroll-down {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -12px;
cursor: pointer;
animation: MoveUpDown 1s linear infinite;
}
/*--------------------------------
BANNER ANIMATION
---------------------------------*/
@keyframes MoveUpDown {
0%,
100% {
bottom: 0;
}
50% {
bottom: 10px;
}
}
@keyframes fadeInUp {
from {
transform: translate3d(0, 40px, 0)
}
to {
transform: translate3d(0, 0, 0);
opacity: 1
}
}
@-webkit-keyframes fadeInUp {
from {
transform: translate3d(0, 40px, 0)
}
to {
transform: translate3d(0, 0, 0);
opacity: 1
}
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: both
}
.animatedFadeInUp {
opacity: 0
}
.fadeInUp {
opacity: 0;
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
}
/*--------------------------------
Carpusel Gallery
---------------------------------*/
.w-100 {
object-fit: cover;
}
/*--------------------------------
MENU SECTION
---------------------------------*/
#menu {
min-height: 100vh;
width: 100%;
background-color: white;
}
.menu_title {
text-align: center;
padding-top: 150px;
font-size: 70px;
font-weight: 800;
opacity: 50%;
color: #dfaf6b;
}
.menu_titleb {
text-align: center;
padding-top: 65px;
font-size: 40px;
font-weight: 900;
color: #dfaf6b;
}
/*--------------------------------
Image Menu Lightbox
---------------------------------*/
a.lightbox img {
position: fixed;
scroll-behavior: none;
height: 150px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0, 0, 0, .3);
margin: 94px 20px 20px 20px;
}
/* Styles the lightbox, removes it from sight and adds the fade-in transition */
.lightbox-target {
z-index: 16;
position: fixed;
top: -100%;
width: 100%;
background: rgba(0, 0, 0, .7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}
/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0, 0, 0, .3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Styles the close link, adds the slide down transition */
a.lightbox-close {
display: block;
width: 50px;
height: 50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top: 10px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
/*--------------------------------
MENU SECTION IMAGE GRID
---------------------------------*/
.container {
padding: 5rem 0rem;
}
.img-wrapper-20 {
margin: 0rem 1.5rem 0rem 0rem;
transition: transform .2s;
}
.img-wrapper-20 img:hover {
transform: scale(1.08);
}
.img-dimension {
max-width: 100%;
}
@media screen and (max-width: 1000px) {
.d-flex {
display: flex;
flex-direction: column;
overflow: auto;
}
.img-wrapper-20 {
max-width: 80%;
margin: 0rem 1.5rem 0rem 0rem;
}
}
.galp {
margin-top: 20px;
text-align: center;
font-size: 20px;
font-weight: 700;
color: black;
}
.buttonn {
text-align: center;
}
/*--------------------------------
Footer
---------------------------------*/
ul {
margin: 0px;
padding: 0px;
}
.footer-section {
background-image: url('../img/banner-down.jpg');
background-position: center;
background-size: cover;
background-attachment: fixed;
position: relative;
}
.footer-cta {
border-bottom: 1px solid #373636;
}
.single-cta i {
color: #d4a253;
font-size: 30px;
float: left;
margin-top: 8px;
}
.cta-text {
padding-left: 15px;
display: inline-block;
}
.cta-text h4 {
color: #fff;
font-size: 20px;
font-weight: 700;
margin-bottom: 2px;
}
.cta-text h2 {
color: #fff;
font-size: 25px;
font-weight: 600;
}
.cta-text span {
color: #f4dcb6;
font-size: 15px;
font-weight: 900;
}
.footer-content {
position: relative;
z-index: 2;
}
.footer-pattern img {
position: absolute;
top: 0;
left: 0;
height: 330px;
background-size: cover;
background-position: 100% 100%;
}
.footer-logo {
margin-bottom: 30px;
}
.footer-logo img {
max-width: 200px;
}
.footer-text p {
margin-bottom: 14px;
font-size: 16px;
color: #f4dcb6;
line-height: 28px;
}
.footer-social-icon span {
color: #fff;
display: block;
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
}
.footer-social-icon a {
color: #fff;
font-size: 16px;
margin-right: 15px;
}
.footer-social-icon i {
height: 40px;
width: 40px;
text-align: center;
line-height: 38px;
border-radius: 50%;
}
.facebook-bg {
background: #3B5998;
}
.instagram-bg {
background: #9254a9;
}
.footer-widget-heading h3 {
color: #fff;
font-size: 20px;
font-weight: 600;
margin-bottom: 40px;
position: relative;
}
.footer-widget-heading h3::before {
content: "";
position: absolute;
left: 0;
bottom: -15px;
height: 2px;
width: 50px;
background: #ff5e14;
}
.footer-widget ul li {
display: inline-block;
float: left;
width: 50%;
margin-bottom: 12px;
}
.footer-widget ul li a:hover {
color: #ff5e14;
}
.footer-widget ul li a {
color: #878787;
text-transform: capitalize;
}
.subscribe-form {
position: relative;
overflow: hidden;
}
.subscribe-form input {
width: 100%;
padding: 14px 28px;
background: #2E2E2E;
border: 1px solid #2E2E2E;
color: #fff;
}
.subscribe-form button {
position: absolute;
right: 0;
background: #ff5e14;
padding: 13px 20px;
border: 1px solid #ff5e14;
top: 0;
}
.subscribe-form button i {
color: #fff;
font-size: 22px;
transform: rotate(-6deg);
}
.align-items-center {
-ms-flex-align: center!important;
align-items: center!important;
}
.d-flex {
display: -ms-flexbox!important;
display: flex!important;
}
.buttonn {
margin-bottom: 80px;
}
@media screen and (max-width: 1000px) {
.buttonn {
margin-bottom: 80px;
margin-right: 22px;
}
}
.map-container-3 {
overflow: auto;
padding-bottom: 16.25%;
position: relative;
height: 30%;
}
.map-container-3 iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="master.css">
</head>
<body>
<nav>
<input type="checkbox" id="nav" class="hidden" />
<label for="nav" class="nav-open"><i></i><i></i><i></i></label>
<div class="nav-container">
<ul>
<li><a href="#home" style="color:#d7a256">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#footer">Find us</a></li>
</ul>
</div>
</nav>
</body>
</html>
添加回答
举报
0/150
提交
取消