[HTML] bewegte Menüleiste erstellen

[latita]

Hi, ich habe schon die SuFu versucht zu nutzen, aber vielleicht scheiterte es daran, dass ich keine so richtige Bezeichnung finden kann.
Ich möchte auf meiner Website die Menüleiste/Navigationsleiste dahingehend verändern, dass, wenn man z.B. auf "Interessantes" klickt, die Leiste "aufbricht" und ein ...
Ach ich kann das nicht erklären. Guckt euch am besten mal die Bilder an.
Das erste zeigt, wie es Vorher aussehen würde, und wie ich es nachher gern hätte.

Mit welcher Sprache schreibt man das? Und ich hab bis jetzt alle meine Seiten im Editor geschrieben... Der AvD.de hat so eine Menüleiste, wie ich sie gern hätte, aber aus dem Quelltext werde ich nicht schlau... Vielleicht, weil die Microsoft FrontPage zum erstellen genutzt haben.

Ein anderer User hier hatte ein ähnliches und doch anderes ^^ Problem. Seine Lösung bestand nachher darin, ohne Frames zu arbeiten und alles über Tabellen zu realisieren. Auf dem Bild "nachher" kann man ja erkennen, dass das aufgeklappte über den Main-Frame lappen würde. Ist eine Lösung ohne Frames eine kluge Wahl?

Noch mal zu meinem Problem, ich hatte es anfangs so versucht, dass, wenn ich auf den Link klicke, sich nicht nur die Frames "main" und "oben" verändern, sondern auch der Frame "navi" ... aber irgendwie klappt das nicht. ist es, weil von dort aus der "befehl" kam?

 

[mh1001]

Hallo,

dies lässt sich zum Beispiel mit Javascript leicht realisieren.
Dazu kannst du zum Beispiel für jedes Submenü - ich nenne es jetzt einfach mal so - einen entsprechenden Container erstellen und diesen dann mit "style="visibility: none"; ausblenden.
Danach brauchst du nurnoch für jeden Menüeintrag einen onclick-Event erstellen und mit Hilfe dieses über JavaScript und "document.getElementById(xyz).style.display == 'block'" den entsprechenden Container einblenden und mit "document.getElementById(xyz).style.display == 'none'" die anderen Container ausblenden.
Um die Navigation auch für "Nicht-JavaScript-User" zu ermöglichen kannst du dann schließlich auch noch als normales Linkziel die aktuelle Seite mit einem entsprechenden GET-Parameter übergeben und mit Hilfe dieses dann zum Beispiel mit PHP den entsprechenden Containercode umformen um diesen einzublenden.

MfGmh1001

//Edit: Jetzt sehe ich ja auch noch, dass das Problem mit den Frames hinzukommt. Eine anständige realisieren so ist wohl kaum denkbar. Aus deisem Grund würde ich dir in diesem Fall dringend abraten, auf Frames zu setzen und diese gegen ein ordentliches CSS-Layout ersetzen.

 

[latita]

okay
das war jetzt etwas viel fachchinesisch. Ich steh noch ganz am Anfang meiner Kenntnisse

gibt es da irgendwo ein How-To zu? wo von A-Z alles erklärt ist?

 

[mh1001]

Ein passendes How-To hab ich leider gerade nicht zur Hand.
Jedoch ging es in diesem Thread schon einmal darum per Link-Klick einen Text ein bzw. aus zu blenden: *klick*
Wobei hierbei das "onMouseover="zeige_text('xyz');" onMouseout="zeige_text('xyz');"" gegen ein "onClick="zeige_text('xyz');" ersetzt werden müsste.

Auf Wunsch kann ich dir den Code dazu auch etwas auf deine Bedürfnisse anpassen.

MfG mh1001

 

[latita]

aah, na das ist doch schon ein schöner Anfang *freu*

