Hilfe beim BaumDiagramm

gelöschter User

also in der suche gab es ja ma ein thema mit dem baumdiagramm !
Ich will soetwas ähnliches machen !

auf http://javascript.welt-der-links.de/script/explor/exm.htm seht ihr ein baumdiagramm!

Hier meine Fantasy wie ich es gerne hätte

Das ganze soll ohne frames sein und im prinzip nur das baumdiagramm

Menü 1
Menü 2

wenn man es aufklappt

Menü 1
* blablabla
* blablabla
Menü 2
* blablabla
* blablabla

und man soll es auch wieder zuklappen können ..

Ich hab mich da dran versucht aber meine JavaScript kenntnisse sind so klein da geht das nicht so gut ..

Mit vielen super glücklichen grüßen euer crazywulf

Marcus

Hi,

meinst du sowas:
http://kurzgeschichten.marcus-haas.de
das basiert aber auf :hover (CSS, und funktioniert deshalb außer beim IE auch bei abgeschaltetem Javascript), man könnte das aber umbauen, sodass es bei onclick aufklappt, dann aber nur noch mit Javascript und das könnte bei Suchrobotern schwierigkeiten machen.

Und hier der Code dazu:
Javascript:

Code

// wird nur im IE ausgeführt
	if(document.selection) {
		var menu = document.getElementById('menu').getElementsByTagName('li');
		for (i=0;i<menu.length;i++) {
			if (menu[i].lastChild.nodeName == "UL") {
				menu[i].onmouseover = function () {
					this.lastChild.style.display = "block";
				}
				menu[i].onmouseout = function () {
					this.lastChild.style.display = "none";
				}
			}
		}
	}

Alles anzeigen

CSS:

Code

#menu{
	top:6em;
	left:-1em;
	background-color: #fff;
}
#menu a{
	margin:0;
	padding:3px;
	border:1px solid #d0d0d0;
	border-left:3px solid #aaaaaa;
	display:block;
}
#menu a:active{border-left:3px solid #ffff66}
#menu a:visited{border-left:3px solid #ffcc00}
#menu a:hover{border-left:3px solid #868686;}
#menu li{
	position:relative;
	list-style:none;
	width:9em;
	padding:0;
	margin:0;
	background-color: #fff;
	border:2px solid #fff;
}
/*Das hir soll zunächst nicht gezeigt werden*/
#menu li ul, #menu li:hover ul ul, #menu li:hover ul li:hover ul ul{ 
	display:none;
	position:absolute;
	left:6.5em;
	top:-2px;
	z-index:15;
}
/*für die verschachtelten Listen, wenn man darüberfährt*/
#menu li:hover ul, #menu li:hover li:hover ul, #menu li:hover ul li:hover ul li:hover ul{ 
	display:block;
}

Alles anzeigen

HTML (statt der Ebenen müssen hier natürlich links stehen):

Code

<ul id="menu">
  [*]ebene1-1
    <ul>
       [*]ebene2-1
         <ul>
             [*]ebene4-2
             [*]ebene3-2
         [/list]

       [*]ebene2-2
    [/list]

  [*]ebene1-2
  [*]ebene1-3
  [*]ebene1-4
[/list]

Alles anzeigen

ich hoffe das funktioniert so ad-hoc, ich habe das nämlich nicht nochmal getestet.

gelöschter User

Jo danke ! ES FUNZT !!!!!

Gruß crazywulf

Marcus

Hi,

gern geschehen. Ich hoffe, du hast das Design ein bißchen verändert

Gruß
Marcus

gelöschter User

stop läuft doch ned !

