[S]Einfaches Drop Down Script

[eXaByte0815]

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:

^^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:

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

 

[Prypjat]

Schau Dir mal dieses JavaScript Framework an: MooTools.

Das könnte für Deinen Zweck zwar fast etwas überskaliert sein, aber dort gibt es einen entsprechenen Effekt zum Ein- und Ausrollen von Elementen (schau mal bei den Demos nach).

 

[eXaByte0815]

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

 

[Adagio]

Das kann man ganz einfach mit PHP und CSS realisieren - hast du PHP zur Verfügung, bzw. einige Vorkenntnisse?

 

[BuzzGo]

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.

<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>

 

[BuzzGo]

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.

 

[Adagio]

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".

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

 

[eXaByte0815]

@ 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...

 

[BuzzGo]

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 :-) )

 

[BuzzGo]

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? ;-)

 

[Adagio]

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

 

[eXaByte0815]

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]

cursor: pointer; ?

 

[eXaByte0815]

cursor: pointer; ?

Und wohin damit?
Bitte hab Gedult mit einem Anfänger...

 

[Prypjat]

Du könntest es ganz einfach in das style-Attribut des Link-Elements setzen:

<span onclick="blabla()" style="cursor: pointer;">Info anzeigen</span>

 

[eXaByte0815]

Du könntest es ganz einfach in das style-Attribut des Link-Elements setzen:

Danke, funktioniert Prima...!

 

[Adagio]

Sowas gehört in ein externes CSS und es heißt "Geduld"

 

[Prypjat]

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:

.infobutton {
  cursor: pointer;
}

2. Im <head>-Element der HTML-Datei folgenden Verweis einfügen:

<link rel="stylesheet" type="text/css" href="style.css" />

3. Jedem Info-Button die definierte Klasse zuweisen:

<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.ä.

 

[eXaByte0815]

^^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

 

[HighTec]

onMouseOut wäre ne möglichkeit dazu