|
|||
Css Menu
Hallo, also folgendes Problem:
Ich habe via Css ein Menü programmiert, dieses lässt sich via klick auf einen Überpunkt aus und wieder einfahren wodurch weitere Unterpunkte angezeigt werden. Jedoch möchte ich erreichen, dass jeweils immer nur ein Überpunkt ausgefahren werden kann, und vorher angeklickte Punkte wieder einfahren. Momentan ist es so, dass sich einfach beide Punkte ausklappen. Gibt es da eine Möglichkeit ? Vielleicht via Javascript ? Zur Verdeutlichung hier ein Bild des Menüs in gekürtzter Version: http://img683.imageshack.us/img683/2650/menuew.jpg Weiter geht es mit der index.html Datei: HTML-Code:
<div class="menue"> <div style="float: left"id="my_menu" class="sdmenu"> <div> <span id="black">Aktuelles</span> <a href="http://tools.dynamicdrive.com/imageoptimizer/">Aktuelles</a> <a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a> <a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a> <a href="http://tools.dynamicdrive.com/password/">htaccess Password</a> <a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a> <a href="http://tools.dynamicdrive.com/button/">Button Maker</a> </div> <div class="collapsed"> <span id="black">Stationäre Pflege</span> <a href="http://www.dynamicdrive.com/recommendit/">Das Altenheim</a> <a href="http://www.dynamicdrive.com/link.htm">Finanzierungsbeispiele</a> <a href="http://www.dynamicdrive.com/resources/">Pflegesätze</a> <a href="http://www.dynamicdrive.com/resources/">Bilder</a> </div> </div> Dazu nun die folgende Css: HTML-Code:
div.sdmenu { width: 220px; font-family: Myriad; font-size: 16px; padding-bottom: 0px; color: black; height:600px; } #black {color:white;} div.sdmenu div { background:#adb3b7; overflow: hidden; } div.sdmenu div:first-child { background:#adb3b7; } div.sdmenu div.collapsed { height: 25px; width:220px; } div.sdmenu div span { display: block; padding: 7px 12px; font-weight: bold; color: white; cursor: default; } div.sdmenu div.collapsed span { } div.sdmenu div a { padding: 5px 30px; background:#FF9; display: block; border-bottom: 0px solid #ddd; color: black; text-decoration:none; border-bottom: 1px solid white; } div.sdmenu div a.current { background : #adb3b7; } div.sdmenu div a:hover { background:grey; color: black; text-decoration: none; } mfg Chacky |
Sponsored Links |
Sponsored Links |
|
|||
Das ist zwar schonmal ein Anfang, aber leider nicht genau das was ich suche.
Leider ist mir aufgefallen, dass ich die zugehörige Javascript datei nich mit gepostet habe, hoffe das passt trozdem noch in den Thread. Im Anhang findet ihr das gesamte Menü als Zip gepackt. Also nochmal zu den Funktionen, es sollte sich erst bei einem klick auf den Oberpunkt ausklappen und nicht wie im Beispiel über mir mit einem hover Effekt. Mit freundlichen Grüßen Chacky |
|
|||
AAh ich hab es hinbekommen, es benötigte nur eine kleine Einstellung =)
Code:
myMenu.oneSmOnly = false; |
|
|||
Du kannst auch anderen Elementen wie z.B. li einen hovereffekt mitgeben, nur ältere IE's verstehen das nicht.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Kindelement eines ausgeblendeten Elternelementes ansprechen | wandler | CSS | 7 | 19.06.2010 02:32 |
Horizontales menü Nach unten aufklappbar | franjob | CSS | 3 | 24.06.2009 14:51 |
Css Tree Fly Menu | thiagojonas | CSS | 7 | 30.12.2008 21:10 |
Problem mit vertikaler Navigation | Krissie | CSS | 0 | 15.08.2007 13:51 |