[S]Einfaches Drop Down Script

eXaByte0815

Cadet 3rd Year
Registriert
Okt. 2007
Beiträge
44
Hallo,

Ich suche für eine Page ein einfaches Drop Down Script. Habe auf diversen Seiten gesucht, aber nicht das passende gefunden. Ist wahrscheinlich schon fast zu einfach um es irgendwo als Download anzubieten.
Naja ich habe das mal schnell grafisch verdeutlicht:

script1zt6.jpg

^^So, hier klick man nun auf "Link 1". Jetzt möchte ich, dass sich alle nachfolgenden Zeilen nach unten verschieben und unter meinem Link eine Zeile mit Zusatzinformationen zum Vorschein kommt.

Also so:
script2nu5.jpg


Wenn man nun wieder auf "Link 1" klickt, soll die Zusatzinfo wieder verschwinden und die folgenden Zeilen wieder aufrücken.

Hoffe hier kann mir jemand helfen.

Gruß
Patrick
 
Danke für die Antwort.

Das scheint mir aber in der Tat etwas oversized für meinen Zweck. Ich suche nur ein ganz kleines Script.

Gruß
Patrick
 
Das kann man ganz einfach mit PHP und CSS realisieren - hast du PHP zur Verfügung, bzw. einige Vorkenntnisse?
 
Benutze CSS + JavaScript:

JS Events:
onMouseOver();
onMouseOut();

und dort lässt Du dann das entsprechende Element (div, span or whatever)
jeweils display:block oder none werden.

HTML:
<script language="JavaScript">

function show_entry(id) {

	if (document.getElementById(id).style.display == 'none') {

		document.getElementById(id).style.display = 'block';
		
	} else if (document.getElementById(id).style.display == 'block') {
	
		document.getElementById(id).style.display = 'none';
		
	}

}

</script>

Erster Link<span onMouseOver="show_entry(1);" OnMouseOut="show_entry(1);">&nbsp;Info</span><br />
<span id="1" style="display:none" z-index="2">Zusatzinfo 1</span>
Zweiter Link<span onMouseOver="show_entry(2);" OnMouseOut="show_entry(2);">&nbsp;Info</span><br />
<span id="2" style="display:none">Zusatzinfo 2</span>
Dritter Link<span onMouseOver="show_entry(3);" OnMouseOut="show_entry(3);">&nbsp;Info</span><br />
<span id="3" style="display:none">Zusatzinfo 3</span>
 
Zuletzt bearbeitet:
Adagio schrieb:
Das kann man ganz einfach mit PHP und CSS realisieren - hast du PHP zur Verfügung, bzw. einige Vorkenntnisse?

Was hat den PHP mit Clientseitigen Requests zu tun?
Das ganze kann man per Javascript lösen ohne dazu einen Seitenreload zu erzwingen oder einen XMLRequest anzufordern. Es sei den, man möchte die Zusatzinfos aus einer DB z. B. auslesen.
 
Was hat den PHP mit Clientseitigen Requests zu tun?
Er hat nicht geschrieben, dass es NICHT über ein erneutes laden ermöglichen will. Er schreibt nur "nach einem Klick". :p

JS ist eine blöde Idee - mach ich es aus, geht es nicht mehr.
 
@ excalibur1976

Hey vielen Dank, das kommt der Sache schon näher. Nur hätte ich gerne, dass die Zusatzinformationen erst nach einem Klick auf den Link, nicht schon beim darüberfahren auftauchen. Der Besucher soll die Möglichkeit haben, den Text der Zusatzinfos zu markieren, um ihn per C&P weiterzuverwenden.

Vielen Dank für die Hilfe.

Edit:
Hm ob JS oder PHP ist eigentlich egal...
 
Dann nutze anstatt onMouseOver onClick...

@Adagio

Da haste recht. Wer (sollte es dann zutreffen) eine moderne Webseite mit "neuen" Technologien besucht, der ist auf Javascript angewiesen.

Ajax in zusammenspiel mit z. B. PHP/MySQL/Javascript ist halt ein gern gesehenes Feature.

Webmailer a la RoundCube (IMAP Webmail Client) oder große Portale wie google, xing, promotionbasis.de etc. setzen auf diese Technologien.

Dort ist Javascript Pflicht.

Du als Webentwickler müsstest doch sowas zumindest berücksichtigen (bitte nicht als Angriff verstehen. Will nur Deine Sichtweise kennenlernen :-), quasi von Developer zu Developer :-) )
 
Zuletzt bearbeitet:
Na, wenn es in PHP gemacht werden soll und Du dort schon erfahrungen hast, dann ist es doch leicht umgesetzt.

Simple PHP if else bedingungen mit einem Print an der entsprechenden Stelle,
Aber warum muss erst die Seite neu geladen werden nur um eine Linkinfo zu bekommen? ;-)
 
Du als Webentwickler müsstest doch sowas zumindest berücksichtigen
Nur weil etwas "überall eingesetzt" wird, heißt das nicht, dass ich es ebenso machen muss. ;-)

In aktuellen Projekten nutze ich teilweise auch AJAX, allerdings auch immer so, dass die komplette Nutzbarkeit einer Website auch ohne JS erhalten bleibt. Alles andere ist in meinen Augen schlecht programmiert :D
 
excalibur1976 schrieb:
Dann nutze anstatt onMouseOver onClick...

Ah Danke, so funktionierts.
Ein Letztes noch: Wenn man mit der Maus über den Link fährt, hat man einen Cursor als Mauszeiger. Wie bekomme ich da eine "Hand" wie bei einem Hyperlink hin?

Gruß
Patrick
 
Adagio schrieb:
Sowas gehört in ein externes CSS [...]
Der Meinung bin ich eigentlich auch, aber es ist für einen Einsteiger wahrscheinlich verständlicher auf diesem Weg.

Ich hatte tatsächlich schon angefangen, von *.css Datei erstellen und per <link /> einbinden zu quasseln, aber dann dachte ich mir: Das wird zu konfus. Dann lieber erst einmal direkt im HTML-Code. :)

Falls es noch interessiert, hier der Tipp mit dem externen Stylesheet:

1. Eine CSS-Datei (z.B. style.css) mit folgendem Inhalt erstellen und (am besten) im gleichen Ordner speichern, wo die HTML-Dateien liegen:
Code:
.infobutton {
  cursor: pointer;
}
2. Im <head>-Element der HTML-Datei folgenden Verweis einfügen:
Code:
<link rel="stylesheet" type="text/css" href="style.css" />
3. Jedem Info-Button die definierte Klasse zuweisen:
Code:
<span onclick="blabla()" class="infobutton">Info anzeigen</span>

Nun sollte es auch so funktionieren und man kann jederzeit an einer zentralen Stelle (nämlich in der CSS-Datei) Veränderungen vornehmen, wenn sich etwa das Aussehen des Links ändern soll o.ä.
 
^^Danke, habe das jetzt in die externe CSS Datei geschrieben. War sowieso vorhanden...

Mir ist jetzt aber nochwas aufgefallen: Gibt es die Möglichkeit, dass sich die Zusatzinfo wieder ausblendet, sobald man auf einen anderen Link klick? Also das höchstens eine Zusatzinfo zu selben Zeit sichtbar sein kann.

Gruß
Patrick
 
onMouseOut wäre ne möglichkeit dazu
 
Zurück
Oben