HTML

Aufzählung mit Ordnerstruktur

Diskussionsgruppen
Betriebsysteme: Windows 7; WindowsVista; WindowsXP; Linux; BS-Sonstige
Software: Textverarbeitung; Tabellenkalkulation; Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; E-Mail/Outlook; Internet Browser; SW-Sonstige
Hardware: Mainboard/CPU/RAM; Grafikkarten; Peripherie; HW Sonstiges
Netzwerk: DSL; W-Lan; Telekommunikation; NW-Sonstiges
Programmierung: Skripte(PHP,ASP,Perl...); Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke

Frage

Hallo, Ihr kennt sicherlich alle diese Menüs auf Homepages die aufgebaut sind wie der Windows explorer... Ich möchte so eine Struktur jedoch nicht als Navigation sondern als Liste nutzen, dh. wenn ich eine Unterteilung habe wie etwa so: + Liste 1 - Listenteil 1 - Listenteil 2 - Listenteil 3 + Liste 2 - Listenteil 1 - Listenteil 2 ...dann soll diese erst so angezeigt werden: + Liste 1 + Liste 2 und bei Klick auf "+ Liste 1", so: - Liste 1 - Listenteil 1 - Listenteil 2 - Listenteil 3 + Liste 2 Ich denke ihr wisst was ich meine und hoffe ihr könnt mir helfen sowas auf eine Homepage zu bringen. Danke!

Antwort 1 von ClemBra

Probier es mal damit. Getestet im Firefox 1.5


<html>
<head>
<title>Liste</title>
<script language="JavaScript">
function showhide(name) {
	alert(document.getElementById(name).style.display);
	if (document.getElementById(name).style.display == "none") {
		document.getElementById(name).style.display = "block";
		document.getElementById("img_" + name).src = "open.gif";
	} else {
		document.getElementById(name).style.display = "none";
		document.getElementById("img_" + name).src = "closed.gif";
	}
}
</script>
</head>
<body>
<h1>Liste</h1>
<img id="img_punkt_1" src="closed.gif"><a href="javascript:showhide(´punkt_1´);">Punkt 1</a><br />
<div id="punkt_1" style="display: none;">
Punkt 1.1<br />
Punkt 1.2
</div>
<img id="img_punkt_2" src="closed.gif"><a href="javascript:showhide(´punkt_2´);">Punkt 2</a><br />
<div id="punkt_1" style="display: none;">
Punkt 2.1
</div>
</body>
</html>

Antwort 2 von rfb

das funktioniert so nicht zuverlässig, da ohne JavaScript die Unterpunkte nie zu sehen sind.
Verbesserungsvorschlag (der auch eventuelle Probleme mit älteren Browsern abfängt):

<html>
<head>
<title>Liste</title>
<script language="JavaScript">
function showhide(name) {
if (!DOM) return;
if (document.getElementById(name).style.display == "none") {
document.getElementById(name).style.display = "block";
document.getElementById("img_" + name).src = "open.gif";
document.getElementById("img_" + name).alt = "open";
} else {
document.getElementById(name).style.display = "none";
document.getElementById("img_" + name).src = "closed.gif";
document.getElementById("img_" + name).alt = "closed";
}}
window.onload=function() {
DOM=(document.getElementById)? true:false;
if (DOM) {
showhide(´punkt_1´);
showhide(´punkt_2´);
}}
</script>
</head>
<body>
<h1>Liste</h1>
<img id="img_punkt_1" src="open.gif" alt="open"><a href="javascript:showhide(´punkt_1´);">Punkt 1</a><br />
<ul id="punkt_1">
<li>Punkt 1.1</li>
<li>Punkt 1.2</li>
</ul>
<img id="img_punkt_2" src="open.gif" alt="open"><a href="javascript:showhide(´punkt_2´);">Punkt 2</a><br />
<ul id="punkt_2">
<li>Punkt 2.1</li>
</ul>
</body>
</html>

Antwort 3 von rfb

noch besser ist diese Variante (hatte grad Langeweile):

