Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Switch Menu anpassen
| geschrieben von Thana am 03.02.2006 - 13:27 |
| Hallo! Ich suche jemanden der mir hilfestellung beim Foldout Menü geben kann! Ich habe versucht das Menü auf schon bestehende Links die mit mouseover die farbe wechseln anzupassen aber leider gelingt mir das nicht! das Foldout wird immer darunter angezeigt oder wenn ich am Code zu heftig herumgefummelt habe gar nicht mehr! Nun was ich will ist das wenn ich auf einen der Links klicke sich das Menü darunter ausklappt aber leider ist mit das bis jetzt nicht gelungen! Da ich auch mehr der probieren geht über studieren Typ bin scheine ich an diesem Problem aber zu scheitern! Hoffe darauf das mir jemand helfen kann! Die Datei wird angehängt damit man auch sieht worin das problem besteht! gruß Thana |
| geschrieben von weisnix am 03.02.2006 - 22:19 |
| Hallo, nur so mal zu Klarstellung: Ich habe deinen Beitrag hinsichtlich der Menüanfrage geändert. Des handelt sich nicht um das Foldout Menue sondern um das Switch Menu. So wie du das aufgebaut hast kann das auch nicht klappen. Du solltest schon die Originalstruktur des Menüs beibehalten. Dort kann man dann den Mauseeffekt einbauen und zwar mit css. Gruß |
| geschrieben von Thana am 03.02.2006 - 23:18 |
| Ohje da weiß ich gar nicht wie das funktioniert! Naja egal dann hab ich wohl Pech gehabt! Und dann werd ich es wohl sein lassen! Trotzdem danke für die Erklärung! gruß Thana |
| geschrieben von weisnix am 03.02.2006 - 23:47 |
| Kein Mensch hat was von sein lassen gesprochen. Du baust dein Menü mit dem Original auf. Sprich Link rein und so. Danach sehen wir weite. |
| geschrieben von Thana am 04.02.2006 - 02:44 |
| Hallo weisnix Ich habe jetzt mal aus Deiner Vorlage mir ein neues Menü zusammengebastelt! Ich hoffe ich habe dabei alles richtig gemacht! Das einzige Problem was halt nach wie vor besteht ist das ich nicht weiß wie ich Menü2 so hinbekomme das es optisch genauso aussieht wie Menü1! Habe wieder beide Dateien angehängt! Hoffentlich weißt Du eine Lösung! gruß Thana |
| geschrieben von weisnix am 04.02.2006 - 11:13 |
| Ich hab ja kein blassen Schimmer in wie weit deine Kenntnisse im Seitenaufbau sind. Klar ist auf alle Fälle, dass da vor den Topmenü ein Sonderzeichen steht >>. Dieses wird ganz einfach wie in m1 (Menü1) <b>» </b> eingefügt. Und zwar vor dem Menütext gefolgt mit einen Leerzeichen. Leerzeichen zwischen dem b-Tag, auf alle Fälle nicht zwischen dem nachfolgendem a-Tag. (Probleme beim Formatieren) Möchtest du mehr Zwischenraum, verwendest du ein absolutes Leerzeichen mehrfach. ( ) Den Text „Menü 1“ wird jetzt zwischen den schon erwähnten a-Tag gesetzt. Hierbei verwendest du nur eine Platzhalter. (kann dann später auch als Verweis verwendet werden) Das Ganze sieht jetzt so aus: <b>» </b><a href="#">Menü 1</a> Bei mir sogar so: <b>» </b><a href="#">Menü 1</a> Wenn du das in menü2.html geändert hast, wird dir schon etwas auffallen. Die Veränderung bewirkt das 2. <style type="text/css"> ….. das du schon eingesetzt hast. Daran werden wir dann Arbeiten, wenn du die Verweise dem entsprechend geändert hast. Bist dann.. so noch am Rande: nicht menü.html sondern menu.html - kein ü verwenden! |
| geschrieben von weisnix am 04.02.2006 - 12:58 |
| Teil 2: Wir widmen uns jetzt dem STYLE, und zwar von dem, dass zum Menü gehört. (vorlage.html) Es geht um .menutitle – das Betrifft dann immer den Tag in dem das class=menutitle drin steht. <DIV class=menutitle onclick="SwitchMenu('sub1')"> <DIV class=menutitle onclick="SwitchMenu('sub1')"> Mauszeiger CURSOR: pointer; kann bleiben Abstand zwischen den Menüs soll ja Null sein also von margin-bottom: 5px; auf margin: -1px 0px 0px 0px; da sind die Werte einzeln – p1 = oben p2 = rechts p3 = unten p4= links minus ein ist für den Rahmen- somit erscheint er nicht doppelt. dann den Hintergrund auf weiß von background-color:#ECECFF; auf background-color:#FFFFFF; Textfarbe: COLOR: #000000; bleibt – gilt hier nur für die Sonderzeichen (normal Text) für die Bereite von width: 160px; auf width: 100%; nächster Schritt Innenabstand festlegen von padding: 2px; auf padding: 4px 0px 4px 0px; da sind die Werte einzeln – p1 = oben p2 = rechts p3 = unten p4= links Ergebnis: Textabstand von oben und unten 4 pix wir setzen den Text nach rechts: von text-align: center; auf text-align: left; font-weight:bold; kann entfernt werden – ist im Menüaufbau mit <b> drin border:1px solid #000000; für den Rahmen zusätzlich noch die Schriftart und die Schriftgröße mit rein. Die bezieht sich nur auf den Text, der nicht zwischen den Verweisen steht. font-family:Verdana,Arial; font-size:8pt; jetzt sollten die Topmenüs gleich aussehen. Sollte es nicht klappen, na dann ....... http://www.javarea.de/forum/images/icon/icon1.gif |
| geschrieben von Thana am 04.02.2006 - 19:34 |
| Hallo weisnix! Es hat alles wunderbar geklappt! Vielen Dank für die sehr verständliche Beschreibung! Die beiden Menüs sehen sich jetzt genau gleich! Gibt es jetzt noch eine möglichkeit den mouseover-effekt auch hinzubekommen? gruß Thana |
| geschrieben von weisnix am 04.02.2006 - 21:22 | ||||||||
| Na klar! Als aller erstes schmeißt du das 2. style raus. Den Bereich markieren und ausschneiden, danach in eine neue leere Seite einfügen. Verwenden kannst du nur body,p - .tabtex - .menu und .head gibt es hier nicht. Löschen
Das für den Body und Absatz kannst du in das jetzt übriggebliebene Style einfügen. Setze es oben hinzu. Nun für das hovern. Beachte die Reihenfolge, zu erst a dann a:hover danach a:aktiv Für a wird jetzt der Standart der Verweise (Linktext) festgelegt. a { color:#000000; font-family:Verdana,Arial; font-size:8pt; text-decoration:none; line-height:12pt; } Für den hover und aktiv Link brach es nur der Farbwechsel, wenn sonst Alles gleich bleibt. a:hover { color:Red; } a:aktive { color:Red; } Jetzt brachst du nur noch ein css mit verändertem Hintergrund. Die habe ich .menutitlehover benannt. Ist aber schnuppe wie der Name lautet, ist halt die identische zu den div´s. .menutitlehover { cursor: pointer; margin: -1px 0px 0px 0px; background-color:#ACB8D2; color:#000000; width: 99%; padding: 5px 0px 3px 6px; text-align:left; border:1px solid #000000; font-family:Verdana,Arial; font-size:8pt } Das war es für den Style. Ab zum Menü und Script. Den div´s müssen wir eine id verpassen, und natürlich die Mausbewegung. Sieht folgendermaßen aus: <DIV id="top1" class=menutitle onclick="SwitchMenu('sub1')" onmouseover="wechsel(this.id)" onmouseout="wechsel(this.id)"> Das gilt jetzt für alle Topmenüs die id wird durchnummeriert – id=“top2“ usw. onmouseover und onmouseout bleiben gleich. Dort wird in der Funktion wechsel mit this.id diese übergeben. Die Script Erweiterung: Innerhalb des Scriptes ( zwischen dem script-tag) fügst du die neue Funktion ein. Am bessten unten einsetzen.
Da wird beim Überfahren mit der Maus jetzt über die Funktion welchsel () abgefragt welches Style das div haben soll. Das Element mit der id ... wird gefragt ob es den css-Namen menutitle trägt, wenn ja dann ändern in menutitlehover, wenn nicht dann so lassen wie es ist. So das war es. Dann bekommst du die Subnenüs bestimmt alleine hin.  |
| geschrieben von Thana am 05.02.2006 - 03:23 |
| Hallo weisnix! Vieeelen Dank für Diese super Erklärung! Zuerst hab ich mich ja gar nicht rangetraut aber nach 2-3 Minuten war dann auch schon so gut wie alles geschehen! Jetzt ist alles drin und ich bin wunschlos glücklich was dieses Projekt betrifft! Toll das ich hier so schnelle Hilfe erhalten habe das macht das ganze herumwerkeln an der eigenen Homepage viel einfacher!  gruß Thana |
| geschrieben von Thana am 07.02.2006 - 02:26 |
| Hallo an alle! Sorry das ich hier noch mal doppelposte aber ich habe noch ein kleiner Problem mit dem Switch-Menü! Und zwar handelt sich um ein Darstellungsproblem bei Firefox! Die einzelnen Menüs werden zwar korrekt dargestellt aber komischerweise ist wischen zwei Menü-Punkten ein doppelter Rahmen zu sehen und das Menü wird nicht mittig angezeigt! Das passiert aber wie gesagt nur beim Firefox! Bei Opera und IE wird alles korrekt angezeigt! Ich hoffe das mir jemand beim dem Problem helfen kann weil ich weiß mir darauf keinen Reim zu machen!  gruß Thana |
| geschrieben von René am 07.02.2006 - 08:47 |
| Hier sieht es im FF genau so aus wie im IE. |
| geschrieben von weisnix am 07.02.2006 - 12:25 |
| Bei mir kommt da im FF auch das selbe Ergebnis raus. So ein paar Tipps: Du musst nicht alles doppelt deklarieren. Die Links werden ab a schon mit der Textfarbe versehen. Sollte die anders sein dort #800000 eintragen, da muss nicht noch mal eine class(Stil2) definiert werden. Auch um Himmelswillen nicht noch ein <div align="center"> einbauen. Das ist völlig unnötig und bläht den Quelltext nur auf. Da in dem span die class=submenu dirn ist, lässt sich dort alles formatieren. Zu dem hast du noch das Script drin, das nicht mehr gebraucht wird. Einfach mal vergleichen!? |
| geschrieben von Thana am 08.02.2006 - 16:39 |
| Hallo! Danke für die Hinweise! Ich habe ein paar Leuten aus meinem Bekanntenkreis das selbe gezeigt und die Antwort war die gleiche! Nämlich das alles korrekt dargestellt wird! Aber selbst nachdem ich alles laut anleitung von weisnix überflüssige entfernt hatte wurde es bei mir nicht einwandfrei angezeigt! Aber solang das nur bei mir ein Problem ist stört mich das weniger! Ich werde mir dann höchstens mal die neueste Version von Firefox besorgen! Dankeschön für die Hilfe! gruß Thana |
| geschrieben von Thana am 28.02.2006 - 08:37 |
| Hallo nochmal! Bei mir hat sich jetzt noch ein kleines Problemchen ergeben! Gibt es eigentlich die möglichkeit bei dem Switch-Menü noch ein zweites submenü einzubauen? Soll also heißen das wenn sich das erste submenü öffnet man nochmal die auswahl zwischen ein paar submenüs hat? Ich habe da auch schon selber mal etwas rumprobiert aber bis jetzt kam immer nur schund dabei raus und ich habe jetzt die Vermutung das sich das ohne große änderungen nicht bewerkstelligen lässt! Ich hoffe ihr könnt mir trotzdem helfen! gruß Thana |