Diskuze: Nefunkční otevírání a zavírání hamburger menu

Naučíme tě pracovat na home-office.

Zjistit více...

Aktivity

Vojtěch Raždík

Člen

Vojtěch Raždík:11.4.2020 15:01

Zdravím všechny,
nevím proč ale nefunguje mi hamburger menu. Otevírá i zavírá se ať kliknu kamkoliv na obrazovce a to nechci. Potřebuji aby se to otevřelo jen po kliknutí na menu a zavřelo jen když se to přesměruje na jinou stránku nebo dám zavřít. Ocením každou radu ať zjistím co dělám špatně.
Můj kód:
JS: https://www.itnetwork.cz/…lighter/1307
HTML: https://www.itnetwork.cz/…lighter/1308
CSS: https://www.itnetwork.cz/…lighter/1309

Zkusil jsem: Zkoušel jsem to volat prvně pouze přes class a teď i přes ID a pořád mi to nefunguje a ani strejda GOOGLE nepomohl.

Chci docílit: Zkouším zabrousit do JS ale nějak se mi nedaří vytvořit funkční hamburger menu.

Odpovědět

11.4.2020 15:01

Milan Turyna

Tvůrce

Milan Turyna:13.4.2020 10:17

Píše ti to něco do konzole?

Nahoru Odpovědět

13.4.2020 10:17

Řeš pouze to, co dokážeš ovlivnit.

šíma

Člen

šíma:13.4.2020 15:43

zkus zapojit jQuerry, a to tak, že do hlavičky WWW stránky přidáš:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

A poté, tento kód:

selectElement('#hamburgermenu'), addEventListener('click',()=>{
    selectElement('nav'). classList.toggle('active')
});

zkus nahradit tímto:

$( "#hamburgermenu" ).click(function() {
toggleClass(active);
}

Jen jsem to zkouknul, neprozkoumával jsem to nějak do hloubky.

Nahoru Odpovědět

13.4.2020 15:43

šíma = programátor !!!

Vojtěch Raždík

Člen

Vojtěch Raždík:14.4.2020 8:08

Konzole právě nepíše žádnou chybu až teď když jsem to nahradil novým kódem který byl špatně ukončený. To už jsem opravil ale stále to nejede.

jQuerry tam už mám jen novější verzi:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Po přidání kódu už se menu neotevře vůbec.

Nahoru Odpovědět

14.4.2020 8:08

šíma

Člen

šíma:15.4.2020 9:13

jo promiň, tam u toho toggleClass to má být takto: toggleClass('active') :-P

Nahoru Odpovědět

15.4.2020 9:13

šíma = programátor !!!

šíma

Člen

šíma:15.4.2020 9:18

Ale víš co, radši to zkus jinak :-) :

HTML:

nav role="navigation">
  <div id="menuToggle">
    <input type="checkbox" />
   <span></span>
    <span></span>
    <span></span>
    <ul id="menu">
      <a href="#"><li>Home</li></a>
      <a href="#"><li>About</li></a>
      <a href="#"><li>Info</li></a>
      <a href="#"><li>Contact</li></a>
    </ul>
  </div>
</nav>

CSS:

body
{
  margin: 0;
  padding: 0;

  /* make it look decent enough */
  background: #232323;
  color: #cdcdcd;
  font-family: "Avenir Next", "Avenir", sans-serif;
}

#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;

  z-index: 1;

  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;

  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;

  cursor: pointer;

  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */

  -webkit-touch-callout: none;
}
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;

  background: #cdcdcd;
  border-radius: 3px;

  z-index: 1;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;

  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  transform-origin: 0% 0%;
  transform: translate(-100%, 0);

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}
#menuToggle input:checked ~ ul
{
  transform: none;
}

Nahoru Odpovědět

15.4.2020 9:18

šíma = programátor !!!

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.