✔ Listen Dropdown Menü?

[schnarnd]

Wie nennt sich ein Menu wie es auf dieser Seite, unter "Filter", ist?
http://www.crossmind.net/cnt/sites/sites.php
Und wie mache ich das?
Vielen Dank.

 

[Maik]

Ein Blick in den Quellcode der Seite hätte Dir Deine Frage beantwortet, wie das "Dropdown-Menü" umgesetzt wurde

<script language="JavaScript" type="text/javascript">
<!--
	function siteNavSwap(which) {
		if(document.getElementById("siteNav"+which+"Content").style.display == "none") {
			document.getElementById("siteNav"+which+"Content").style.display = '';
			document.images("siteNav"+which+"Image").src = "../img/site_catnav_pointer_ex.gif";
		} else {
			document.getElementById("siteNav"+which+"Content").style.display = 'none';
			document.images("siteNav"+which+"Image").src = "../img/site_catnav_pointer.gif";
		}
	}
//-->
</script>

Wenn Du mal nach Dropdown Menü suchst, solltest Du hier im Javascript-Board genügend Themen mit weiteren Lösungsbeispielen finden.

 

[schnarnd]

Ne eben nicht! Die Suche nach Dropdown Menüs hat nur andere Ergebnisse gebracht. Hab mittlerweile rausgefunden, dass dies Tree Menüs sind. Aber da hat sich ein neues Problem ergeben!
Hab ein simples gefunden http://www.dynamicdrive.com/dynamicindex1/navigate1.htm .
Aber hab das auf meine Seite eingebaut http://schnui.sc.funpic.de bei Foto-Galerie. Aber wenn ich meine Seite aufrufe wird das Tree Menü direkt geöffnet angezeigt. Das ist nun nicht in meinem Sinne sosnt könnte ich mir das Menü auch sparen.
Jemand ne Idee?
Danke.

 

[Maik]

Also, ich habe mal das Script nach "dynamicdrive"-Anleitung in eine Seite eingebaut und keine Probleme feststellen können, sprich alle Submenüs sind beim Seitenaufruf geschlossen.

Vielleicht mußt Du ja nur das Markup Deiner Seite validieren, damit das Script wie gewünscht funktioniert, denn der W3C-Validator gibt für das Dokument 42 Fehler aus.

-> Result for http://schnui.sc.funpic.de/ - W3C Markup Validator

Und bitte beachte die rechtlichen Hinweise zur Nutzung des Scripts:

<script type="text/javascript" src="simpletreemenu.js">

/***********************************************
* Simple Tree Menu- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

 

[schnarnd]

Ah ja dein Simpletree Menü klappt prima. http://schnui.sc.funpic.de/obdaswaswird.html . Aber ein kleiner "Fehler" treibt mich in den Wahnsinn. Ich schaffe es einfach nciht diese Liste richtig zu formatieren. Also Schrift ist kein Problem, aber ich möchte die auf der linken Seite haben. Könnte das mit diesem <ul> Befehl zusammenhängen?
Ich bin völlig ratlos.
Vielen Dank!

 

[Maik]

Verwende folgendes Stylesheet, um die Einrückungen der verschachtelten Liste aufzuheben:

.treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
}

.treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
background: white url(list.gif) no-repeat left center;
list-style-type: none;
padding-left: 0px;
margin-bottom: 3px;
}

.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
background: white url(closed.gif) no-repeat left 1px;
cursor: hand !important;
cursor: pointer !important;
}

.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}

.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: default;
}

span {
padding-left: 22px;
}

und füge überall ein span-Element ein, um den linken Innenabstand zur Hintergrundgrafik einzuhalten:

<ul id="treemenu1" class="treeview">
    <li><span>Startseite</span></li>
    <li><span>Termine</span></li>
    <li><span>Tipps&Tricks</span></li>
    <li><span>Gaestebuch</span></li>
    <li><span>Portfolio</span></li>
    <li><span>Fotogalerie</span>
            <ul>
                 <li><span>Partys</span></li>
                 <li><span>Urlaube</span></li>
                 <li><span>Uni/Schule</span></li>
             </ul>
     </li>
     <li><span>Downloads</span></li>
</ul>

Und noch zwei Hinweise:

1. Eine ID darf in einem Dokument nur einmal vergeben werden. Du hast die ID #content aber mehrmals verwendet. Ersetze sie daher durch durch die Klasse .content, da diese unbegrenzt in einem Dokument eingesetzt werden darf.
   
   
2. Du hast meinen gestrigen Hinweis bzgl. der Nutzung des Scripts nicht beachtet!
   

   <script type="text/javascript" src="simpletreemenu.js">
   
   /***********************************************
   * Simple Tree Menu- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
   * This notice MUST stay intact for legal use
   * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
   ***********************************************/
   
   </script>

   Beachte hierzu bitte auch die Netiquette Nr.5.

 

[schnarnd]

Klappt leider immer noch nicht! Dein Hinweis ist wieder drin..
http://schnui.sc.funpic.de/obdaswaswird.html

 

[Maik]

Erweiter mal das Stylesheet mit folgender Regel:

/*  ----------------tree menu---------------------- */
ul.treeview {
margin: 0;
padding: 0;
}

.treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
}

.treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
background: white url(list.gif) no-repeat left center;
list-style-type: none;
padding-left: 0px;
margin-bottom: 3px;
}

.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
background: white url(closed.gif) no-repeat left 1px;
cursor: hand !important;
cursor: pointer !important;
}

.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}

.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: default;
}

span {
padding-left: 22px;
}

 

[schnarnd]

Tatsächlich, es funktioniert. Ich danke dir vielmals für all deine Mühen.

//edit

Aber einen Fehler hab ich noch. Mit Firefox läuft alles prima. Aber der IE streikt, er zeigt die Bilder nicht korrekt an. Soll ich den IE jetzt verbannen und keine Rücksicht mehr darauf nehmen oder weisst du woran es liegen könnte?
Vielen Dank.
http://schnui.sc.funpic.de/obdaswaswird.html

 

[Maik]

Keine Ursache, ist doch gern geschehen.

Und bitte markiere den "gelösten" Thread noch als erledigt.