webForumDet fria alternativet
Logga in / Bli medlem

Hjälp med att utöka antalet menyer och underkategorier.

JavaScript

10 svar · 590 visningar · startad av Mysko

Myskos avatarMyskoMedlem sedan juli 20071 068 inlägg
Frågan#1

Jag vet inte hur man ska göra för att få flera menyer och under menyer i den här dropdown meny koden. En del av er känner den sedan innan, jojoxx dropdown meny
Kanske onödigt att klippa in koden för den går ju att hämta från sidan jag länkade till. Mitt problem är att jag inte har hållit på något alls med DHTML eller java script heller för den delen. Så jag skulle uppskatta mycket om den som svara är lite pedagogisk. :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Jojoxx.net DHTML</title>
	<link rel=stylesheet href="../style.css" type="text/css">
</head>
<body bgcolor="#ffffff" link="#FFaF00" vlink="#ff6f00" alink="#ff0000" text="#333333">
<br>
<br>
<br>
<br>
<br>
<br>
<div align="center">

<img src="/images/title_dhtml.gif" width=350 height=75 alt="DHTML" border=0>

<h4>Exempel</h4>
<table border="0" cellpadding="0" cellspacing="0"><tr><td width="600">
<!-- Här börjar exemplet -->
<style type="text/css">
.menu { padding-left: 10px; }
.menuChoice { text-decoration:none; color: rgb(0,0,150); font-family: Arial; font-weight: bold; font-size: 12px; }
.menuLink {text-decoration:none; color: rgb(150,150,255); font-family: Arial; font-size: 12px; }
</style>
<script language="JavaScript">
var compressedMode = false;
var collapseMode = false;
var findCurrentPage = false;
var stripQuerystring = true;
function getMenuNameFromLink(li){ var mnu=li.href.replace(/^\/+|\/+$/g,""); mnu=(mnu.match(/\//))?mnu.substring(mnu.lastIndexOf("/")+1):mnu; return mnu;}
function initMenu(){
	if(!document.getElementById){ return }
	var current=document.getElementById('menuroot').firstChild;
	while(current){
		if(current.className=="menu"){ collapseAll(current); }
		current=current.nextSibling;
	}
	if(findCurrentPage&&stripQuerystring){ findLink(location.pathname); }
	if(findCurrentPage&&!stripQuerystring){ findLink(location.href); }
}
function findLink(url){
	if(stripQuerystring){ url=url.split('#')[0].split('?')[0]; }
	var allLinks=new Array(); allLinks=getAllChildsByTagName(document.getElementById('menuroot'),'a');
	var match=false;
	for(var i in allLinks){
//		if(allLinks[i].href.split('#')[0].split('?')[0].toLowerCase().right(url.length)==url.toLowerCase()){
		if(allLinks[i].href.toLowerCase().right(url.length)==url.toLowerCase()){
			match=allLinks[i];
			break;
		}
	}
	if(match){
//		initMenu();
		var lastlinkname=false;
		while(match=match.parentNode){
			if(match.className=="menu"){
				match.style.display="block";
				lastlinkname=match.id;
			}
			var li=document.getElementsByTagName("a");
			for(var n=0;n<li.length;n++){
				if(lastlinkname&&getMenuNameFromLink(li[n])==lastlinkname && li[n].innerHTML.match(/^(\+|\-)/)){
					li[n].innerHTML="-"+li[0].innerHTML.substring(1);
				}
			}
		}
	}
}
String.prototype.right = function(len){ return this.substring(this.length-len); }
function collapseAll(element){
	if(!document.getElementById){ return }
	menues=getAllChildsByTagName(element,"div");
	for(var i in menues){
		menues[i].style.display="none";
		if(getPreviousSiblingByClassName(menues[i],"menuChoice").innerHTML.match(/^(\+|\-)/)){
			getPreviousSiblingByClassName(menues[i],"menuChoice").innerHTML="+"+getPreviousSiblingByClassName(menues[i],"menuChoice").innerHTML.substring(1);
		}
	}
	element.style.display="none";
}
function getAllChildsByTagName(element,tagname){
	var	parents=new Array(); var elements=new Array(); var current;
	parents[0]=element;
	for(var i in parents){
		current=parents[i].firstChild;
		while(current){
			if(current.hasChildNodes){ parents[parents.length]=current; }
			if(current.tagName==tagname.toUpperCase()){elements[elements.length]=current;}
			current=current.nextSibling;
		}
	}
	return elements;
}
function getPreviousSiblingByClassName(element,classname){
	while(element.previousSibling){
		if(element.previousSibling.className==classname){ return element.previousSibling; }
		element=element.previousSibling;
	}
	return false;
}
function sw(li){
	var mnu=getMenuNameFromLink(li);
	if(!document.getElementById){ return false; }
	if(document.getElementById(mnu).style.display=='block'){
		if(collapseMode){
			collapseAll(document.getElementById(mnu));
		} else {
			document.getElementById(mnu).style.display='none';
		}
	} else {
		if(document.getElementById(mnu).parentNode.className=="menu" && compressedMode){
			collapseAll(document.getElementById(mnu).parentNode);
			document.getElementById(mnu).parentNode.style.display="block";
		}
		document.getElementById(mnu).style.display="block";
	}
	if(li.innerHTML.match(/^(\+|\-)/)){
		li.innerHTML=(document.getElementById(mnu).style.display == 'none')?"+"+li.innerHTML.substring(1):"-"+li.innerHTML.substring(1);
	}
	return false;
}
window.onload=function(){ initMenu(); }
</script>
<div id="menuroot" class="menu">
<a href="menu_a" onClick="return sw(this);" class="menuChoice">+ Menu A</a><br>
<div id="menu_a" class="menu">
	<a href="menu_a_a" onClick="return sw(this);" class="menuChoice">+ Menu A-A</a><br>

	<div id="menu_a_a" class="menu">
		<a href="menu_a_a_a" onClick="return sw(this);" class="menuChoice">+ Menu A-A-A</a><br>
		<div id="menu_a_a_a" class="menu">
			<a href="#" class="menulink">Länkar A-A-A-1</a><br>
			<a href="http://www.jojoxx.net/" class="menulink">Länkar A-A-A-2</a><br>
			<a href="#" class="menulink">Länkar A-A-A-3</a><br>
		</div>

		<a href="menu_a_a_b" onClick="return sw(this);" class="menuChoice">+ Menu A-A-B</a><br>
		<div id="menu_a_a_b" class="menu">
			<a href="DOMmenu2.html" class="menulink">Länkar A-A-B-1</a><br>
			<a href="DOMmenu2-2.html" class="menulink">Länkar A-A-B-2</a><br>
			<a href="#" class="menulink">Länkar A-A-B-3</a><br>
		</div>
	</div>

	<a href="menu_a_b" onClick="return sw(this);" class="menuChoice">+ Menu A-B</a><br>
	<div id="menu_a_b" class="menu">
		<a href="menu_a_b_a" onClick="return sw(this);" class="menuChoice">+ Menu A-B-A</a><br>
		<div id="menu_a_b_a" class="menu">
			<a href="#" class="menulink">Länkar A-B-A-1</a><br>
			<a href="#" class="menulink">Länkar A-B-A-2</a><br>
		</div>

	</div>
	<a href="#" class="menulink">Länkar A-1</a><br>
</div>
<a href="menu_b" onClick="return sw(this);" class="menuChoice">+ Menu B</a><br>
<div id="menu_b" class="menu">
	<a href="menu_b_a" onClick="return sw(this);" class="menuChoice">+ Menu B-A</a><br>
	<div id="menu_b_a" class="menu">
		<a href="menu_b_a_a" onClick="return sw(this);" class="menuChoice">+ Menu B-A-A</a><br>

		<div id="menu_b_a_a" class="menu">
			<a href="#" class="menulink">Länkar B-A-A-1</a><br>
			<a href="#" class="menulink">Länkar B-A-A-2</a><br>
		</div>
		<a href="#" class="menulink">Länkar B-A-1</a><br>
	</div>
</div>
</div>

<!-- Här slutar exemplet -->
</td></tr></table>

</div>
</body>
</html>
Web-Tors avatarWeb-TorMedlem sedan nov. 200013 890 inlägg
#2

Jag har bara IE6 där jag sitter så jag kan inte testa i någon annan webbläsare men i IE6 så funkar det här utmärkt:

<a href="menu_kalle" onClick="return sw(this);" class="menuChoice">+ Menu Kalle</a><br>
	<div id="menu_kalle" class="menu">
		<a href="menu_kalle_1" onClick="return sw(this);" class="menuChoice">+ Menu Kalle 1</a><br>
		<div id="menu_kalle_1" class="menu">
			<a href="menu_kalle_2" onClick="return sw(this);" class="menuChoice">+ Menu Kalle 2</a><br>
			<div id="menu_kalle_2" class="menu">
				<a href="menu_kalle_3" onClick="return sw(this);" class="menuChoice">+ Menu Kalle 3</a><br>
				<div id="menu_kalle_3" class="menu">
					<a href="menu_kalle_4" onClick="return sw(this);" class="menuChoice">+ Menu Kalle 4</a><br>
					<div id="menu_kalle_4" class="menu">
						<a href="#" class="menulink">Välkommen till Kalle 4</a><br>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Du behöver alltså inte ändra något i själva Javascriptet uten det är bara att bygga på din HTML-struktur.

Myskos avatarMyskoMedlem sedan juli 20071 068 inlägg
#3

Okej tack web-Tor, ska se om det går att mejsla till menyn som jag vill. Bra att veta att det bara HTML-strukturen som ska trimmas och fixas. :)

Myskos avatarMyskoMedlem sedan juli 20071 068 inlägg
#4

Nästa problem, jag skulle vilja ha olika stora tecken på huvudkategorin och underkategori, upp till 3 olika text storlekar.
Jag vet inte men jag tror att java scriptet måste modifieras, där kommer min kunskap till korta.

String.prototype.right = function(len){ return this.substring(this.length-len); }
function collapseAll(element){
	if(!document.getElementById){ return }
	menues=getAllChildsByTagName(element,"div");
	for(var i in menues){
		menues[i].style.display="none";
		if(getPreviousSiblingByClassName(menues[i],"menuChoice").innerHTML.match(/^(\+|\-)/)){
			getPreviousSiblingByClassName(menues[i],"menuChoice").innerHTML="+"+getPreviousSiblingByClassName(menues[i],"menuChoice").innerHTML.substring(1);

menuchoice styr textstorlek och format. Om jag skapar en menuchoise_1 för exempel i css-mallen och anropar den i html-koden så skiter det sig på så vis att alla underkategorier
blir synliga hela tiden. Hur ska man göra för att få in flera olika text storlekar, vill ju kunna använda mig av en CSS-mall.

Web-Tors avatarWeb-TorMedlem sedan nov. 200013 890 inlägg
#5

Detta borde funka:

// Ta bort denna rad ur funktionen getPreviousSiblingByClassName()
//if(element.previousSibling.className==classname){

// och ersätt med denna rad
if(element.previousSibling.className.indexOf(classname) != 1){
Myskos avatarMyskoMedlem sedan juli 20071 068 inlägg
#6

Nää det funkar inte, kan du förklara lite vad funktionen gör och skillnaden på den som finns och den som ska ersätta.
Är det här i koden som funktion skall in?

function getPreviousSiblingByClassName(element,classname){
	while(element.previousSibling){
		if(element.previousSibling.className==classname){ return element.previousSibling; }
		element=element.previousSibling;
	}
Web-Tors avatarWeb-TorMedlem sedan nov. 200013 890 inlägg
#7

Konstigt den funkar när jag testar?

Tidigare så jämförde if-satsen om klassnamnet var exakt likadana. Min ändring gör att if-satsen istället ser om det innehåller ordet "menuChoice".

Du kan alltså döpa dina CSS-klasser till menuChoice1, menuChoice2, menuChoice3 o.s.v.

Så här ser hela funktionen ut:

function getPreviousSiblingByClassName(element,classname){
	while(element.previousSibling){
		if(element.previousSibling.className.indexOf(classname) != 1){
			return element.previousSibling;
		}
		element=element.previousSibling;
	}
	return false;
}
Myskos avatarMyskoMedlem sedan juli 20071 068 inlägg
#8

Det funkar fint :) med IE7, men firefox vill inte vara med, jag har gastat mig hes av irritation i mina försök att finna en lösning. Men nopp!

Har du nått förslag Web-Tor?

Web-Tors avatarWeb-TorMedlem sedan nov. 200013 890 inlägg
#9

Sorry, jag kan inte se något på rak arm och att gå igenom hela scriptet för att hitta var det smäller i Firefox tar helt enkelt för lång tid för mig i alla fall.

Myskos avatarMyskoMedlem sedan juli 20071 068 inlägg
#10

Väldigt många tack för din tid ändå. :)

Web-Tors avatarWeb-TorMedlem sedan nov. 200013 890 inlägg
#11

Det är nog enklare att hitta ett nytt skript än att bygga vidare på detta.
Kanske kan detta funka?
http://destroydrop.com/javascripts/tree/

Annars finns det massor med alternativ om du söker på "tree menu" + javascript.

403 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
265 ms — deklarationer (db)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)
264 ms — ändringar (db)