<html>
<head>
<title>Liste</title>
<script type="text/javascript">
function init() {
if (!DOM) return;
var liste=document.getElementById("punkte");
var punkte=liste.childNodes;
for (var p=0;p<punkte.length;p++) {
if (punkte[p].nodeType==1) {
punkte[p].getElementsByTagName("ul")[0].setAttribute("id","punkt_"+p);
var text=" ";
if (punkte[p].firstChild.nodeType==3) {
text=punkte[p].firstChild.data;
punkte[p].removeChild(punkte[p].firstChild);
}
var aknoten=document.createElement("a");
punkte[p].insertBefore(aknoten,punkte[p].firstChild);
var bild=document.createElement("img");
bild.setAttribute("src","open.gif");
bild.setAttribute("alt","open");
bild.setAttribute("id","img_punkt_"+p);
aknoten.appendChild(bild);
aknoten.appendChild(document.createTextNode(text));
aknoten.setAttribute("href","javascript:showhide(´punkt_"+p+"´);");
showhide("punkt_"+p);
}
}
}

function showhide(name) {
if (!DOM) return;
if (document.getElementById(name).style.display == "none") {
document.getElementById(name).style.display = "block";
document.getElementById("img_" + name).src = "open.gif";
document.getElementById("img_" + name).alt = "open";
} else {
document.getElementById(name).style.display = "none";
document.getElementById("img_" + name).src = "close.gif";
document.getElementById("img_" + name).alt = "close";
}}

window.onload=function() {
DOM=(document.getElementById)? true:false;
init();
}
</script>
</head>
<body>
<h1>Liste</h1>
<ul id="punkte">
<li>Punkt 1<ul>
<li>Punkt 1.1</li>
<li>Punkt 1.2</li>
</ul></li>
<li>Punkt 2<ul>
<li>Punkt 2.1</li>
</ul></li>
</ul>
</body>
</html>

Hier werden die Elemente zum Wegklappen erst durch JavaScript geschaffen, die Zuordnung der IDs macht das Script selbst, als Seitenersteller musst du nur eine Liste mit Unterlisten schaffen. Dadurch vereinfacht sich auch der Aufwand beim Erweitern etc.
Und User ohne JavaScript brauchen sich nicht über die Bildchen und nutzlosen Links zu wundern. Natürlich ist auch die Gestaltung der "Hauptliste" durch das Element <ul> sinnvoller als ohne.

Antwort 4 von Nucky

HI,
... und wo und wie wird die img-Datei eingebunden?

Antwort 5 von rfb

per JavaScript natürlich:
var bild=document.createElement("img");

Antwort 6 von rfb

hier noch einmal eine Version, die auch ein paar Aspekte des "unobtrusive Javascript" berücksichtigt:

<html>
<head>
<title>Liste</title>
<style type="text/css">
.ohne {list-style-type:none}
.weg {display:none}
.da {display:block}
a img {border:none}
</style>
<script type="text/javascript">
function init() {
if (!DOM) return;
var liste=document.getElementById("punkte");
liste.className="ohne";
var punkte=liste.childNodes;
for (var p=0;p<punkte.length;p++) {
if (punkte[p].nodeType==1) {
punkte[p].getElementsByTagName("ul")[0].setAttribute("id","punkt_"+p);
var text=" ";
if (punkte[p].firstChild.nodeType==3) {
text=punkte[p].firstChild.data;
punkte[p].removeChild(punkte[p].firstChild);
}
var aknoten=document.createElement("a");
punkte[p].insertBefore(aknoten,punkte[p].firstChild);
var bild=document.createElement("img");
bild.setAttribute("id","img_punkt_"+p);
aknoten.appendChild(bild);
aknoten.appendChild(document.createTextNode(text));
aknoten.setAttribute("href","javascript:showhide(´punkt_"+p+"´);");
aknoten.setAttribute("title","aus- und einklappen");
showhide("punkt_"+p);
}
}
}

function showhide(p) {
if (!DOM) return;
var s=document.getElementById(p);
if (!s.className || s.className=="da") {
s.className="weg";
with (document.getElementById("img_"+p)) {
src="plus.gif";
alt="+";
}}
else {
s.className="da";
with (document.getElementById("img_"+p)) {
src="minus.gif";
alt="-";
}}}

window.onload=function() {
DOM=(document.createElement)?true:false;
init();
}
</script>
</head>
<body>
<h1>Liste</h1>
<ul id="punkte">
<li>Punkt 1<ul>
<li>Punkt 1.1</li>
<li>Punkt 1.2</li>
</ul></li>
<li>Punkt 2<ul>
<li>Punkt 2.1</li>
</ul></li>
</ul>
</body>
</html>

