Meny

Jag har använt "ul"- samt "li"-element till menyn istället:

<style type="text/css">
<!--

ul#menu{
	list-style : none;
	margin : 0;
	padding : 0;
	width : 151px;
}

ul#menu li.main{
	background : url(gfx/menybg.gif);
}

ul#sub1, ul#sub2{
	list-style : none;
	display : none;
	margin : 0;
	padding : 0;
}

ul#sub1 li, ul#sub2 li{
	background : url(gfx/m2bg.gif);
	margin : 0;
	padding : 0;
}

ul#sub1 li a, ul#sub2 li a{
	margin-left : 40px;
}

-->
</style>

<script type="text/javascript">
<!--

function showHide(s){
	var e=getElm(s);

	if(e){
		e.style.display=(e.style.display=="")?"block":"";
		return false;
	}
};

function getElm(s){
	switch(true){
	case typeof(document.all)=="object":
		return document.all[s];
	case typeof(document.getElementById)=="function":
		return document.getElementById(s);
	default:
		return 0;
	}
};

//-->
</script>

...

<ul id="menu">
	<li class="main"><a href="main.asp" class="vit">Startsidan</a></li>

	<li class="main"><a href="main.asp?cat=web" onclick="return showHide('sub1')" class="vit">Webbutveckling</a></li>
	<ul id="sub1">
		<li><a href="main.asp?cat=web&ucat=html">HTML-kurser</a></li>
		<li><a href="main.asp?cat=web&ucat=css">CSS-kurser</a></li>
	</ul>

	<li class="main"><a href="main.asp?cat=about" onclick="return showHide('sub2')" class="vit">Om Gruvsjo</a></li>
	<ul id="sub2">
		<li><a href="main.asp?cat=about&ucat=asa">Åsa Gruvsjö</a></li>
		<li><a href="main.asp?cat=about&ucat=teckningar">Teckningar</a></li>
	</ul>
</ul>

:)

Jag vill ha med tabeller för att det ska passa med designen jag har på min sida!

Vill ha och vill ha ;)

<style type="text/css">

tr#sub1 td table,tr#sub2 td table{
	margin-left : 30px;
}

tr#sub1,tr#sub2{
	display : none;
}

</style>

<script type="text/javascript">
<!--

function showHide(s){
	var e=getElm(s);

	if(e){
		if(document.all && !window.opera){
			e.style.display=(e.style.display==""||e.style.display=="none")?"block":"none";
			return false;
		}
		if(document.getElementById){
			e.style.display=(e.style.display==""||e.style.display=="none")?"table-row":"none";
			return false;
		}
	}
};

function getElm(s){
	switch(true){
	case typeof(document.all)=="object":
		return document.all[s];
	case typeof(document.getElementById)=="function":
		return document.getElementById(s);
	default:
		return 0;
	}
};

//-->
</script>

...

<table border="1" width="151" cellpading="0" cellspacing="0">

<tr><td><a href="main.asp" class="vit">Startsidan</a></td></tr>

<tr><td><a href="main.asp?cat=web" onclick="return showHide('sub1')" class="vit">Webbutveckling</a></td></tr>
<tr id="sub1"><td colspan="2">
	<table border="0" cellpadding="0" cellspacing="0">
		<tr><td><a href="main.asp?cat=web&ucat=html">HTML-kurser</a></td></tr>
		<tr><td><a href="main.asp?cat=web&ucat=css">CSS-kurser</a></td></tr>
	</table>
</td></tr>

<tr><td><a href="main.asp?cat=about" onclick="return showHide('sub2')" class="vit">Om Gruvsjo</a></td></tr>
<tr id="sub2"><td colspan="2">
	<table border="0" cellpadding="0" cellspacing="0">
		<tr><td><a href="main.asp?cat=about&ucat=asa">Åsa Gruvsjö</a></td></tr>
		<tr><td><a href="main.asp?cat=about&ucat=teckningar">Teckningar</a></td></tr>
	</table>
</td></tr>

</table>

:)

Ska testa! Tackar...

Men om jag vill att Om Gruvsjo menyn ska stängas när jag klickar på Webbutveckling då. Hur skriver jag då? Och att om jag klickat på länken main.asp?cat=web&ucat=html under Webbutveckling så ska just den menyn vara öppen.

<script type="text/javascript">
<!--

function find(){
	if(!(location.search&&location.search.indexOf("cat")>-1))
		return;

	var
		d=location.search.split("cat=")[1].split("&")[0],
		e=getElm(d=="web"?"sub1":"sub2");

	if(!(e||d=="web"||d=="about"))
		return;

	e.style.display=(document.all&&!window.opera)?"block":"table-row";
};

