Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Menyn fungerar inte

1
Skriv svar
Permalänk
Medlem
●

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
Redigera
Citera flera Citera
Permalänk
Medlem
●

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.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

Så här ser show ut i css.

.show {
display: block;
}

Redigera
Citera flera Citera
Permalänk
Medlem
●

@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.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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.

Gå till inlägget

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.

Visa signatur

Spela Swemantle! Du vet att du vill.

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

@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")
}
Redigera
Citera flera Citera
Permalänk
Hedersmedlem ★
●

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

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>
Senast redigerat
Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara