Gå til innhold

Javascript meny

prosjeik

Av prosjeik
i Programmering og webutvikling

Anbefalte innlegg

prosjeik

prosjeik

Skrevet
Skrevet

Hei. Jeg prøver å få denne menyen til å fungere. Det skal være en knapp du trykker for å få <div>-området til å vises/skjules. Men jeg får det ikke til.

 

Skulle gjerne ha sett hele html dokumentet slik det burde se ut for å fungere.

 

Hvis noen har tips om andre menyer som kan poppe ut fra venstresiden i et html dokument, så er jeg takknemlig for det.

 

På forhånd takk :)

 

Sjekk denne siden:

 

http://jsfiddle.net/HfdXY/

 

 

Her er koden:

 

<html>
<head>

<script>

$("#openMenu").click(function() {	 var menu = $("#menu");	 if ($(menu).is(":visible")) {		 $(menu).animate({width: 0}, 1000, function() {$(menu).hide();});	 } else {		 $(menu).show().animate({width: 100}, 1000);			    } });​

</script>
<script type="text/css">
#menu {	 height: 300px;	 width: 0px;	 border: 1px solid black;	 display: none; }​
</script>

</head>
<body>

<div id="menu">Menu</div> 

<button id="openMenu">Toggle menu</button>​

</body>
</html>

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
prosjeik

prosjeik

Skrevet
  • Forfatter
Skrevet
Du vet såpass at koden din krever jQuery for å fungere?

 

Ja, jeg har hørt om jQuery, men aldri brukt det før.

 

Har googlet litt... men fungerer ikke enda..

 

Er dette riktig måte å bruke det på:

 

<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script>

$("#openMenu").click(function() {	 var menu = $("#menu");	 if ($(menu).is(":visible")) {		 $(menu).animate({width: 0}, 1000, function() {$(menu).hide();});	 } else {		 $(menu).show().animate({width: 100}, 1000);			    } });​

</script>
<script type="text/css">
#menu {	 height: 300px;	 width: 0px;	 border: 1px solid black;	 display: none; }​
</script>

</head>
<body>

<div id="menu">Menu</div> 

<button id="openMenu">Toggle menu</button>​

</body>
</html>

Lenke til kommentar
prosjeik

prosjeik

Skrevet
  • Forfatter
Skrevet

Nå ser koden slik ut - men fungerer ikke enda:

 

<html>
<head>
<script>

$("#openMenu").click(function() {	 var menu = $("#menu");	 if ($(menu).is(":visible")) {		 $(menu).animate({width: 0}, 1000, function() {$(menu).hide();});	 } else {		 $(menu).show().animate({width: 100}, 1000);			    } });​

</script>
<style type="text/css">
#menu {	 height: 300px;	 width: 0px;	 border: 1px solid black;	 display: none; }​
</style>

</head>
<body>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>


<div id="menu">Menu</div> 

<button id="openMenu">Toggle menu</button>​

</body>
</html>

 

Knappen vises men det står et spørsmålstegn bak.

Lenke til kommentar
Gjest

Gjest

Skrevet
Skrevet

Hehe, du må også ha filen jQuery, du kan ikke bare inkludere den.

Du kan jo bare bruke en CDN (Content Download Manager)

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

Den vil inkludere jQuery 1.8.2 på nettsiden din. Er viktig at dette står i head-tagen og før alle dine jQuery-koder.

Lenke til kommentar
prosjeik

prosjeik

Skrevet
  • Forfatter
Skrevet

Jeg har lastet ned den filen - ligger i samme mappe med navnet jquery-1.8.2.min.js.

 

Jeg flytter den opp igjen...

... men nei.

 

Nå er koden slik:

<html>
<head>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script>

$("#openMenu").click(function() {	 var menu = $("#menu");	 if ($(menu).is(":visible")) {		 $(menu).animate({width: 0}, 1000, function() {$(menu).hide();});	 } else {		 $(menu).show().animate({width: 100}, 1000);			    } });​

</script>
<style type="text/css">
#menu {	 height: 300px;	 width: 0px;	 border: 1px solid black;	 display: none; }​
</style>

</head>
<body>
<div id="menu">Menu<p>
<a href="">Secret</a><br>
</div> 

<button id="openMenu">Toggle menu</button>​

</body>
</html>

 

Det som vises på skjermen nå er knappen etterfulgt av spørsmålstegn

Lenke til kommentar
Gjest

Gjest

Skrevet
Skrevet

Funerende html-kode

<!DOCTYPE html5>
<html>
<head>
<title>Tittel</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$("#openMenu").click(function() {
 var menu = $("#menu");
 if ($(menu).is(":visible")) {
  $(menu).animate({
   width: 0
  }, 1000, function() {
   $(menu).hide();
  });
 } else {
  $(menu).show().animate({width: 100}, 1000);
 }
});
</script>
<style type="text/css">
#menu {  height: 300px;  width: 0px;	 border: 1px solid black;	    display: none; }?
</style>
</head>
<body>
<div id="menu">Menu<p>
 <a href="">Secret</a><br>
</div>
<button id="openMenu">Toggle menu</button>
</body>
</html>

Lenke til kommentar
prosjeik

prosjeik

Skrevet
  • Forfatter
Skrevet

Takk for all hjelp hittil :)

 

Nå er ikke spørsmålstegnet der, men fortsatt skjer ingenting når jeg trykker på knappen.

 

Når jeg trykker på knappen skal div-området komme til syne over knappen (knappen beveger seg nedover).

 

Jeg bruker IE8.

Lenke til kommentar
Gjest

Gjest

Skrevet
Skrevet

Beklager, feil fra min side hvor jeg glemte å sjekke om jQuery var klart...

<!DOCTYPE html5>
<html>
<head>
<title>Tittel</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#openMenu").click(function() {
 var menu = $("#menu");
 if ($(menu).is(":visible")) {
  $(menu).animate({
   width: 0
  }, 1000, function() {
   $(menu).hide();
  });
 } else {
  $(menu).show().animate({width: 100}, 1000);
 }
});
});
</script>
<style type="text/css">
#menu {
height: 300px;
width: 0px;
border: 1px solid black;
display: none;
}
</style>
</head>
<body>
<div id="menu">Menu<p>
 <a href="">Secret</a><br>
</div>
<button id="openMenu">Toggle menu</button>
</body>
</html>

Prøv nå! :)

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...