Využij akce až 30 % zdarma při nákupu e-learningu. Více informací. Zároveň je tento týden sleva až 80 % na e-learning týkající se C# .NET
Hledáme nového kolegu do redakce - 100% home office, 100% flexibilní pracovní doba. Více informací.
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
Milan Turyna
Redaktor
Avatar
Milan Turyna:13.4.2020 10:17

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

 
Nahoru Odpovědět
13.4.2020 10:17
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 !!!
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
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.