webForumDet fria alternativet

Enkel länkmeny: Klick och undermeny öppnas

JavaScript

12 svar · 403 visningar · startad av Pace

Medlem sedan juni 20019 024 inlägg
Frågan#1

Söker efter en meny som ser ut på detta viset, efter att man har klickat på "menylänken" så ska själva länkarna poppa ned och därefter försvinna igen när man trycker tillbaka den:

[b]Menylänk[/b]
- Gå till sida 1
- Gå till sida 2
- Gå till sida 3

Vet att detta har varit uppe förut, men jag söker efter ett som fungerar i NS, MSIE och Opera. Bratta.com har ett sådant här, men där är man tyvärr tvungen att ange positionen för länkarna. Inte bra.

------------------
"Tål det inte att skämtas om, är det inte värt att ta på allvar."

Medlem sedan aug. 20002 992 inlägg
#2

Söker också en..

------------------
"Om ändå Jorden vore platt!"

Medlem sedan juni 20019 024 inlägg
#3

Postar för att dra upp tråden igen.
Jag vet att någon sitter på en lösning!

------------------
"Tål det inte att skämtas om, är det inte värt att ta på allvar."

Medlem sedan juni 20004 308 inlägg
#4
<script language="JavaScript" type="text/javascript">
var isNetscape=(navigator.appName=="Netscape");
var lastLayer=false;
function moveHandler(evnt) {
	if(document.layers&#0124;&#0124;(isNetscape)){
		Xmouse = evnt.pageX-pageXOffset;
		Ymouse = evnt.pageY-pageYOffset;
	} else if(document.all) {
		Xmouse = window.event.x;
		Ymouse = window.event.y;
	}
}
if (document.layers){ document.captureEvents(Event.MOUSEMOVE); }
document.onmousemove = moveHandler;
function moveLayerAbs(Id,x,y){
	if (document.all){
		if (x) document.all[Id].style.left = x;
		if (y) document.all[Id].style.top = y;
	} else if (document.layers){
		if (x) document.layers[Id].left = x;
		if (y) document.layers[Id].top = y;
	} else if (document.getElementById){
		if (x) document.getElementById(Id).style.left = x+'px';
		if (y) document.getElementById(Id).style.top = y+'px';
	}
}
function showLayer(Id){
	if (document.all) {
		document.all[Id].style.visibility = "visible";
	} else if (document.layers){
		document.layers[Id].visibility = "show";
	} else if (document.getElementById){
		document.getElementById(Id).style.visibility = "visible";
	}
}
function hideLayer(Id){
	if (document.all) {
		document.all[Id].style.visibility = "hidden";
	} else if (document.layers){
		document.layers[Id].visibility = "hide";
	} else if (document.getElementById){
		document.getElementById(Id).style.visibility = "hidden";
	}
}
function clickMenu(mnu){
	if(mnu==lastLayer){
		hideLayer(mnu); lastLayer=false;
	} else {
		if(lastLayer){ hideLayer(lastLayer); }
		moveLayerAbs(mnu,Xmouse-20,Ymouse+5);
		showLayer(mnu);
		lastLayer=mnu;
	}
}
</script>
<div id="foo" style="position:absolute;visibility:hidden;"><a href="#">Länk 1</a><br><a href="#">Länk 2</a><br><a href="#">Länk 3</a></div>
<div id="bar" style="position:absolute;visibility:hidden;"><a href="#">Länk 1</a><br><a href="#">Länk 2</a><br><a href="#">Länk 3</a></div>
Lite text med <a href="#" onClick="clickMenu('foo'); return false;">menyer</a> i på <a href="#" onClick="clickMenu('bar'); return false;">flera</a> ställen.

Torde vara rättså självförklarande.

------------------
/ J

Medlem sedan juni 20019 024 inlägg
#5

Tack Jojoxx, men det var inte riktigt det jag letade efter (fungerade enbart i MSIE). :)