was muss man machen, wenn ich möchte, dass das heruntergeklappte unten bleibt? auch wenn man die maus wegnimmt?
ich zeig dir mal, wie mein Navi-code jetzt aussieht.
Den Link "interessantes" gibt es noch nicht, würde aber in ähnlicher weise, wie die anderen hinzugefügt werden.
Als Unterrubrik könnte dann z.B. "Computerseiten" stehen. So genau weiß ich das noch nicht, weil mich die Frage der Umsetzung erst mal aufhält ^^

 

[mh1001]

Ich habe nun einmal die ersten drei Menüpunkte als Beispiel um ein solches "Submenü" erweitert.
Die Container müssen natürlich noch in gewünschte Form und Stelle gebracht werden.
Statt des Beispiel-Textes kannst du in diese jeden beliebigen Code einfügen.

MfG mh1001

 

[latita]

danke schön für deine Hilfe

der aha-effekt ist zwar noch nicht da, aber ich steh kurz davor:
deswegen noch ein paar fragen dazu:
1. wie würde ich das nach vorne kriegen und kann man das auch mit css positionieren?
2. wie kriegt man das hin, dass sich z.b. der dritte rote kasten soweit nach unten bewegt, dass genug für das grad geöffnete ist

und evtl. 3. könntest du mir diese Formeln erklären? Was davon muss man sich einfach merken und wo fängt der veränderbare Teil an?

nennt sich das, was ich machen will SlideMenu? oer MoveUp?
ich schau mir die ganze Zeit den Frame vom AvD an, guck mal bitte

 

[mh1001]

Für Punkt 1 und 2 bedarf es einer kleinen anpassungen. Daran werde ich mich gleich morgen machen und es hier posten und dabei auch gleich mal einen Blick auf den Anhang werfen, vorher muss ich aber nun einmal weg.

Bezüglich der Erklärung:

Das CSS-Attribut "visibility: none;" setzt die Sichtbarkeit des jeweiligen Container aus "unsichtbar". Somit ist der Container im Browser nicht sichtbar.
Der Event-Handler "onclick" wird beim Klick auf den jeweiligen Link ausgeführt und ruft die oben deklarierte Funktion "zeige_text()" auf, wobei er die id des einzublendenden DIV-Containers übergibt.
Zur Funktion:
"getElementById(div)" wählt Anhand des übergebenen Parameters den entsprechenden Container aus. Mit "style.display" wird dann die momentane Anzeigeart ermittelt und je nachdem "none" oder "block" der Variablen "displayType" zugewiesen.
Letztendlich wird dann in der zweiten Zeile wieder das entsprechende Element gewählt und das visibility-Attribut gegen den Inhalt der obigen Variablen ersetzt.

[...] nennt sich das, was ich machen will SlideMenu? oer MoveUp?[...]

Ich würde es einfach als "Klappmenü" betiteln.

MfG mh1001

 

[latita]

Ich kann dir gar nicht genug danken, dass du dir so viel Mühe für mich machst
dann bis morgen ^^

was sagst du eigentlich dazu?
ASP SlideMenu

 

[Benjamin_L]

Du willst keine proprietären MS Technologien verwenden. Dann schon lieber Javascript mit oder ohne PHP.
Wenn du deine Screenshots als .png speicherst, ist die Qualität besser und die Größe wahrscheinlich noch kleiner.

 

[mh1001]

Guten Morgen

Ich habe nun einmal das Menü entsprechend angepasst und die Container an die richtige Stelle geschoben sowie gleichzeitig deine obigen Punkte berücksichtigt.

Bzgl. des ASP SlideMenüs muss ich Benjamin_L Recht geben. Ich würde persönlich ebenfalls auf den Einsatz einer solchen Programmiersprache verzichten.

MfG mh1001

 

[madbros]

wenn ich mich mal einmischen darf:

hab mir mal die von mh1001 erstellte navileiste angesehen. sieht soweit ganz nett aus. der kleine fehler, wenn ich die wünsche des kandidaten richtig verstanden habe:

die menu-unterpunkte bleiben sichtbar, obwohl bereits auf den nächsten menupunkt geklickt wurde. sie verschwinden nur, wenn derselbe menupunkt nochmal angeklickt wird.

