Cómo activar la casilla de verificación de área diferente?

Others 2022-05-25 15:14:44 views: 0
Linas adrenalina:

Estoy frente al problema con mi menú (menú de hamburguesa) desplegable. Quiero que el menú a desaparecer cuando hago clic en el elemento de la lista (enlace). El menú de hamburguesa se crea sin Javascript, utilizando casilla de verificación. ¿Es posible hacer eso en HTML / CSS, o sólo con jQuery o JavaScript?

Aquí está mi página web: https://gelezhinis.github.io/ritpaslaugos/

#navbar .menu-wrap {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
}

#navbar .menu-wrap .toggler {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  cursor: pointer;
  width: 80px;
  height: 80px;
  opacity: 0;
}
#navbar .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 80px;
  height: 80px;
  padding: 1.5rem;
  margin-top: 0.8rem;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hamburger Line */
#navbar .menu-wrap .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 3px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}
/* Hamburger Top & Bottom Lines */
#navbar .menu-wrap .hamburger > div:before,
#navbar .menu-wrap .hamburger > div:after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -10px;
  width: 100%;
  height: 3px;
  background: inherit;
}
/* Moves 3rd Line Down */
#navbar .menu-wrap .hamburger > div:after {
  top: 10px;
}
/* Toggler Animation */
#navbar .menu-wrap .toggler:checked + .hamburger > div {
  transform: rotate(135deg);
}
/* Turns Lines Into X */
#navbar .menu-wrap .toggler:checked + .hamburger > div:before,
#navbar .menu-wrap .toggler:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}
/* Rotate On Hover When Checked */
#navbar .menu-wrap .toggler:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}
/* Show Menu */
#navbar .menu-wrap .toggler:checked ~ .menu {
  visibility: visible;
}
#navbar .menu-wrap .toggler:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: 0.75s;
  /* background: #eee; */
}
#navbar .menu-wrap .toggler:checked ~ .menu > div > div {
  opacity: 1;
  transition: opacity 0.4s ease 0.4s;
}

/* Hide Menu */



#navbar .menu-wrap .menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#navbar .menu-wrap .menu > div {
  background: rgba(24, 39, 51, 0.9);
  border-radius: 50%;
  width: 200vw;
  height: 200vw;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: all 0.4s ease;
}
#navbar .menu-wrap .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
}
#navbar .menu-wrap .menu > div > div > ul > li {
  list-style: none;
  color: #fff;
  font-size: 1.5rem;
  padding: 1rem;
}
#navbar .menu-wrap .menu > div > div > ul > li > a {
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 2rem;
  transition: color 0.4s ease;
}
#navbar .menu-wrap .menu > div > div > ul > li > a:hover {
  color: #777;
}
<div class="menu-wrap">
        <input type="checkbox" class="toggler" />
        <div class="hamburger"><div></div></div>
        <div class="menu">
          <div>
            <div>
              <ul>
                <li><a href="#about">Apie</a></li>
                <li><a href="#services">Paslaugos</a></li>
                <li><a href="#halls">Salės</a></li>
                <li><a href="#contact">Kontaktai</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>

mplungjan: 
setTimeout(function() { $(".toggler").click(); },1000)

si quieres un retraso, de lo contrario sólo 

$(".toggler").click()

Me gusta esto

$(".menu a").on("click", function() {
  setTimeout(function() {
    $(".toggler").click();
  }, 1000)
})
@import url('<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@700&display=swap" rel="stylesheet">');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Noto Serif', serif;
  line-height: 1.4rem;
}

a {
  text-decoration: none;
}

p {
  margin: 0.75rem 0;
}


/* Utility Classes */

.container {
  max-width: 1100px;
  margin: auto;
  overflow: hidden;
}

.text-center {
  text-align: center;
}

.text-primary {
  color: black;
}

.m-heading {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.btn:hover {
  background: #777;
  cursor: pointer;
}

.btn:focus {
  outline: 0;
}

.btn {
  display: inline-block;
  color: white;
  background: black;
  /* border: 2px solid #777; */
  border-radius: 4px;
  padding: 1rem 2rem;
  border: none;
  width: 200px;
  font-size: 1.5rem;
}

.btn a {
  color: inherit;
}

.p-lead {
  font-size: 1.3rem;
}

.bg-light {
  background: #f4f4f4;
  color: black;
}

.py-1 {
  padding: 1.5rem 0;
}

.py-2 {
  padding: 2rem 0;
}

.py-3 {
  padding: 3rem 0;
}

.hall-card {
  background: white;
  padding: 1rem;
}


/* Navbar */

#navbar {
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: black;
  color: white;
  z-index: 1;
  padding: 1rem;
  height: 100x;
}

#navbar img {
  width: 35%;
  margin-left: 1rem;
}


/* #navbar ul {
  display: none;
  align-items: center;
  list-style: none;
}

#navbar ul li a {
  color: white;
  padding: 0.75rem;
  margin: 0 0.25rem;
  font-size: 1.5rem;
  text-transform: uppercase;
}

#navbar ul li a:hover {
  background: #777;
  border-radius: 4px;
} */