[Blockierte Grafik: http://mitglied.lycos.de/crazyplanet/MeinBild3.gif]

warum is da so en abstand zwischen der navi und dem menu?
warum reist der das bild scripts.gif so ein wenn er das menü ausfährt?

hier mein code ! :

HTML

<html>
<title>JavaScript</title>


<SCRIPT LANGUAGE=JavaScript>
// wird nur im IE ausgeführt
   if(document.selection) {
      var menu = document.getElementById('menu').getElementsByTagName('li');
      for (i=0;i<menu.length;i++) {
         if (menu[i].lastChild.nodeName == "UL") {
            menu[i].onmouseover = function () {
               this.lastChild.style.display = "block";
            }
            menu[i].onmouseout = function () {
               this.lastChild.style.display = "none";
            }
         }
      }
   } 
</SCRIPT>


<link rel="stylesheet" type="text/css"
href="style.css">
<body>
[img]bild/navigation.gif[/img]
<ul id="menu">
[*][url='scriptlink.php'][img]bild/scripts.gif[/img][/url]
<ul>
       [*]<font color="blue">
Newsletter 0.1  [url='download/newsletter.script.rar'][img]bild/download1.gif[/img][/url]  [url='newsletter/newsletter.php'][img]bild/vorschau.gif[/img][/url]


</font>
       [*]ebene2-2
[/list]


[*]ebene1-2
[*]ebene1-3
[*]ebene1-4
[/list] 


</body>
<html>

Alles anzeigen

Marcus

Hi,

vesuch mal:

Code

#menu{ 
   margin:0;
   padding:0;
}
#menu a{ 
   margin:0; 
   padding:0;
   display:block; 
}
#menu li{ 
   position:relative; 
   list-style:none; 
   width:<hier muss die Breite des Menüs in px stehen>px; 
   padding:0; 
   margin:0; 
} 
/*Das hir soll zunächst nicht gezeigt werden*/ 
#menu li ul, #menu li:hover ul ul, #menu li:hover ul li:hover ul ul{ 
   display:none; 
   position:absolute;
   /*Abstand von links, wenn er größer ist als die Breite, dann
    klappts nicht */
   left:<hier muss auch die Breite des Menüs in px stehen>px; 
} 
/*für die verschachtelten Listen, wenn man darüberfährt*/ 
#menu li:hover ul, #menu li:hover li:hover ul, #menu li:hover ul li:hover ul li:hover ul{ 
   display:block; 
}

Alles anzeigen

da müssten die unnötigen Formatierungen raus sein.

Gruß
Marcus

gelöschter User

Ich hab die abstände da eingetrangen und von 0 px bis zu 500 px ausprobiert kam immer das gleiche raus !

[Blockierte Grafik: http://mitglied.lycos.de/crazyplanet/MeinBild4.gif]

und ich wenn ich runter mit dem zeiger gehe is es weg nur wenn ich nach link s gehe bleibt das menü da sehr verwirrent ...

p.s.

code der style.css

Code

#menu{
   margin:0;
   padding:0;
}
#menu a{
   margin:0;
   padding:0;
   display:block;
}
#menu li{
   position:relative;
   list-style:none;
   width:200 px;
   padding:0;
   margin:0;
}
/*Das hir soll zunächst nicht gezeigt werden*/
#menu li ul, #menu li:hover ul ul, #menu li:hover ul li:hover ul ul{
   display:none;
   position:absolute;
   /*Abstand von links, wenn er größer ist als die Breite, dann
    klappts nicht */
   left:200 px;
}
/*für die verschachtelten Listen, wenn man darüberfährt*/
#menu li:hover ul, #menu li:hover li:hover ul, #menu li:hover ul li:hover ul li:hover ul{
   display:block;
}

Alles anzeigen

GreenRover

So und hir die Lösung des ganzen!!!!

Marcus

Hi,

sorry, das ich ich mich nicht früher wieder melden konnte, ist das Problem jetzt tatsächlich gelöst, ansonsten kannst du vielleicht mal nen Link auf die Seite setzen, live kann ich mir das besser anschauen.

Gruß
Marcus

GreenRover

Ja ist es. Denn ich habe es mit ihm gemeinsam per ICQ gelöst.

Hilfe beim BaumDiagramm

Tags

Benutzer online in diesem Thema