Just nu i M3-nätverket
Gå till innehåll

Snygg meny med trästruktur


Admini

Rekommendera Poster

Hej

Jag har byggt en trästruktur för mitt menysystem som ser ut som bilden visar. Se bifogad bild.

Och nu försöker jag och få den att fungera som en riktig meny som på den här adressen: https://www.inet.se/artikel/7104130/

Titta på menyn till vänster

 

Har försökt jätte mycket men lyckas inte med det :(

Snälla kan nån hjälpa mig!

Koden klistrar jag här:

<%
Sub GetBabies(pid)
If pid="" Then Exit Sub
Set RS=Conn.Execute("SELECT Id, namn FROM minTabell WHERE parent="&pid&" Order BY Id")
If Not RS.Eof Then
	arrayData=RS.Getrows()		
	RS.Close : Set RS=Nothing
	Response.Write "<ul>" &vbcrlf
	For i=0 To UBound(arrayData,2)
		Response.Write "<li>" & arrayData(1,i)
		GetBabies arrayData(0,i) 'hämta ev barn
		Response.Write "</li>" &vbcrlf
	Next
	Response.Write "</ul>"&vbcrlf
Else
	RS.Close : Set RS=Nothing
End if 	
End Sub %>
<%
GetBabies 0
%>

 

[EDIT]Ok, nu har jag förenklat/förminskat koden

 

[bild bifogad 2009-04-21 08:18:06 av Admini]

 

[inlägget ändrat 2009-04-21 12:35:36 av Admini]

1136463_thumb.jpg

Länk till kommentar
Dela på andra webbplatser

Hej jonas_Bo

Det är faktiskt din kod som jag fått för länge sen :thumbsup:

Så ser hela koden ut:

<%
Sub GetBabies(pid)
If pid="" Then Exit Sub
Set RS=Conn.Execute("SELECT Id, sve, parent, ordning, level FROM menyer WHERE parent="&pid&" Order BY parent ASC, ordning ASC, level ASC")
If Not RS.Eof Then
	arrayData=RS.Getrows()	
	RS.Close : Set RS=Nothing
	'Response.Write "" 
For i=0 To UBound(arrayData,2)
	If arrayData(2,i) = 0 Then	'--- Om parent = 0 ---
	stor=1
	Else
	stor=8
	End If
img="<img src='images/nope.gif' height='1' width='"& arrayData(4,i) * 1 * stor &"'>"
	If arrayData(4,i)=1 Then	'--- Om level = 1 ---
	img = img &"+"
	Else
	For j=1 To arrayData(4,i)
	img = img & "&nbsp;"
	Next		
	img = img & "<img src='images/level.gif'> &nbsp;"
	End If
		Response.Write "<tr bgcolor='#eaeaea'>"
		Response.Write "<td>" & arrayData(0,i)&"</td>"
		Response.Write "<td align='right'>" & arrayData(2,i)&"</td>"
		Response.Write"<td>"& img
		Response.Write "<a href='admin_submeny.asp?id="&arrayData(0,i)&"'>" & arrayData(1,i)&"</td>"
		Response.Write "<td align='right'>" & arrayData(3,i)&"</td>"
		Response.Write "<td align='center'>" & arrayData(4,i)&"</td>"
		Response.Write "<td align='center'><a href='tabort_meny.asp?del="&arrayData(0,i)&"'>X</a></td>"
		Response.Write "</tr>" 
		GetBabies arrayData(0,i) 'hämta ev barn

Next
	'Response.Write ""
Else
	RS.Close : Set RS=Nothing
End if 	
End Sub %>

<%
GetBabies 0
%>

Tack för hjälpen

 

Länk till kommentar
Dela på andra webbplatser

Och som sagt: vad är det som inte fungerar?

Hur ser den kod som genererats ut (dvs den html-markup efter att du kört sidan i webbläsare -- Högerklicka i sidan/Visa Källa.) ?

 

Och måste du använda tabeller? Inte bra för menyer på många sätt.

ul-li is the shit!!

[inlägget ändrat 2009-04-21 21:45:18 av Jonas_Bo]

Länk till kommentar
Dela på andra webbplatser

Hej igen

Som sagt längre upp så vill jag att det funkar på samma sätt som på adressen: https://www.inet.se/artikel/7104130/

Titta på menyn till vänster

 

Att det "beter" sig på samma sätt så att man kan "stänga" en gren och öppna en annan.

Att man stänger en öppnad gren om man klickar på den

Att en öppnad gren stänger om man öppnar en annan.

 

Alltså som en riktig menysystem

 

tack på förhand

 

Länk till kommentar
Dela på andra webbplatser

Standardutseendet för listor fungerar rätt bra som en utgångspunkt (se till att använda UL-LI som du visade i första inlägget).

 

Använd css för att styra hur det skall se ut.

 
#menu ul {margin: .1em 0 .2em; padding:0;list-style: outside none}
#menu li { padding:0;}
#menu li li {margin-left: 1.5em; font-size: 85%;}
#menu li li li{font-size: 100%;}
#menu a{color: #c00; text-decoration: none;}
#menu a:hover{text-decoration: underline;}

 

 

Skall menyn (1)expanderas och stängas när man klickar på dem eller vid (2) nästa sidladdning?

 

1. Du får göra en loop på själva sidan så du kan ta reda på vilken rot-parent som sidan tillhör och anropa getBabies om det är den i menyn

 

2. Se till att alla items i menyn genereras till HTML-koden och så använder du javascript(jquery) för att öppna dess barn vid klick.

 

Länk till kommentar
Dela på andra webbplatser

Skall menyn (1)expanderas och stängas när man klickar på dem

 

Ja det stämmer bra, precis som i en "riktig" meny

Jag är kanske trött men jag förstår inte riktigt följande:

1. Du får göra en loop på själva sidan så du kan ta reda på vilken rot-parent som sidan tillhör och anropa getBabies om det är den i menyn

Menar du hur tillhörande sida ska visas? det tar jag hand om sen i så fall.

 

Kan du ge lite tip/ledtråd till följande:

2. Se till att alla items i menyn genereras till HTML-koden och så använder du javascript(jquery) för att öppna dess barn vid klick.

 

Tack

 

Länk till kommentar
Dela på andra webbplatser

oj, jag blandade ihop siffrorna där nere vid förklaringen.

 

det skall vara tvärtom.

 

Du får alltså använda javascript. Hela menyn med alla dess barn måste vara genererade om du inte vill lägga in det med ajax, men det tycker jag är onödigt och det är mer fördelar med att inte använda ajax i det fallet - bland annat ut sökmotorssynpunkt.

 

Här är en fin jqueryfunktion.

http://view.jquery.com/trunk/plugins/treeview/demo/prerendered.html

man kan skippa ikonerna och linjerna om man vill.

[inlägget ändrat 2009-04-22 21:29:05 av Jonas_Bo]

Länk till kommentar
Dela på andra webbplatser

Har försökt med en liten javascript så här:

<script language="JavaScript">
function stang(a)
{
if(document.getElementById(a).style.visibility = 'visible')
	{
	document.getElementById(a).style.visibility = 'hidden'
	}
else 
	{
	document.getElementById(a).style.visibility = 'visible'
	}
}
</script>
</head>
<body>
<ul>
	<li><a href="#" onClick="stang(31)" id="23">Hus</a>
		<ul id="31" style="visibility:visible;">
			<li id="32">Vardagsrum</li>
			<li id="33">soffan</li>
			<li id="34">TV</li>
		</ul>
	</li>
</ul>

Men det funkar bara till hälften, dvs vid klick så försvinner undermenyn men kan inte öppnas vid nästa klickning.

Kan nån se vad det är för fel?

tack

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

Ändra din funktion till:

var BlnTmp = false;
function stang(a)
{
	document.getElementById(a).style.visibility = (BlnTmp)? 'visible':'hidden';
	BlnTmp=!BlnTmp;
}

Ändra sedan ditt anrop till:

onclick="stang(31);return false;"

Men JQuery är att föredra då du får så mycket "gratis" i funktionsväg.

 

Länk till kommentar
Dela på andra webbplatser

Snyggt Micke!

 

Ev spin-off på denna tråd görs med fördel i javascriptforumet.

 

Tack på förhand.

 

Länk till kommentar
Dela på andra webbplatser

Har nu provat JQuery koden och den funkar för en enda länk.

Men om man har flera då måste man klicka fler gånger för att det ska funka.

Här är koden, prova själva så får ni se:

<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" href="admin/style1.css">
<script language="JavaScript">
var BlnTmp = false;
function stang(a)
{
	document.getElementById(a).style.visibility = (BlnTmp)? 'hidden':'visible';
	BlnTmp=!BlnTmp;
}
</script>
</head>
<body>
<br>
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
	<td>
		<ul>
		<li><a id="l1" href="#" onclick="stang(1);return false;">Hus</a></li>

		<ul style="visibility:hidden" id="1">
			<li><a id="l2" href="#" onclick="stang(2);return false;">Övervåning</a></li>
				<ul style="visibility:hidden" id="2">
					<li><a id="l3" href="#" onclick="stang(3);return false;">Sovrum
						<ul style="visibility:hidden" id="3">
							<li>Säng</li>
						</ul>
					</li>
					<li>Badrum
						<ul>
							<li>Badkar</li>
							<li>Toastol</li>
						</ul>
					</li>
				</ul>
			<li>Bottenvåning</li>
		</ul>
		<li>Arbete</li>

		<li>Fritid</li>
		</ul>
	</td>
</tr>
</table>

</body>
</html>

 

 

Länk till kommentar
Dela på andra webbplatser

Anjuna Moon

Ändra scriptet till följande så ska det fungera för samtliga länkar

 

<script language="JavaScript">
var BlnTmp = new Array;
function stang(a)
{
	if(BlnTmp[a]==null)
		BlnTmp[a]=false;
	document.getElementById(a).style.visibility = (BlnTmp[a])? 'hidden':'visible';
	BlnTmp[a]=!BlnTmp[a];
}
</script>

 

Länk till kommentar
Dela på andra webbplatser

Ändra scriptet till följande så ska det fungera för samtliga länkar

Det funkar naturligtvis! :thumbsup:

 

Men en annan grej är att platsen för de osynliga menyerna "tar plats" och lämnar således tom "ruta" efter sig, så här:

*Hus







*Arbete
*Fritid

 

Går att fixa?

 

 

Länk till kommentar
Dela på andra webbplatser

Anjuna Moon

Använd display istället för visibility så blir du av med tomrummen

 

<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" href="admin/style1.css">
<script language="JavaScript">
var BlnTmp = new Array;
function stang(a)
{
	if(BlnTmp[a]==null)
		BlnTmp[a]=false;
	document.getElementById(a).style.display = (BlnTmp[a])? 'none':'block';
	BlnTmp[a]=!BlnTmp[a];
}
</script>
</head>
<body>
<br>
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
	<td>
		<ul>
		<li><a id="l1" href="#" onclick="stang(1);return false;">Hus</a></li>

		<ul style="display:none" id="1">
			<li><a id="l2" href="#" onclick="stang(2);return false;">Övervåning</a></li>
				<ul style="display:none" id="2">
					<li><a id="l3" href="#" onclick="stang(3);return false;">Sovrum</a>
						<ul style="display:none" id="3">
							<li>Säng</li>
						</ul>
					</li>
					<li>Badrum
						<ul>
							<li>Badkar</li>
							<li>Toastol</li>
						</ul>
					</li>
				</ul>
			<li>Bottenvåning</li>
		</ul>
		<li>Arbete</li>

		<li>Fritid</li>
		</ul>
	</td>
</tr>
</table>

</body>
</html>

 

Länk till kommentar
Dela på andra webbplatser

Använd display istället för visibility så blir du av med tomrummen

Tack det funkar fint! :thumbsup:

 

Menyerna öppnas och stängs som det ska...

 

Nu skulle jag vilja stänga dem på 2 olika sätt

Sätt 2 är så här:

Ett (+) tecken före huvudmenyerna visar att den menyn har innehåll.

Vid clickning på den (eller huvudmenyn) så ändras den till (-) samtidigt som undermenyn öppnas.

När man har öppnat alla undermenyer i en kedja så kan man antingen klicka på huvudmenyn och stänga hela menyn "tillfälligt" som idag

Eller

så kan man klicka på (-) tecknet så stängs alla/hela underkedjor också

 

Går det att göra det?

 

tack på förhand

 

Länk till kommentar
Dela på andra webbplatser

 

Nu handlar tråden om javascript och som jag skrev för några dagar så hänvisas de frågor till den delen av forumet.

 

Plus och minustecken kan man lägga till med CSS-klasser i A-taggarna.

använd javascript för att toggla css-klass.

 

 

Länk till kommentar
Dela på andra webbplatser

  • 7 months later...

Hej och tack till alla vänliga själar som hjälpt en "självlärd" liten admin (admini)

 

Nu har jag återigen börjat jobba på detta projekt och det sista som är kvar är ju din sista mening här:

 

Plus och minustecken kan man lägga till med CSS-klasser i A-taggarna.

använd javascript för att toggla css-klass.

 

Hur gör man detta?

skulle vara enormt tacksam för tips och råd :)

 

tack!

 

Länk till kommentar
Dela på andra webbplatser

Om jag var du skulle jag ta mig en ordentlig titt på JQuery och Mootools lösningar för precis dina specifikationer.

 

Det finns massor med exempel på hur du kan använda Mootools olika skript till att göra toogle funktioner för att visa ditt innehåll i olika sorters visningarsaltenativ.

 

http://jquery.com/

http://mootools.net/

 

Helt enkelt det bästa och enklaste som finns =)

 

Happy coding

4ceace

 

KOD-taggar borttagna av moderator

 

 

[inlägget ändrat 2009-12-26 15:49:45 av Cluster]

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...