/* #navbar .menu-wrap {
  display: none;
} */


/* @media (max-width: 900px) {
  #navbar ul {
    display: none;
  } */


/* Navbar mobile */

#navbar .menu-wrap {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
}

#navbar .menu-wrap .toggler {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  cursor: pointer;
  width: 80px;
  height: 80px;
  opacity: 0;
}

#navbar .menu-wrap .hamburger {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 80px;
  height: 80px;
  padding: 1.5rem;
  margin-top: 0.8rem;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Hamburger Line */

#navbar .menu-wrap .hamburger>div {
  position: relative;
  flex: none;
  width: 100%;
  height: 3px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}


/* Hamburger Top & Bottom Lines */

#navbar .menu-wrap .hamburger>div:before,
#navbar .menu-wrap .hamburger>div:after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -10px;
  width: 100%;
  height: 3px;
  background: inherit;
}


/* Moves 3rd Line Down */

#navbar .menu-wrap .hamburger>div:after {
  top: 10px;
}


/* Toggler Animation */

#navbar .menu-wrap .toggler:checked+.hamburger>div {
  transform: rotate(135deg);
}


/* Turns Lines Into X */

#navbar .menu-wrap .toggler:checked+.hamburger>div:before,
#navbar .menu-wrap .toggler:checked+.hamburger>div:after {
  top: 0;
  transform: rotate(90deg);
}


/* Rotate On Hover When Checked */

#navbar .menu-wrap .toggler:checked:hover+.hamburger>div {
  transform: rotate(225deg);
}


/* Show Menu */

#navbar .menu-wrap .toggler:checked~.menu {
  visibility: visible;
}

#navbar .menu-wrap .toggler:checked~.menu>div {
  transform: scale(1);
  transition-duration: 0.75s;
  /* background: #eee; */
}

#navbar .menu-wrap .toggler:checked~.menu>div>div {
  opacity: 1;
  transition: opacity 0.4s ease 0.4s;
}

#navbar .menu-wrap .menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#navbar .menu-wrap .menu>div {
  background: rgba(24, 39, 51, 0.9);
  border-radius: 50%;
  width: 200vw;
  height: 200vw;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: all 0.4s ease;
}

#navbar .menu-wrap .menu>div>div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#navbar .menu-wrap .menu>div>div>ul>li {
  list-style: none;
  color: #fff;
  font-size: 1.5rem;
  padding: 1rem;
}

#navbar .menu-wrap .menu>div>div>ul>li>a {
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 2rem;
  transition: color 0.4s ease;
}

#navbar .menu-wrap .menu>div>div>ul>li>a:hover {
  color: #777;
}


/* About */

#about {
  background: white;
  height: 100vh;
  color: black;
}

#about .about-content {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 80%;
  padding: 0 2rem;
}

#about .about-content .image img {
  width: 100%;
}

#about .about-content button {
  display: inline-block;
  color: white;
  background: black;
  border-radius: 4px;
  padding: 1rem 2rem;
  border: none;
  width: 200px;
  font-size: 1.5rem;
}

#about .about-content button:hover {
  background: #777;
  cursor: pointer;
}

#about .about-content button:focus {
  outline: 0;
}

#about .about-content button a {
  color: inherit;
}


/* Section: Services */

.items {
  display: flex;
  padding: 1rem;
  margin-top: 4rem;
}

#services .items .item {
  flex: 1;
  text-align: center;
  padding: 1rem;
  border-right: 2px solid black;
}

#services .items>*:last-child {
  border-right: none;
}


/* Section: Halls */

#halls .halls-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  margin-top: 2rem;
}

#halls .halls-container img {
  width: 300px;
}


/* #halls .halls-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

.hall {
  margin-bottom: 3rem;
}

.hall p {
  width: 380px;
}

.hall img {
  width: 100%;
} */


/* Section: Contact */

#contact .contacts {
  display: flex;
  margin-top: 4rem;
}

#contact .contacts .map {
  margin-left: 1rem;
}

#contact .map,
#contact .contact-info {
  flex: 1;
}

#contact .contact-info {
  display: flex;
  flex-flow: column;
  text-align: center;
}

#contact .contact-info div {
  margin: 0.75rem;
}


/* Footer */

#main-footer {
  background: black;
  color: white;
}

.footer button {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navbar">
  <div class="logo">
    <img src="img/logo.png" alt="logo">
  </div>
  <div class="menu-wrap">
    <input type="checkbox" class="toggler">
    <div class="hamburger">
      <div></div>
    </div>
    <div class="menu">
      <div>
        <div>
          <ul>
            <li><a href="#about">Apie</a></li>
            <li><a href="#services">Paslaugos</a></li>
            <li><a href="#halls">Salės</a></li>
            <li><a href="#contact">Kontaktai</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

Supongo que te gusta

Origin http://10.200.1.11:23101/article/api/json?id=405067&siteId=1
Recomendado
Clasificación
Diario
Más
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)

Code World

© 2018 codetd.com