Trädvy Permalänk
Medlem
Registrerad
Jul 2016

Menyn fungerar inte

Håller på att skapa en hamburgermeny men får den inte att öppna sig.
"ready" skrivs ut i consolen så filen hittas men "meny" skrivs inte ut.
Misstänker att det är #i-nav som är fel men vad borde det stå istället?

$(document).ready(function(){ console.log("ready"); $('#i-nav').click(function(){ console.log("meny"); $('ul').toggleClass('show'); }); }); <header> <div class="logo"> <a href="index.php"><img src="img/logga.png" alt="Logga"></a> <span class="slogan">klippt och skuren för rosor</span> <!--div class="mobile-toggle" id="mobile-toggle"></div--> </div><!--logo--> <a id="i-nav" href="#"><img class="toggleMenu" src="img/hamburgare.png" alt="hamburgermeny"></a> <nav> <ul> <li><a href="snittrosor.php" tabindex="0">Snittrosor</a> <ul> <li><a href="#" tabindex="-1">-Röda rosor</a></li> <li><a href="#" tabindex="-1">-Gula rosor</a></li> <li><a href="rosarosor.php" tabindex="-1">-Rosa rosor</a></li> <li><a href="#" tabindex="-1">-Vita rosor</a></li> </ul> </li> <li><a href="#" tabindex="1">Rosenbuskar</a></li> <li><a href="omrosor.php" tabindex="1">Om rosor</a></li> <li><a href="#" tabindex="1">Köp online</a></li> <li><a href="#" tabindex="5">Skötselråd</a></li> <li><a href="omkajsas.php" tabindex="6">Om Kajsas rosor</a></li> </ul> </nav> </header>

En annan fråga, någon som vet hur tabindex fungerar?
Som det är nu så kommer den till Rosenbuskar först och undermenyn öppnar sig inte.

Tack på förhand!

La till code-taggar
Trädvy Permalänk
Medlem
Registrerad
Jul 2012

För mig så skrivs "meny" ut i consolen när jag kopierade av din kod rakt av så jag vet inte vad du kan ha för något problem där.

Vet inte exakt hur tabindex funkar men det har i alla fall med att göra om "elementet" ska markeras eller inte när man trycker runt med tab-knappen. Tabindex="-1" gör så det inte går att komma dit genom att använda tab, osv.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Apr 2009

Hur ser CSS "show"-klassen ut då?
Det kanske saknas en style som visar upp menyn.

Mazariner är najs.

Trädvy Permalänk
Medlem
Registrerad
Jul 2016

Så här ser show ut i css.

.show {
display: block;
}

Trädvy Permalänk
Medlem
Registrerad
Jul 2016

@Davidson:
Konstigt nog fungerar det för mig med när jag bara använder den bifogade koden men inte tillsammans med övrig kod.
Måste fundera på vad det kan bero på.
header ligger inuti classen wrapper men det gör väl ingen skillnad för hur man skriver koden?
Är relativt ny på jquery och blandar gärna ihop det med vanilla javascript.

Trädvy Permalänk
Medlem
Plats
SweClockers forum
Registrerad
Aug 2012
Skrivet av Snillet71:

@Davidson:
Konstigt nog fungerar det för mig med när jag bara använder den bifogade koden men inte tillsammans med övrig kod.
Måste fundera på vad det kan bero på.
header ligger inuti classen wrapper men det gör väl ingen skillnad för hur man skriver koden?
Är relativt ny på jquery och blandar gärna ihop det med vanilla javascript.

Om du lägger upp hela koden (i [code][/code]-taggar och indenterad, annars kommer ingen orka läsa) kan du troligtvis få hjälp.

Guide: Roota din HTC - BB-Kod-knappar på Prisjakt

              Min burk - Kvävekyld till 80%
Phenom II X4 965@3900MHz (Sommarklock)
GTX 760@1111MHz

Ibland har jag fel, men då är det någon annans fel.

Trädvy Permalänk
Medlem
Registrerad
Jul 2012

@Snillet71: Vet inte vad problemet kan vara, men du skulle ju kunna testa att skriva koden såhär istället bara för att testa, det borde inte bli någon skillnad dock

$(document).on('click', '#i-nav', function(){ console.log("Meny") }

Trädvy Permalänk
Moderator
Plats
Linköping
Registrerad
Okt 2006

Fixade code-taggar så det blir lite roligare att läsa koden

Har du åsikter om moderering, frågor eller något annat kan du kontakta mig via shimonu@sweclockers.com

Trädvy Permalänk
Medlem
Registrerad
Jul 2016

@Shimonu: Tack!
Visste inte hur jag skulle göra.
Indenteringen försvann när jag skickade iväg meddelandet.

Trädvy Permalänk
Medlem
Registrerad
Jul 2016

Här är hela min header-fil. Kan kanske vara till hjälp, får det fortfarande inte att fungera.

<body> <div class="wrapper"> <header> <div class="logo"> <a href="index.php"><img src="img/logga.png" alt="Logga"></a> <span class="slogan">klippt och skuren för rosor</span> </div><!--logo--> <a id="i-nav" href="#"><img class="toggleMenu" src="img/hamburgare.png" alt="hamburgermeny"></a> <nav> <ul> <li><a href="snittrosor.php" tabindex="0">Snittrosor</a> <ul> <li><a href="#" tabindex="-1">-Röda rosor</a></li> <li><a href="#" tabindex="-1">-Gula rosor</a></li> <li><a href="rosarosor.php" tabindex="-1">-Rosa rosor</a></li> <li><a href="#" tabindex="-1">-Vita rosor</a></li> </ul> </li> <li><a href="#" tabindex="1">Rosenbuskar</a></li> <li><a href="omrosor.php" tabindex="1">Om rosor</a></li> <li><a href="#" tabindex="1">Köp online</a></li> <li><a href="#" tabindex="5">Skötselråd</a></li> <li><a href="omkajsas.php" tabindex="6">Om Kajsas rosor</a></li> </ul> </nav> </header>