Folde ud menu - Foldud liste

Her kan du få hjælp og stille spørgsmål til JavaScript!
Besvar
jakobckruse
Begynder
Indlæg:4
Tilmeldt:17. sep 2012, 12:19
Folde ud menu - Foldud liste

Indlæg af jakobckruse » 17. sep 2012, 12:25

Hej, jeg er rimelig ny i dette game, men har fundet en kode på nettet til en folde ud menu. Men når jeg vil lave et ekstra menu punkt "6" så går det galt. Eneste er jeg har tilføjet"6'eren# samt ændret antal i starten af koden til 6.
evt se problemet på www.qruze.dk/mat.html
Håber en kan hjælpe eller har en anden god måde at lave en sådan foldud liste på.

Hilsen Jakob

Koden kommer herunder.

Kode: Vælg alt

<style type="text/css">
td, body { font-family:Helvetica,sans-serif; font-size:16px; }
a.foldud, a.foldud:link, a.foldud:visited, a.foldud:active { font-family:Helvetica,sans-serif; font-size:16px; color:#aaa; text-decoration:none; }
a.foldud:hover { color:#000000; text-decoration:none; }
</style>

<script type="text/javascript">
//ANGIV ANTAL HOVED MENU PUNKTER
var antal=6;
var q=new Array();
document.write('<style type="text/css">');
for(i=1;i<=antal;i++) {
	document.write('#m'+i+'{ display:none; }');
}
document.write('</style>');
for(i=1;i<=antal;i++) { 
	q[i]=0;
}
function showit(i) {
	hideItAll();
	if(q[i]==0) {
		if(document.all) {
			document.all["m"+i].style.display="block";
		} else if(document.getElementById) {
			document.getElementById("m"+i).style.display="block";
		} else {
			return;
		}
		for(r=1;r<=antal;r++) {
			if(i==r) q[r]=1;
			else q[r]=0;
		}
	} else {
		if(document.all) {
			document.all["m"+i].style.display="none";
		} else if(document.getElementById) {
			document.getElementById("m"+i).style.display="none";
		} else { 
			return;
		}
		q[i]=0;
	}
}
function hideItAll() {
	for(i=1;i<=antal;i++) {
		if(document.getElementById) {
			document.getElementById('m'+i).style.display="none";
		} else if(document.getElementById) {
			document.getElementById('m'+i).style.display="none";
		} else {
			return;
		}
	}
}
</script>

<a onclick="showit('1')" href="#note" onfocus="this.blur()" class="foldud">· Tal og algebra</a><br>
<div id="m1">
	   <pre> <a href="MAT/Tal og bogstavregning.pdf" target="_blank" onfocus="this.blur()" class="foldud">&nbsp&nbsp&nbsp- Tal og bogstavregning</a></pre>
	    <a href="dinside.htm" onfocus="this.blur()" class="foldud">- Link 2</a><br>
	    <a href="dinside.htm" onfocus="this.blur()" class="foldud">- Link 3</a><br>
</div>

<a onclick="showit('2')" href="#m2" onfocus="this.blur()" class="foldud">· Trigonometri</a><br>
<div id="m2">
	    <a href="MAT/retvinklettrekant.pdf" target="_blank" onfocus="this.blur()" class="foldud">&nbsp&nbsp&nbsp- Retvinklet trekant</a><br>
	    <a href="dinside.htm" onfocus="this.blur()" class="foldud">- Link 5</a><br>
	    <a href="dinside.htm" onfocus="this.blur()" class="foldud">- Link 6</a><br>
	    <a href="dinside.htm" onfocus="this.blur()" class="foldud">- Link 7</a><br>
</div>

<a onclick="showit('3')" href="#m3" onfocus="this.blur()" class="foldud">· Geometri</a><br>
<div id="m3">
	    <a href="dinside.htm" onfocus="this.blur()" class="foldud">- Link 8</a><br>
	    <a href="dinside.htm" onfocus="this.blur()" class="foldud">- Link 9</a><br>
</div>

<a onclick="showit('4')" href="#m4"  onfocus="this.blur()" class="foldud">· Differentialregning</a><br>
<div id="m4">
	    <a href="MAT/Produktregen(diff).pdf" target="_blank"  onfocus="this.blur()" class="foldud">&nbsp&nbsp&nbsp- Produktreglen - Bevis</a><br>
	  <a href="MAT/Produktregen(diff)-E1.pdf" target="_blank" onfocus="this.blur()" class="foldud">&nbsp&nbsp&nbsp- Produktreglen - Bevis - Elevark 1</a> <br>
	    <a href="MAT/Produktregen(diff)-E2.pdf" target="_blank" onfocus="this.blur()" class="foldud">&nbsp&nbsp&nbsp- Produktreglen - Bevis - Elevark 2</a><br>
</div>

<a onclick="showit('5')" href="#m5" onfocus="this.blur()" class="foldud">· Integralregning</a><br>
<div id="m5">
	    <a href="dinside.htm" onfocus="this.blur()" class="foldud">- Link 13</a><br>
	    <a href="dinside.htm" onfocus="this.blur()" class="foldud">- Link 14</a><br>
	    <a href="dinside.htm" onfocus="this.blur()" class="foldud">- Link 15</a><br>
	    <a href="dinside.htm" onfocus="this.blur()" class="foldud">- Link 16</a><br>
</div>

<a onclick="showit('6')" href="#m6" onfocus="this.blur()" class="foldud">· Statistik</a><br>
<div id="m6">
	    <a href="dinside.htm" onfocus="this.blur()" class="foldud">- Link 18</a><br>
	    <a href="dinside.htm" onfocus="this.blur()" class="foldud">- Link 19</a><br>
	    <a href="dinside.htm" onfocus="this.blur()" class="foldud">- Link 20</a><br>
	    <a href="dinside.htm" onfocus="this.blur()" class="foldud">- Link 21</a><br>
</div>

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Folde ud menu - Foldud liste

Indlæg af ThomasI » 17. sep 2012, 19:11

Hej Jakob,

Har du overvejet en menu som udelukkende er lavet på HTML og CSS? - Det er ihvertfald lettere at have med at gøre...

Daniel her inde fra har lavet en god en som du kan kopiere og bruge...se her:

http://www.nemprogrammering.dk/gtuts/ar ... ml_css.php

Den har også dropdown effekt...

jakobckruse
Begynder
Indlæg:4
Tilmeldt:17. sep 2012, 12:19

Re: Folde ud menu - Foldud liste

Indlæg af jakobckruse » 17. sep 2012, 22:29

Men jeg kan ikke få den til at folde ud....

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Folde ud menu - Foldud liste

Indlæg af ThomasI » 18. sep 2012, 15:51

Din egen eller den kun med HTML og CSS?

jakobckruse
Begynder
Indlæg:4
Tilmeldt:17. sep 2012, 12:19

Re: Folde ud menu - Foldud liste

Indlæg af jakobckruse » 18. sep 2012, 16:51

Den som du har henvist til....
Har prøvet at sætte den ind på min side www.qruze.dk under matematik.

Men det jeg gerne vil have er en lille ting sådan at jeg under nogle emner kan have filer liggende som foldes ud når jeg trykker på emner.

Hilsen Jakob

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: Folde ud menu - Foldud liste

Indlæg af Daniel » 20. sep 2012, 07:56

Hejsa!

Har lige siddet og kigget på hvordan man bedst kan løse dit problem, og er kommet frem til at jQuery må være absolut den bedste løsning i dit tilfælde.
JavaScript er en rigtig god ting men bliver også alt for hurtigt avanceret når man skal lave nogle lidt mere indviklede funktioner.
Det er i sådanne tilfælde jQuery er løsningen for det meste.

Jeg tror løsningen i dit tilfælde vil være brugen af toogle og slow funktionen i jQuery.
Kan ikke lige nå at give en forklaring i dag på hvordan det skal laves, men hvis du ikke har fundet en løsning så vil jeg kigge på det i morgen. :)

jakobckruse
Begynder
Indlæg:4
Tilmeldt:17. sep 2012, 12:19

Re: Folde ud menu - Foldud liste

Indlæg af jakobckruse » 20. sep 2012, 10:06

Kunne bare være fedt, hvis du kunne hjælpe mig...
hilsen Jakob

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: Folde ud menu - Foldud liste

Indlæg af Daniel » 22. sep 2012, 00:49

Hej Jakob.

Så fik jeg lige tid til ordentligt at kigge på det hele. :)
Som jeg sagde i mit sidste indslag så har jeg en metode som burde løse dit problem, hvis ellers jeg har forstået det rigtigt.
Det er en metode som er noget mere overskuelig end det du bruger nu, JavaScript er godt men alt for kringlet til mig, derfor har jeg brugt lidt ekstra tid på jQuery.