Detta hittade jag, men det fungerar också bara i MSIE (i övriga så visas menyn "utvikt"). Finns det något sätt att få det att fungera i andra webbläsare också?

<script language="javascript">
<!--
var Open = ""
var Closed = ""

function showhide(what,what2){
if (what.style.display=='none'){
  what.style.display='';
  what2.src=Open.src
}
else{
  what.style.display='none'
  what2.src=Closed.src
}
}
// -->
</script>

<span id="menu1" onClick="showhide(menu1outline,menu1sign)" style="cursor:hand;">
<a id="menu1sign" href="#">Personer</a></span><br>
<span id="menu1outline" style="display:'none'">
    <a href="a.html">Adam</a><br>
    <a href="b.html">Bertil</a><br>
    <a href="c.html">Ceasar</a><br>
</span>

------------------
"Tål det inte att skämtas om, är det inte värt att ta på allvar."

[Redigerat av Pace den 20 jan 2002]

Medlem sedan juni 20004 308 inlägg
#6

Ursäkta, jag tittade inte på exemplet utan läste bara beskrivningen. Jag trodde att länkarna skulle in i en löpande text. Däremot fungerar det i såväl IE som Netscape 4.x och Mozilla. (Jag har testat Netscape 4.07, IE 5.01 och Mozilla 0.9.7 (det som finns installerat på min dator)).

Ditt exempel kommer inte att fungera i Netscape 4.x eftersom du där inte har stödet att rendera om sidan efter det att den laddats, däremot kan jag få det att fungera i Mozilla och kommande DOM-kompatibla läsare;

<script language="javascript">
var lastmenu=false;
function changeStyle(Id,Property,Value){
	if (document.all){
		eval('document.all[Id].style.'+Property+'="'+Value+'"');
	} else if (document.layers){
		eval('document.layers[Id].'+Property+'="'+Value+'"');
	} else if (document.getElementById){
		eval('document.getElementById(Id).style.'+Property+'="'+Value+'"');
	}
}
function clickMenu(mnu){
	if(mnu==lastmenu){
		changeStyle(mnu,'display','none'); lastmenu=false;
	} else {
		if(lastmenu){ changeStyle(lastmenu,'display','none'); }
		changeStyle(mnu,'display','inline');
		lastmenu=mnu;
	}
}

</script>
<a href="#" onClick="clickMenu('personer');return false;">Personer</a><br>
<span id="personer" style="display:none;">
 <a href="a.html">Adam</a><br>
 <a href="b.html">Bertil</a><br>
 <a href="c.html">Ceasar</a><br>
</span>
<a href="#" onClick="clickMenu('bilar');return false;">Bilar</a><br>
<span id="bilar" style="display:none;">
 <a href="d.html">Volvo</a><br>
 <a href="e.html">Saab</a><br>
 <a href="f.html">Ford</a><br>
</span>

------------------
/ J

Medlem sedan aug. 2000864 inlägg
#7

jag har haft väldig nytta av scriptet, men det är just dte att jag har väldiga problem efetrsom jag stänger ute alla besökare med NS 4.x
Så vad skulel du rekomdera mig om jag absolut vil latt dte ska funka i NS 4.x?

Sen tycker jag det skulle häftigt om menyerna kom upp utan att man behövde klicka på länkarna, och de istället öppnades så fort man drog muspekaren över dem, går det att ändra?

------------------
Mvh Martin Persson
E-post: webforum@costodia.com
http://ebid.se

Medlem sedan juni 20004 308 inlägg
#8

Denna typ av funktion är svår i Netscape 4 eftersom den till sin natur inte kan rendera om en del av sidan efter det att den laddats. Då får man hålla på och kladda med en massa lager och visa/dölja/flytta för att få en effekt som är likadan. Därför skulle jag förenkla det genom att ladda om sidan helt och hållet. Har du ex. tillgång att köra ASP kan du lägga allt detta i en och samma fil som du anropar med olika query-strings beroende på vilken undermeny du vill visa. Detta finns det säkert exempel på i ASP-forumet.