init
- setzt zuerst die Klasse "

ohne

" für die Haupt-Liste
- sucht nach Unterpunkten
- liest den ersten Text
- ersetzt diesen durch einen Link auf die Funktion

showhide

- fügt in den Link ein Bild ein sowie den Text als Linktext
- setzt dabei die IDs
- ruft

showhide

mit den IDs auf, dadurch wird die Bildquelle

plus.gif

sowie die Klasse "

weg

" für die Unterliste gesetzt

showhide
- prüft welchen Klassenamen die Unterliste hat
- tauscht ihn von

weg

auf

da

bzw. umgekehrt
- tauscht entsprechend die Bilder von

minus.gif

auf

plus.gif

bzw. umgekehrt

im Stylesheet
- sorgt die Klasse "

ohne

" für das Verschwinden der Listenzeichen
-

weg

und

da

sollten selbsterklärend sein.
-

a img {border:none}

entfernt den unschönen Rahmen um Bilder innerhalb von Links
- hier könnten/sollten noch Größenangaben für die plus- und minus-Bilder stehen

Diese Trennung von Style und JavaScript erleichtert die Wartung weiterhin.

Antwort 7 von Horatio

Vielen Dank für die ausführlichen Antworten nur leider hab ich keinerlei Ahnung von Javascript, es funktioniert auch nicht aber ich weiß nicht ob meine Denkweise grad überhaupt richtig ist, ich hab das jetzt einfach als Html Seite abgespeichert und im Browser aufgerufen, da sehe ich aber nur:

- Punkt 1
- Punkt 2

Beim Klick auf einen der Punkte tut sich aber leider gar nichts.

Antwort 8 von Nucky

Hi, du muss in dieser Zeile aknoten.setAttribute("href","javascript:showhide(´punkt_"+p+"´);"); die beiden Zeichen durch die über der # ersetzen und deine Grafiken in minus.gif auf plus.gif umbenennen. Bei mir funktioniert es.

Antwort 9 von rfb

wie Nucky schon sagte: ersetze alle ´ durch das einfache Anführungszeichen (neben dem Ä auf der Tastatur), beim Kopieren aus den Supportnetseiten wird da immer was vertauscht.

Antwort 10 von Nucky

@rfb

Wie kann ich zwischen Grafik und Punk1 und Punkt2 noch ein Leerzeichen einfügen? Beides steht mir etwas zu eng.

Antwort 11 von Horatio

Vielen Dank jetzt gehts! :)

Eine Frage hätte ich aber noch, ich hab viel rumprobiert bin aber zu keiner Lösung gekommen, wie mach ich denn einen Aufklappbaren Unterpunkt?

Also

+ Punkt 1
- Punkt 1.1
- Punkt 1.2
+ Punkt 1.3

?

Antwort 12 von rfb

@Nucky:
statt Leerzeichen einfach den Abstand des Bildes erhöhen

ul#punkte img {margin-right:1ex}

im Stylesheet

@Horatio:
das bedeutet eine große Erweiterung. Im Prinzip müsste das Script dazu rekursiv ale Unterlisten durchgehen um weitere Listen zu suchen.

Alternative(nicht so elegant):
füge für die Unterliste eine ID (so wie "punkte" für die Hauptliste, also zB "punkte1") ein,
ersetze in der Funktion init alle "punkte" durch eine Variable, meinetwegen

wo