Jeg ved ikke hvor meget du kender til jQuery, derfor starter jeg enlig bare helt fra bunden med hvad jeg gør.

Når man bruger jQuery så skal man indsætte noget kode til sin side, den kode du skal indsætte kan du hente herfra: http://jquery.com/
Tryk på "Download (jQuery);" og kopier alt teksten på siden (Ctrl+A).
Gå ind på din side og opret en JavaScript fil der hedder config.js og indsæt alt teksten du kopierede fra jQuerys hjemmeside.
Opret så en ny JavaScript fil som hedder jquery.js

På de sider hvor du vil have din menu ind skal du indsætte dette kode mellem dine head tags:

Kode: Vælg alt

<script type="text/javascript" src="config.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
Den kode inkludere de to dokumenter du tidligere har oprettet, til det dokument du vil have din menu i.

Når du har gjort det så skal du indsætte denne kode i den fil du oprettede som hed jquery.js:

Kode: Vælg alt

function slowtoggle(vis, gem) {

    if($("#" + vis).is(':visible')) {   
        $("." + gem).hide('slow');
    } else {
        $("." + gem).hide('slow');
        $("#" +  vis).toggle('slow');
    }
}
Når du har gjort det, så er du færdig med selve koden der laver den funktion der skal få din menu til at virke.

Nu skal du gå ind i den fil hvor du vil have din menu ind.

Overpunktet for din menu skal oprettes med p tags, med en onclick funktion på.
Dine menupunkter skal derefter ligges nedenunder i en div.

Det er utroligt svært at forklare via tekst, så tror det nemmeste er at komme med et eksempel.

Kode: Vælg alt

<p onclick="slowtoggle('1', 'menu')">Tal og algebra</p>
<div id="1" class="menu" style="display: none;">
<a href="#">Tal og bogstavregning</a> <br />
<a href="#">Nyt 1</a>
</div>

<p onclick="slowtoggle('2', 'menu')">Trigonometri</p>
<div id="2" class="menu" style="display: none;">
<a href="#">Link 1</a> <br />
<a href="#">Link 2</a>
</div>
Ovenstående kode gør at når folk trykker på "over" menupunktet så sker funktionen slowtoggle.
Der er to parametre til funktionen slowtoggle. Det første parametre er det navn som den pågældende div har, som tilhøre "over" menupunktet.
Det andet parametre angiver hvilken class den skal lukke ned, det vil sige at alle de divs der hører til "over" menupunkterne i din menu, skal have den samme class for at virke.

Jeg håber alt dette giver mening, ellers må du skrive og så må jeg se om jeg ikke kan omformulere det lidt. ;)

Besvar