FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Vojtěch Raždík
Člen
Avatar
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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:13.4.2020 10:17

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

Nahoru Odpovědět
13.4.2020 10:17
Neaktivní uživatelský účet
Avatar
šíma
Člen
Avatar
ší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 !!!
Avatar
Vojtěch Raždík
Člen
Avatar
Odpovídá na Vojtěch Raždík
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/lib­s/jquery/3.4.1/jqu­ery.min.js"></scrip­t>

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

 
Nahoru Odpovědět
14.4.2020 8:08
Avatar
šíma
Člen
Avatar
Odpovídá na Vojtěch Raždík
šíma:15.4.2020 9:13

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

Nahoru Odpovědět
15.4.2020 9:13
šíma = programátor !!!
Avatar
šíma
Člen
Avatar
ší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.