leider kann ich jetzt hier auch keine lösung präsentieren, dafür reichen meine javascript-kenntnisse nicht aus. ich habe bei meiner seite auf php gesetzt. damit lässt sich so etwas auch realisieren, wenn auch über den umweg, dass ich für meinen untermenupunkt eine extra seite erstellen musste. habe dann per $get den geklickten punkt übergeben und über include das untermenu an der richtigen stelle eingebunden. über denselben weg, lassen sich auch beliebig viele div-contents des restlichen seiteninhalts verändern. das ergebnis sieht dann prinzipiell SO aus, nur dass ich das untermenu in dieser version der seite an den rechten rand geschoben habe. es lässt sich aber auch an beliebiger stelle des eigentlichen menus einbinden.

 

[mh1001]

@madbros

Stimmt, das habe ich nicht beachtet.
Sollte dies gewünscht sein so kann ich aber gerne noch einmal den Code entsprechend anpassen.

MfG mh1001

 

[latita]

Hi, das sieht ja schon richtig super aus.
Dass das geöffnete Untermenü wieder verschwindet, wenn man auf den nächsten Hauptpunkt klickt, wäre wirklich noch eine Überlegung wert.

@madbros etwas mit php anzustellen hab ich auch schon mal in Erwägung gezogen, nur hab ich noch nichts gefunden, was mir richtig erklärt, wie es geht. Kein gutes Buch oder sowas.
Ich hab zwar eins über html und da sind auch die Grundsachen von javascript, asp und php usw drin, aber wie gesagt, nur kurz angeschnitten. Wie viele Programme muss man dafür installieren? drei? und gibts die auch auf deutsch ^^

Ich werde mich heute nachmittag noch mal ganz genau mit diesen Formeln beschäftigen, vielleicht verstehe ich dann ja wie sie aufgebaut sind damit ich es irgendwann einmal selbst hinbekomme, bin nämlich grad am umziehen

 

[madbros]

für php brauchst du eigentlich nur php-fähigen webspace. gibt's bei verschiedenen anbietern kostenlos. kann dir leider nicht sagen wo, da ich mit meinem (kostenpflichtigen) zufrieden bin :-)

zum testen auf deinem rechner geht's am besten mit XAMPP. das ding simuliert im grunde einen webserver auf deinem computer.

für php google mal nach +php +tutorial, da wirst du eine ganze menge finden. ich persönlich habe mir beispieldesigns aus dem netz gezogen, dann nachvollzogen, was da gemacht wurde und dann mit dem frisch gelernten mein eigenes ding aufgezogen. für fragen gibt's ja dieses forum :-)

 

[PuppetMaster]

etwas mit php anzustellen hab ich auch schon mal in Erwägung gezogen, nur hab ich noch nichts gefunden, was mir richtig erklärt, wie es geht. Kein gutes Buch oder sowas.

Dieses Buch hat mir anfänglich sehr geholfen: PHP und MySQL für Kids. (Kein Scherz!) Ist ne echte Empfehlung wert.

 

[Knoblauchsoße]

Funpic bietet PHP und MSQL an, zum Nulltarif.
Das wäre doch das richtige zum testen.

 

[madbros]

funpic ist und bleibt kostenpflichtig. kostenlos ist der spass nur für die ersten drei monate. und danach kostet es 7,90 €, will man php3 und 4 (kein php5) nutzen. da ist strato günstiger.

 

[Knoblauchsoße]

funpic ist und bleibt kostenpflichtig. kostenlos ist der spass nur für die ersten drei monate. und danach kostet es 7,90 €, will man php3 und 4 (kein php5) nutzen. da ist strato günstiger.

au..ok

das hatte ich nicht gewusst.
kann ich aber meinem kostenfreien paket bleiben?

 

[madbros]

also, ich wollte dich nicht persönlich angreifen, aber ich habe bei funpic kein kostenloses paket gefunden. wenn du es findest, poste doch bitte den link, das nehm ich dann auch.


edit: ansonsten gibt's aber eins für 2,45 €/Monat, dass ist tatsächlich günstiger als Strato