• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

komplizierte css Menü erstellen

milad_

Neues Mitglied
Hallo,
Ich versuche eine css Dropdown Menu zu erstellen der gleichzeitig Menüs horizontal und vertikal öffnet. Ganz am Anfang des Menüs sollen Bilder (keine texte) mit einen rollover Effekt platziert sein.
Also wenn man z.B mit dem maus über Home(Bild) fährt soll es 1. Seinen Bild ändern, 2.einen Dropdown Menü öffnen mit normalen texten (wie z.B: Home 1 , Home 2 …) dann soll es noch möglich seine in diesen Menü weitere zu öffnen also: mit dem maus über home1 -> waagerechte neue Menü mit home 1.1 , home1.2… öffnen
Da ich nicht so gut in erklären bin habe ich noch einen Bild der alles besser erklärt:
hilfe.gif
Ich bin da ganz ahnungslos und habe keinen Plan wie dass machen soll und bitte euch deswegen mir zu helfen
 
Also auf was richtig kompliziertes hab ich jetz keinen Nerv, aber ich habe mal einen "Ansatz" programmiert, der dir weiterhelfen könnte. Bin zwar ein JavaScript-Noob, aber ich habe halt getan was ich konnte. Den Rest kannst du dir ja selbst erarbeiten.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

         <head>

                 <title>Menu-Test</title>

                 <style type="text/css">

                 * { margin:0px; padding:0px; font-size:12px; line-height:15px; font-family:Arial, Sans-Serif, Tahoma; }

                 ol.menu { padding:5px; list-style:none; }
                 ol.menu li { display:inline-block; width:120px; padding:5px; border:1px solid black; background-color:#DDDDDD; color:black; margin-bottom:2px; }
                 ol.menu li:hover { background-color:#AAAAAA; color:black; }

                 ol.submenu { padding:5px; list-style:none; }
                 ol.submenu li { display:block; width:120px; padding:5px; border:1px solid black; background-color:#DDDDDD; color:black; margin-bottom:2px; }
                 ol.submenu li:hover { background-color:#AAAAAA; color:black; }

                 div#cat1 { position:relative; top:0px; left:0px; width:130px; display:none; }
                 div#cat2 { position:relative; top:0px; left:135px; width:130px; display:none; }

                 div#menu { margin-left:200px; }

                 </style>

                 <script type="text/javascript" language="JavaScript">
                 <!--
                 function ShowCat(id)
                 {
                         CatID = "cat" + id;
                         document.getElementById(CatID).style.display = "block";
                 }
                 function HideCats()
                 {
                         for (var i = 1; i < 3; i = i+1)
                         {
                          CatID = "cat" + i;
                          document.getElementById(CatID).style.display = "none";
                         }
                 }
                 -->
                 </script>

         </head>

         <body>

                 <div id="menu">

                 <ol class="menu">
                         <li onMouseover="JavaScript:HideCats();ShowCat(1);">Cat. 1</li>
                         <li onMouseover="JavaScript:HideCats();ShowCat(2);">Cat. 2</li>
                 </ol>

                 <div id="cat1">
                 <ol class="submenu">
                         <li>Sub. 1</li>
                         <li>Sub. 2</li>
                         <li>Sub. 3</li>
                 </ol>
                 </div>

                 <div id="cat2">
                 <ol class="submenu">
                         <li>Sub. 1</li>
                         <li>Sub. 2</li>
                         <li>Sub. 3</li>
                 </ol>
                 </div>

                 </div>

         </body>

</html>

Das ganze weist im IE nochn paar Fehler auf, aber das kannste ja fixen wie du lustig bist.
 
JavaScript ist nicht dazu geeignet ein Menü zu erstellen, weil die Seite dann bei deaktiviertem JavaScript nicht mehr bedienbar ist. Ein Menü muss auch immer ohne JavaScript vollständig funktionieren.
 
JavaScript ist nicht dazu geeignet ein Menü zu erstellen, weil die Seite dann bei deaktiviertem JavaScript nicht mehr bedienbar ist. Ein Menü muss auch immer ohne JavaScript vollständig funktionieren.

Ich habe bislang eigentlich niemanden kennengelernt, der JavaScript bewusst ausschaltet. Dass einige Leute ein NoScript-Addon haben mag ja sein, trotzdem werden das nicht so übermäßig viele sein.
 
Ich habe bislang eigentlich niemanden kennengelernt, der JavaScript bewusst ausschaltet. Dass einige Leute ein NoScript-Addon haben mag ja sein, trotzdem werden das nicht so übermäßig viele sein.
Ob bewusst oder unbewusst, ob freiwillig oder nicht spielt keine Rolle. Ein Menü muss auch ohne JavaScript funktionieren, denn Besucher ohne JavaScript werden die Seite sonst nicht bedienen können. Und da die Seite ja in den meisten Fällen für die Besucher ist, muss sie auch ohne JavaScript bedienbar sein.
 
Quelltext der Seite durchsuchen und selbst zusammenbasteln.
Ein bisschen Eigenarbeit muss schon dabei sein, ansonsten: -> Jobbörse
Eins verstehe ich nicht, es ist zwar sehr nett dass du mir hilfst und so weiter aber so wie du drauf bist kann kein Gesellschaft gebrauchen. Ohne Scheis! Arbeite mal an deine Einstellung... Ich meine ja nur es können auch Menschen geben die sowas nicht wissen aber trotzdem viel mehr erreichen als du und es sogar schon erreicht haben... ist ja auch egal...
Ob bewusst oder unbewusst, ob freiwillig oder nicht spielt keine Rolle. Ein Menü muss auch ohne JavaScript funktionieren, denn Besucher ohne JavaScript werden die Seite sonst nicht bedienen können. Und da die Seite ja in den meisten Fällen für die Besucher ist, muss sie auch ohne JavaScript bedienbar sein.
Du hast total recht danke für deinen hinweis.
Muhhhhh!

Das nutze ich zur Zeit für eine nicht öffentliche Seite. In den Aktuellen Windows-Browsern funktioniert es. Wenn man von der Farbdarstellung im IE-mal absieht.

Noch besser wäre es, wenn man das schnelle erscheinen und verschwinden mittels Java-Script verlangsamt. Aber das ist eine andere Baustelle.
Danke dir ich werde es so wie es [FONT=&quot]NetzSchleiche nett sagen wollte, aber es nicht geschafft hat machen und erstmal mir die quelltexte ansehen[/FONT]
 
Eins verstehe ich nicht, es ist zwar sehr nett dass du mir hilfst und so weiter aber so wie du drauf bist kann kein Gesellschaft gebrauchen. Ohne Scheis! Arbeite mal an deine Einstellung... Ich meine ja nur es können auch Menschen geben die sowas nicht wissen aber trotzdem viel mehr erreichen als du und es sogar schon erreicht haben... ist ja auch egal...

Fassen wir mal zusammen:

- Du stellst in deinem Ausgangspost im Grunde einen Auftrag, ohne auch nur das kleinste Bisschen Code selbst zu liefern.
- NetzSchleicher investiert seine Zeit und schreibt dir ein ausführliches Beispiel.
- Du gehst nicht mit einer Silbe auf diese Arbeit ein, sondern versuchst Quellcode aus dem nächsten Poster rauszuleiern.
- Dann wirst du darauf hingewiesen, dass du selbst ein "bisschen Eigenarbeit" leisten musst oder alternativ einen Eintrag in der Jobbörse erstellen kannst.
- Das hast du unter anderem mit der oben angeführten Aussage und persönlichen Beleidigungen quittiert.

Mit diesem dreisten Auftreten wirst du dein Glück nicht finden.

Eine kürzliche Diskussion zu in etwa diesem Thema kannst du gerne hier nachlesen: http://www.html.de/feedback/32237-antworten-auf-fragen.html
 
Zurück
Oben