------------------
/ J

Medlem sedan maj 200010 687 inlägg
#9

Här är en grej jag slängde ihop nyss. Koden är kanske inte världens smidigaste, men man kanske kan bygga vidare på den...

<%
Option Explicit

Dim sOpenDiv

sOpenDiv = Request.QueryString("sOpenDiv")

Function SetDisplay(div)
	If div = sOpenDiv Then
		SetDisplay = " style=""display: block"""
	Else
		SetDisplay = " style=""display: none"""
	End If
End Function
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
var g_Divs = 4; //Antalet divar som finns...
function changeDiv(divId) {
	if (document.all &#0124;&#0124; document.getElementById) {
		var bOpen = (getDisplay(divId) == "block");
		for (var i = 0; i < g_Divs; i++) {
			changeDisplay("div" + i, "none");
		}
		changeDisplay(divId, bOpen ? "none" : "block");
	} else {
		if (divId == "<%=sOpenDiv%>") {
			location.href = "menu.asp";
		} else {
			location.href = "menu.asp?sOpenDiv=" + divId;
		}
	}
}

function changeDisplay(divId, sValue) {
	if (document.all) {
		document.all[divId].style.display = sValue;
	} else if (document.getElementById) {
		document.getElementById(divId).style.display = sValue;
	}
}

function getDisplay(divId) {
	if (document.all) {
		return document.all[divId].style.display;
	} else if (document.getElementById) {
		return document.getElementById(divId).style.display;
	}
}
</script>
<style type="text/css">
div {display: none}
</style>
</head>
<body>

<a href="javascript:changeDiv('div0');">Öppna</a><br>
<div id="div0"<%=SetDisplay("div0")%>>En massa tjaffs...</div>
<a href="javascript:changeDiv('div1');">Öppna</a><br>
<div id="div1"<%=SetDisplay("div1")%>>En massa tjaffs...</div>
<a href="javascript:changeDiv('div2');">Öppna</a><br>
<div id="div2"<%=SetDisplay("div2")%>>En massa tjaffs...</div>
<a href="javascript:changeDiv('div3');">Öppna</a><br>
<div id="div3"<%=SetDisplay("div3")%>>En massa tjaffs...</div>

</body>
</html>

------------------
/Erik
www.juhlin.nu /sk8files/ /mp3d/

Medlem sedan aug. 2000864 inlägg
#10

Jag la in den koden på http://www.ebid.se/innovation/new_page_30.htm men den funkar inte.

Sådant script som jag vill ha finns på www.fotosidan.se och jag har försökt ladda hem det (funderade samtidigt om det var moraliskt riktigt att göra så, men så tänkte jag eftersom jag inte kommer använda scriptet på någon komersiell sajt så borde det väl vara (lite) moraliskt försvarbart ialla fall?), men jag fick inte det att funka offline med modifieringar i designgen, så därför vänder jag mig åter til mitt favoritforum och frågar denna fråga.

------------------
Mvh Martin Persson
E-post: webforum@costodia.com
http://ebid.se

Medlem sedan aug. 2000864 inlägg
#11

q

[Redigerat av costodia den 03 feb 2002]

Medlem sedan maj 200010 687 inlägg
#12

Det är ASP-kod och därför så måste filen heta .asp. Och i det här fallet ska filen heta menu.asp.

------------------
/Erik
www.juhlin.nu /sk8files/ /mp3d/

Medlem sedan aug. 2000864 inlägg
#13

jag kom på att jag inte gillade asp-lösningen så mycket så om det går så skulle jag gärna vilja ha hjälp att göra en sådan meny som som finns på fotosidans.e, kankse som ett wf-script?

------------------
Mvh Martin Persson
E-post: webforum@costodia.com
http://ebid.se

275 ms totalt · 3 externa anrop · v20260731065814-full.767b4345
132 ms — deklarationer (db)
0 ms — hämta statistik (cache)
140 ms — hämta tråd, inlägg och bilagor (db)