function showHide(s){
	var e=getElm(s);

	if(e){
		var t=getElm(e.id=="sub1"?"sub2":"sub1");

		if(document.all && !window.opera){
			if(t.style.display=="block")
				t.style.display="none";
			e.style.display=(e.style.display==""||e.style.display=="none")?"block":"none";
			return false;
		}
		if(document.getElementById){
			if(t.style.display=="table-row")
				t.style.display="none";
			e.style.display=(e.style.display==""||e.style.display=="none")?"table-row":"none";
			return false;
		}
	}
};

function getElm(s){
	switch(true){
	case typeof(document.all)=="object":
		return document.all[s];
	case typeof(document.getElementById)=="function":
		return document.getElementById(s);
	default:
		return 0;
	}
};

window.onload=function(){
	find();
};

//-->
</script>

:)

Men det som gör att alla menyer stänger sig när jag klickar på en ny då? Så bara en meny kan vara öppen åt gången?!

Hur lägger man till fler "huvudmenyer med undermeny"?

För jag har 6 "menyer"!

JavaScript-koden i mitt senaste inlägg kombinerat med HTML-koden för tabellerna som jag postade gången före det, gör att bara en meny är öppen åt gången.

Vad är det mer för menyer respektive undermenyer du vill ha med?

:)

Räcker detta? Kategorier com är efter cat=

web, about ,place, script, layout och linkz

Jag har lagt upp ett exempel här.

:)

Supertack för din hjälp! Mycket snällt av dig :)

Jag glömde dock en till undermeny och försöker lägga in den själv men det strular bara! Javascript och jag = 0. Försöker fatta din kod men det går inge bra.

Vad är det jag ska ändra å lägga till om jag vill lägga till fler i menyn?!!

Har ju redan dessa:
web, about ,place, script, layout och linkz

Men glömde ha med fun och pics. Där pics ej ska ha någon undermeny!

Hoppas du vill hjälpa mig igen.

Vi är fler som följer denna tråd med stort intresse dock inte med fullt lika stort kunnande.

En handledning som beskriver hur man ska gå tillväga för att modifiera det "upplagda" exemplet efter egna behov, hade därför varit guld värd!

Precis vad jag oxå önskar!

Ok, jag ber om ursäkt var eventuella otydligheter :r Den egentliga meningen med skriptet var att skapa en färdig lösning åt Åsa, men jag har nu försökt skriva om det något för att förhoppningsvis göra det enklare för andra intresserade att använda det.

Jag har som sagt skrivit om koden lite grand, samt lagt till lite kommentarer. Det exempel som finns online är anpassat för just Åsa. Jag kommer att uppdatera det ytterligare för andra inom en snar framtid.

Skulle problem uppstå eller någonting fungera knasigt är det bara att skicka iväg ett e-postmeddelande till mig (eventuellt ställa frågan i detta forum).

:)

Menyn uppför sig likadant som den Designbutiken har på sin sida, vilket är både navigeringsvänligt och stilrent. Dom fick förresten pris för sin hemsideslösning för något år sedan. För den intresserade finns menyn att beskåda här. Ytterligare en ynnest att be om vore därför en handledning som inkluderar även gifbilder för huvudkategorierna i likhet med DB's exempel.

/kbking

Tackar för all hjälp och jag återkommer om jag får mer problem men det ska nog gå bra nu!

Supertack återigen!

------------------------

Kom på en grej till. När menyerna är stängda vill jag ha en rad under som är synlig men när jag öppnar en meny ska den inte synas. Vet du hur jag ska göra? Den fetstilta i koden nedan. Är en sådan under varje "Huvudmeny". Som sen ska "gömmas" vid öppning av en "meny". Hoppas du förstår och att det går!

<tr><td><a href="menu.asp?cat=web" onclick="return showHide('sub1')" class="vit">Webbutveckling</a></td></tr>
<tr id="sub1"><td colspan="2">
	<table border="0" cellpadding="0" cellspacing="0">
		<tr><td><a href="menu.asp?cat=web&ucat=html">HTML-kurser</a></td></tr>
		<tr><td><a href="menu.asp?cat=web&ucat=css">CSS-kurser</a></td></tr>
	</table>
</td></tr>
[b]<tr><td width="100%" height="5"></td></tr>[/b]

Jag snubblade över en annan bra lösning som paynova har. Jag har tagit ner de båda javascripten som styr menyn och css koden och försöker lista ut hur menyn är uppbyggd. Helt rätt har jag antagligen inte gjort, men jag har fått det att röra på sig någorlunda likadant. Något jag inte blir klok på är varför startsidan inte har ett vanligt namn med en .html eller .asp ändelse. Det som syns i webläsaren är: h??ps://www.paynova.com/swe/?ICP=.

Vad står de tecknen för och varför ser det ut på detta vis?

PS. Startsidan syns faktiskt oavsett om det i webbläsaren står .../swe/?ICP= eller ...swe/?icp= eller .../swe/

Som sagt en tilltalande lösning... :)

Sidan är nu uppdaterad.

:)

Tackar. Det var bara menu.js som man skulle byta ut va?