function init(wo) {
if (!DOM) return;
var liste=document.getElementById(wo);
...

rufe init mit Angabe der IDs mehrmals auf:

window.onload=function() {
DOM=(document.createElement)?true:false;
init("punkte1");
init("punkte");

(kann jetzt nicht testen obs klappt)

Antwort 13 von Horatio

Wie gesagt ich kenn mich mit Javascript überhaupt nicht aus :´(

Was muss ich denn da im Code genau ändern und wo und wieviel? :-|

Antwort 14 von Horatio

Ich will euch jetzt nicht ärgern oder so, aber bei mir müssten es sogar noch aufklappbar Unter-Unterpunkte geben [URL=http://www.smileygarden.de][IMG]http://www.smileygarden.de/smilie/Smileygarden/peinlich.gif[/IMG][/URL]

Antwort 15 von Nucky

@Horatio

Was du evtl. suchst findest du auch fertig im WEB s. hier http://www.dhtml-now.de//downloads/treebeispiel.html# es gibt davon verschiedene Varianten, musst nur danach googln.

Antwort 16 von rfb

@Nucky:
das von dir gefundene Beispiel hat - wie leider viele soclhe Scripte - den Nachteil, dass ohne JavaScript einfach eine leere Seite erscheint.
Das ist weder für User noch für Suchmaschinen sinnvoll.

@Horatio:
die unelegante Anpassung:

<html>
<head>
<title>Liste</title>
<style type="text/css">
.ohne {list-style-type:none}
.weg {display:none}
.da {display:block}
a img {border:none}
ul#punkte img {margin-right:1ex}
</style>
<script type="text/javascript">
function init(wo) {
if (!DOM) return;
var liste=document.getElementById(wo);
liste.className="ohne"
var punkte=liste.childNodes;
for (var p=0;p<punkte.length;p++) {
if (punkte[p].nodeType==1) {
punkte[p].getElementsByTagName("ul")[0].setAttribute("id","punkt_"+wo+p);
var text=" ";
if (punkte[p].firstChild.nodeType==3) {
text=punkte[p].firstChild.data;
punkte[p].removeChild(punkte[p].firstChild);
}
var aknoten=document.createElement("a");
punkte[p].insertBefore(aknoten,punkte[p].firstChild);
var bild=document.createElement("img");
bild.setAttribute("id","img_punkt_"+wo+p);
aknoten.appendChild(bild);
aknoten.appendChild(document.createTextNode(text));
aknoten.setAttribute("href","javascript:showhide(´punkt_"+wo+p+"´);");
aknoten.setAttribute("title","aus- und einklappen");
showhide("punkt_"+wo+p);
}
}
}

function showhide(p) {
if (!DOM) return;
var s=document.getElementById(p);
if (!s.className || s.className.indexOf("weg")<0) {
s.className="weg";
with (document.getElementById("img_"+p)) {
src="plus.gif";
alt="+";
}}
else {
s.className="da";
with (document.getElementById("img_"+p)) {
src="minus.gif";
alt="-";
}}
}

window.onload=function() {
DOM=(document.createElement)?true:false;
init("unterpunkte1");
init("punkte");
}
</script>
</head>
<body>
<h1>Liste</h1>
<ul id="punkte">
<li>Punkt 1
<ul id="unterpunkte1">
<li>Punkt 1.1<ul><li>Punkt 1.1.1</li><li>Punkt 1.1.2</li></ul></li>
<li>Punkt 1.2<ul><li>Punkt 1.2.1</li><li>Punkt 1.2.2</li></ul></li>
<li>Punkt 1.3<ul><li>Punkt 1.3.1</li><li>Punkt 1.3.2</li></ul></li>
</ul>
</li>
<li>
Punkt 2
<ul>
<li>
Punkt 2.1</li>
</ul></li>
</ul>
</body>
</html>

Antwort 17 von Horatio

Vielen Dank! :)

Aber warum lassen sich denn die Unterpunkte vom zweiten Unterpunkt nicht öffnen? Ich habe es so

- Punkt 1
+ Punkt 1.1
+ Punkt 1.2
- Punkt 2.2
- Punkt 2.2.1
-Punkt 2
-Punkt 1.1
- Punkt 1.1.1
- Punkt 1.1.2
-Punkt 1.2
- Punkt 1.2.1
- Punkt 1.2.2

Und die Liste unter Punkt 2 ist sofort vollständig ausgeklappt

Antwort 18 von rfb

@Horatio:
ohne deinen Quellcode zu kennen kann ich darauf nicht antworten, die lustigen + und - Punkt x.y.z hier sagen ja nix darüber, wie du das realisiert hast.

Antwort 19 von Horatio

Oh, tut mir Leid.

Mein Code wie es funktioniert ist so:

<html>
<head>
<title>Liste</title>
<style type="text/css">
.ohne {list-style-type:none}
.weg {display:none}
.da {display:block}
a img {border:none}
ul#punkte img {margin-right:1ex}
body,td,th {
line-height: 200%;
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
}
body {
	background-color: #ebebeb;
	margin-right: 20px;
	margin-left: 0px;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
	font-size: 12px;
}
</style>
<script type="text/javascript">
function init(wo) {
if (!DOM) return;
var liste=document.getElementById(wo);
liste.className="ohne"
var punkte=liste.childNodes;
for (var p=0;p<punkte.length;p++) {
if (punkte[p].nodeType==1) {
punkte[p].getElementsByTagName("ul")[0].setAttribute("id","punkt_"+wo+p);
var text=" ";
if (punkte[p].firstChild.nodeType==3) {
text=punkte[p].firstChild.data;
punkte[p].removeChild(punkte[p].firstChild);
}
var aknoten=document.createElement("a");
punkte[p].insertBefore(aknoten,punkte[p].firstChild);
var bild=document.createElement("img");
bild.setAttribute("id","img_punkt_"+wo+p);
aknoten.appendChild(bild);
aknoten.appendChild(document.createTextNode(text));
aknoten.setAttribute("href","javascript:showhide(´punkt_"+wo+p+"´);");
aknoten.setAttribute("title","aus- und einklappen");
showhide("punkt_"+wo+p);
}
}
}

function showhide(p) {
if (!DOM) return;
var s=document.getElementById(p);
if (!s.className || s.className.indexOf("weg")<0) {
s.className="weg";
with (document.getElementById("img_"+p)) {
src="plusl.gif";
alt="+";
}}
else {
s.className="da";
with (document.getElementById("img_"+p)) {
src="minusl.gif";
alt="-";
}}
}

window.onload=function() {
DOM=(document.createElement)?true:false;
init("unterpunkte1");
init("punkte");
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<h1> Steuerberatung</h1> 
<ul id="punkte">
<li>Finanzbuchhaltung
  <ul id="unterpunkte1">
<li>Finanzbuchhaltung
  <ul>

    <li>Entgegennahme ode Abholung der gesammelten und nach einem von uns empfohlenen System geordnete Unterlagen </li>
    <li>Erfassung der Belege </li>
    <li>Auswerten der erfassten Belege mit Umsatzsteuervoranmeldung, Zusammenfassende Meldung, R&uuml;ckbericht oder betriebswirtschaftlicher Auswerung</li>
    <li>Abstimmen der Konten</li>
    <li>&Uuml;bermittlung der Daten an die Hausbank</li>
    <li>Zum Jahreswechsel: &Uuml;bernahme der Buchhaltung in die EDV, Einrichten des neuen Ablagesystems</li>


[................musste was rausnehmen, zu viele Zeichen im Post......................]


<li>Sonstige Leistungen   
  <ul>
    <li>Kassenpr&uuml;fung auf Fehlbelege  </li>
    <li>Telefonische R&uuml;ckfragen zu Belegen  </li>
    <li>Reisekostenabrechnung</li>
    <li><em><strong>Ihr Nutzen - Ihr Vorteil: </strong></em></li>

    <ul>
      - Vermeidung von Problemen
    </ul>
    <ul>
      - Rasche Kl&auml;rung offener Fragen
    </ul>
	
	<ul>
      - Erstellung der Abrechnungen nach aktuellen steuerlichen H&ouml;chstse
    </ul>

	
  </ul>
</li>
</ul>
</li>
</ul>
<h1></h1> 
</body>
</html>

Ich dachte jetzt am einfachsten kann ich das ja kopieren und erstezen, da der nächste Punkt ähnlich aufgebaut ist, und deshalb habe ich den Code von

 <script type="text/javascript">

bzw. ab der Überschrift (Ich hab beides probiert) bis zum Ende kopiert und über dem body eingefügt, die Liste wird dann aber voll ausgeklappt ohne links und so angezeigt.

Antwort 20 von rfb

wichtig wäre vor init("unterpunkte1"); für weitere Unterpunkte eine Zeile

 init("unterpunkte2");

... einzufügen
Und den Unterpunkten dann diese ID zu geben
Also

<ul id="unterpunkte2">

Es bringt gar nix irgendwelche JavaScripte noch einmal einzufügen, da die ja auf die gleichen IDs zugreifen!

Antwort 21 von Horatio

Und wie kann ich ein Listenelement ohne Unterpunkte erstellen?

Antwort 22 von rfb

??
wen du nix reinschreibst, keine ID vergibst und auch entsprechend keinen init()-Aufruf wird das Script dieses Element einfach ignorieren. Logisch, oder?

Antwort 23 von Horatio

Oh, ich hatte das schon probiert bin aber immer mit den Listen durcheinandergekommen, jetz hab ichs. Vielen Dank nochmal!