|
|||
Problem mit dynamischem CSS Menü
Hallo liebe Forenmitglieder,
leider komm ich mal wieder nicht weiter und muss um eure Hilfe bitten es geht um ein dynamisches CSS-Menü, welches in unseren Online-Shop eingebaut werden soll und "eigentlich" auch schon ist! Nur will der Chef es nun anders haben, und da ich nicht soviel Ahnunng von der Materie habe, beiße ich mir nun die Zähne daran aus und finde auch bei Hr. Google keine Lösung, welche einleuchtend genug erklärt ist, daß ich sie als Laie verstehe Das Menü funktioniert im Moment so, daß man oben über den Menüpunkt "Katalog-Auswahl" fährt damit das restliche Menü aufklappt. Dieser Schritt soll nun weggelassen werden. Es sollen also die fünf Menüpunkte immer zu sehen sein und der "Katalog Auswahl"-Link soll komplett aus dem Menü entfernt werden. Die dritte (--> das nach rechts aufklappende Menü) Ebene soll in der Funktion bestehen bleiben! Wäre sehr nett wenn mir hier jemand auf die Sprünge helfen könnte, hab langsam alles durch und komm einfach nicht mehr weiter. So hier mal die html-datei: HTML-Code:
<html> <head> <link href="file:///C:/Dokumente%20und%20Einstellungen/mre.PRINTINGGROUP/Desktop/navi.css" rel="stylesheet" type="text/css"/> </head> <body> <script type="text/javascript"> if(window.navigator.systemLanguage && !window.navigator.language) { function hoverIE() { var LI = document.getElementById("nav_pc_dmenue").firstChild; do { if (sucheUL(LI.firstChild)) { LI.onmouseover=einblenden; LI.onmouseout=ausblenden; } LI = LI.nextSibling; } while(LI); } function sucheUL(UL) { do { if(UL) UL = UL.nextSibling; if(UL && UL.nodeName == "UL") return UL; } while(UL); return false; } function einblenden() { var UL = sucheUL(this.firstChild); UL.style.display = "block"; UL.style.backgroundColor = "silver"; } function ausblenden() { sucheUL(this.firstChild).style.display = "block"; } window.onload=hoverIE; } </script> <div> <ul id="nav_pc_dmenue"> <li class="level_2"> <a class="kategorie_link" href="ObjectID=4678"> Katalog Auswahl </a> <ul class="sub"> <li class="top new"> <a href="?ObjectID=653495" class="new_child"> Original Tinte/Toner </a> <ul style="width:750px;"> <li class="title"> <a href="?ObjectID=653495">Original Tinte/Toner:</a> </li> <li> <a href="?ObjectID=655189">Brother</a> </li> <li> <a href="?ObjectID=653977">Canon</a> </li> <li> <a href="?ObjectID=654443">Epson</a> </li> <li> <a href="?ObjectID=656437">Fujitsu</a> </li> <li> <a href="?ObjectID=653496">HP</a> </li> <li> <a href="?ObjectID=655433">Konica Minolta</a> </li> <li> <a href="?ObjectID=655742">Kyocera</a> </li> <li> <a href="?ObjectID=654710">Lexmark</a> </li> <li> <a href="?ObjectID=656051">Mita</a> </li> <li> <a href="?ObjectID=656156">NEC</a> </li> <li> <a href="?ObjectID=656658">Oce</a> </li> <li> <a href="?ObjectID=655032">OKI</a> </li> <li> <a href="?ObjectID=655635">Olivetti</a> </li> <li> <a href="?ObjectID=656173">Panasonic</a> </li> <li> <a href="?ObjectID=655397">QMS</a> </li> <li> <a href="?ObjectID=656304">Ricoh</a> </li> <li> <a href="?ObjectID=656479">Samsung</a> </li> <li> <a href="?ObjectID=656232">Sharp</a> </li> <li> <a href="?ObjectID=655541">Tally</a> </li> <li> <a href="?ObjectID=656034">Tektronix</a> </li> <li> <a href="?ObjectID=656674">Telekom</a> </li> <li> <a href="?ObjectID=656378">Toshiba</a> </li> <li> <a href="?ObjectID=656692">Utax</a> </li> <li> <a href="?ObjectID=655913">Xerox</a> </li> </ul> </li> <li class="level_2"> <a href="?ObjectID=656739" class="new_child"> Kompatibel Tinte/Toner </a> <ul style="width:750px;"> <li class="title"> <a href="?ObjectID=656739">Kompatibel Tinte/Toner:</a> </li> <li> <a href="?ObjectID=657351">Farblaserdrucker</a> </li> <li> <a href="?ObjectID=656740">Laserdrucker S/W</a> </li> <li> <a href="?ObjectID=657112">Kopierer + Fax</a> </li> <li> <a href="?ObjectID=657536">Tintenstrahldrucker</a> </li> </ul> </li> <li class="level_2"> <a href="?ObjectID=651674" class="new_child"> Drucker & Co. </a> <ul style="width:750px;"> <li class="title"> <a href="?ObjectID=651674">Drucker & Co.:</a> </li> <li> <a href="?ObjectID=651680">Farblaserdrucker</a> </li> <li> <a href="?ObjectID=651681">Farb-Multifunktion</a> </li> <li> <a href="?ObjectID=651682">S/W-Laserdrucker</a> </li> <li> <a href="?ObjectID=651683">S/W-Multifunktion</a> </li> <li> <a href="?ObjectID=651684">A3-Drucker</a> </li> <li> <a href="?ObjectID=1562316">A3-Tintenstrahl-Drucker</a> </li> <li> <a href="?ObjectID=651685">S/W-Kopierer</a> </li> <li> <a href="?ObjectID=651686">Faxgeräte</a> </li> <li> <a href="?ObjectID=1301912">Tintenstrahldrucker</a> </li> <li> <a href="?ObjectID=4988897">Gel-Drucker</a> </li> <li> <a href="?ObjectID=652399">Optionen/Zubehör</a> </li> <li> <a href="?ObjectID=1792167">USB/Netzwerk-Kabel</a> </li> <li> <a href="?ObjectID=4426464">Überspannungsschutz</a> </li> </ul> </li> <li class="level_2"> <a href="?ObjectID=4990147" class="new_child"> Kabel unter Kontrolle </a> <ul style="width:750px;"> <li class="title"> <a href="?ObjectID=4990147">Kabel unter Kontrolle:</a> </li> <li> <a href="?ObjectID=4990308">LTC Basic / LTC Basic + Label</a> </li> <li> <a href="?ObjectID=5003158">LTC Roll / LTC Roll + Label</a> </li> <li> <a href="?ObjectID=5003353">LTC Flex</a> </li> <li> <a href="?ObjectID=5003707">LTC Mini</a> </li> <li> <a href="?ObjectID=5003720">LTC Wall</a> </li> <li> <a href="?ObjectID=5004136">LTC Original</a> </li> <li> <a href="?ObjectID=5004302">LTC Label</a> </li> <li> <a href="?ObjectID=5003993">LTC Sticker</a> </li> </ul> </li> <li class="level_2"> <a href="?ObjectID=1537549" class="new_child"> Papier & Co. </a> <ul style="width:750px;"> <li class="title"> <a href="?ObjectID=1537549">Papier & Co.:</a> </li> <li> <a href="?ObjectID=1730996">A4 Papier weiß</a> </li> <li> <a href="?ObjectID=1537550">A3 Papier weiß</a> </li> </ul> </li> </ul> </li> </ul> </div> </body> </html> Code:
/* Dynamisches CSS-Menü von PrinterCare */ #nav_pc_dmenue { height: 30px; list-style: none outside none; position: relative; text-align: left; width: 172px; z-index: 500; } #nav_pc_dmenue li a.kategorie_link { background: none repeat scroll 0 0 #FFFFFF; color: #222222; cursor: pointer; display: block; float: left; font-size: 12px; font-weight: bold; height: 27px; line-height: 27px; padding: 0 10px; text-decoration: none; width: 150px; } #nav_pc_dmenue li:hover a.kategorie_link, #nav_pc_dmenue li.hover a.kategorie_link { background: none repeat scroll 0 0 #FFFFFF; position: relative; } #nav_pc_dmenue li a.kategorie_link span { background: url("") no-repeat scroll -995px -339px transparent; display: block; float: left; height: 29px; width: 15px; } #nav_pc_dmenue li:hover a.kategorie_link span, #nav_pc_dmenue li.hover a.kategorie_link span { background: url("") no-repeat scroll -520px -147px transparent; display: block; float: left; height: 29px; width: 15px; } #nav_pc_dmenue li.level_2, #nav_pc_dmenue li.new { background: url("") repeat-x scroll 0 29px #4B4B4B; border-bottom: 1px solid #FFFFFF; display: block; float: left; width: 170px; } #nav_pc_dmenue li.new { background: url("") no-repeat scroll 100% 100% #4B4B4B; } #nav_pc_dmenue li:hover, #nav_pc_dmenue li.hover { position: relative; } #nav_pc_dmenue li:hover ul.sub, #nav_pc_dmenue li.hover ul.sub { background: none repeat scroll 0 0 #424242; border-top: 1px solid #FFFFFF; left: 0; padding: 0; top: 30px; width: 170px; } #nav_pc_dmenue li:hover ul.sub li, #nav_pc_dmenue li.hover ul.sub li { color: #000000; display: block; float: left; font-weight: normal; height: 29px; position: relative; width: 170px; } #nav_pc_dmenue li:hover ul.sub li li, #nav_pc_dmenue li.hover ul.sub li li { border-top: 1px solid #DDDDDD; height: 29px; margin: 0 10px; } #nav_pc_dmenue li ul.sub li li.title { color: #333333; display: block; font-size: 12px; font-weight: bold; height: 42px; margin: 0; width: 100%; } #nav_pc_dmenue li:hover ul.sub li.title, #nav_pc_dmenue li.hover ul.sub li.title { border: 0 none; } #nav_pc_dmenue li:hover ul.sub li a, #nav_pc_dmenue li.hover ul.sub li a { color: #323232; display: block; font-size: 12px; height: 29px; line-height: 29px; overflow: hidden; padding: 0 10px; text-decoration: none; width: 170px; } #nav_pc_dmenue li ul.sub li a.new_child { background: none repeat scroll 0 0 #transparent; border-bottom: 1px solid #ffffff; color: #FFFFFF; font-size: 12px; font-weight: normal; overflow: visible; } #nav_pc_dmenue li:hover ul.sub li a:hover, #nav_pc_dmenue li.hover ul.sub li a.hover { background: none repeat scroll 0 0 #transparent; font-size: 12px; color: #eb6909; text-decoration: underline; z-index: 1; } #nav_pc_dmenue li:hover ul.sub li a.new_child:hover, #nav_pc_dmenue li.hover ul.sub li a.new_child:hover { background: url("file:///C:/Dokumente%20und%20Einstellungen/mre.PRINTINGGROUP/Desktop/arrow_nav_neu.gif") no-repeat scroll 0 0px transparent; color: #ffffff; border-bottom: none; text-decoration: none; width: 185px; z-index: 9999; } #nav_pc_dmenue li:hover li:hover ul, #nav_pc_dmenue li.hover li.hover ul { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #eb6909; left: 170px; padding: 20px; position: absolute; top: -35px; width: 1px; } #nav_pc_dmenue ul, #nav_pc_dmenue li:hover ul ul, #nav_pc_dmenue li.hover ul ul { left: -9999px; list-style: none outside none; margin: 0; padding: 0; position: absolute; top: -9999px; z-index: 1; } #nav_pc_dmenue li:hover ul ul, #nav_pc_dmenue li.hover ul ul { position: relative; } #nav_pc_dmenue li:hover li:hover a.new_child, #nav_pc_dmenue li.hover li.hover a.new_child { background: url("") no-repeat scroll 0 -1px transparent; color: #FFFFFF; position: absolute; width: 150px; z-index: 99999; } |
Sponsored Links |
Sponsored Links |
|
|||
Danke für deine schnelle Antwort,
ja das mit den Selektoren versteh ich im Ansatz und komm auch langsam rein! Den Ansatz, daß die zweite Ebene nun die erste werden soll hab ich mir auch schon durch Logik erarbeitet^^ Vielen Dank für den Denkanstoß! Ich fang mal mit dem Umbau an, wenns nicht klappt wird wohl doch noch was von meinem etat verbraten |
|
|||
weitergekommen :)
So, hab es soweit umgebaut, war eigentlich gar nicht sooo schwer.
Auf jeden Fall danke fürs auf den richtigen Weg bringen Jetzt hab ich nur noch zwei kleinere Probleme, die ich bis jetzt nicht gelöst bekomme und auch nicht ganz durchsteige, woran es liegt! Das wäre zum einen die Tatsache, daß in der ursprünglichen Version, das Bild arrow_nav_neu.gif, das rechte flyout-Menü beim überfahren der einzelnen Links überlappt. Und zum zweiten, wenn ich den aktiven Link in der linken Menüleiste verlasse sich die Schriftfarbe in #333333 ändert??? Vielleicht hat ja jemand schnell Zeit sich das kurz anzuschauen. Vielen Dank schonmal im Vorraus HTML-Code:
<html> <head> <link href="file:///C:/Dokumente%20und%20Einstellungen/mre.PRINTINGGROUP/Desktop/navi.css" rel="stylesheet" type="text/css"/> </head> <body> <script type="text/javascript"> if(window.navigator.systemLanguage && !window.navigator.language) { function hoverIE() { var LI = document.getElementById("nav_pc_dmenue").firstChild; do { if (sucheUL(LI.firstChild)) { LI.onmouseover=einblenden; LI.onmouseout=ausblenden; } LI = LI.nextSibling; } while(LI); } function sucheUL(UL) { do { if(UL) UL = UL.nextSibling; if(UL && UL.nodeName == "UL") return UL; } while(UL); return false; } function einblenden() { var UL = sucheUL(this.firstChild); UL.style.display = "block"; UL.style.backgroundColor = "silver"; } function ausblenden() { sucheUL(this.firstChild).style.display = "block"; } window.onload=hoverIE; } </script> <div> <ul id="nav_pc_dmenue"> <li class="level_2"> <a href="?ObjectID=653495" class="new_child"> Original Tinte/Toner </a> <ul style="width:750px;"> <li class="title"> <a href="?ObjectID=653495">Original Tinte/Toner:</a> </li> <li> <a href="?ObjectID=653977">Canon</a> </li> <li> <a href="?ObjectID=654443">Epson</a> </li> <li> <a href="?ObjectID=656437">Fujitsu</a> </li> <li> <a href="?ObjectID=653496">HP</a> </li> <li> <a href="?ObjectID=655433">Konica Minolta</a> </li> <li> <a href="?ObjectID=655742">Kyocera</a> </li> <li> <a href="?ObjectID=654710">Lexmark</a> </li> <li> <a href="?ObjectID=656051">Mita</a> </li> <li> <a href="?ObjectID=656156">NEC</a> </li> <li> <a href="?ObjectID=656658">Oce</a> </li> <li> <a href="?ObjectID=655032">OKI</a> </li> <li> <a href="?ObjectID=655635">Olivetti</a> </li> <li> <a href="?ObjectID=656173">Panasonic</a> </li> <li> <a href="?ObjectID=655397">QMS</a> </li> <li> <a href="?ObjectID=656304">Ricoh</a> </li> <li> <a href="?ObjectID=656479">Samsung</a> </li> <li> <a href="?ObjectID=656232">Sharp</a> </li> <li> <a href="?ObjectID=655541">Tally</a> </li> <li> <a href="?ObjectID=656034">Tektronix</a> </li> <li> <a href="?ObjectID=656674">Telekom</a> </li> <li> <a href="?ObjectID=656378">Toshiba</a> </li> <li> <a href="?ObjectID=656692">Utax</a> </li> <li> <a href="?ObjectID=655913">Xerox</a> </li> </ul> </li> <li class="level_2"> <a href="?ObjectID=656739" class="new_child"> Kompatibel Tinte/Toner </a> <ul style="width:750px;"> <li class="title"> <a href="?ObjectID=656739">Kompatibel Tinte/Toner:</a> </li> <li> <a href="?ObjectID=657351">Farblaserdrucker</a> </li> <li> <a href="?ObjectID=656740">Laserdrucker S/W</a> </li> <li> <a href="?ObjectID=657112">Kopierer + Fax</a> </li> <li> <a href="?ObjectID=657536">Tintenstrahldrucker</a> </li> </ul> </li> <li class="level_2"> <a href="?ObjectID=651674" class="new_child"> Drucker & Co. </a> <ul style="width:750px;"> <li class="title"> <a href="?ObjectID=651674">Drucker & Co.:</a> </li> <li> <a href="?ObjectID=651680">Farblaserdrucker</a> </li> <li> <a href="?ObjectID=651681">Farb-Multifunktion</a> </li> <li> <a href="?ObjectID=651682">S/W-Laserdrucker</a> </li> <li> <a href="?ObjectID=651683">S/W-Multifunktion</a> </li> <li> <a href="?ObjectID=651684">A3-Drucker</a> </li> <li> <a href="?ObjectID=1562316">A3-Tintenstrahl-Drucker</a> </li> <li> <a href="?ObjectID=651685">S/W-Kopierer</a> </li> <li> <a href="?ObjectID=651686">Faxgeräte</a> </li> <li> <a href="?ObjectID=1301912">Tintenstrahldrucker</a> </li> <li> <a href="?ObjectID=4988897">Gel-Drucker</a> </li> <li> <a href="?ObjectID=652399">Optionen/Zubehör</a> </li> <li> <a href="?ObjectID=1792167">USB/Netzwerk-Kabel</a> </li> <li> <a href="?ObjectID=4426464">Überspannungsschutz</a> </li> </ul> </li> <li class="level_2"> <a href="?ObjectID=4990147" class="new_child"> Kabel unter Kontrolle </a> <ul style="width:750px;"> <li class="title"> <a href="?ObjectID=4990147">Kabel unter Kontrolle:</a> </li> <li> <a href="?ObjectID=4990308">LTC Basic / LTC Basic + Label</a> </li> <li> <a href="?ObjectID=5003158">LTC Roll / LTC Roll + Label</a> </li> <li> <a href="?ObjectID=5003353">LTC Flex</a> </li> <li> <a href="?ObjectID=5003707">LTC Mini</a> </li> <li> <a href="?ObjectID=5003720">LTC Wall</a> </li> <li> <a href="?ObjectID=5004136">LTC Original</a> </li> <li> <a href="?ObjectID=5004302">LTC Label</a> </li> <li> <a href="?ObjectID=5003993">LTC Sticker</a> </li> </ul> </li> <li class="level_2"> <a href="?ObjectID=1537549" class="new_child"> Papier & Co. </a> <ul style="width:750px;"> <li class="title"> <a href="?ObjectID=1537549">Papier & Co.:</a> </li> <li> <a href="?ObjectID=1730996">A4 Papier weiß</a> </li> <li> <a href="?ObjectID=1537550">A3 Papier weiß</a> </li> </ul> </li> </li> </ul> </div> </body> </html> Code:
/* Dynamisches CSS-Menü von PrinterCare */ #nav_pc_dmenue { height: 30px; list-style: none outside none; position: relative; text-align: left; width: 172px; z-index: 500; } #nav_pc_dmenue li a.kategorie_link { background: none repeat scroll 0 0 #FFFFFF; color: #ffffff; cursor: pointer; display: block; float: left; font-size: 12px; font-weight: bold; height: 29px; line-height: 29px; padding: 0 10px; text-decoration: none; width: 150px; } #nav_pc_dmenue li:hover a.kategorie_link, #nav_pc_dmenue li.hover a.kategorie_link { background: none repeat scroll 0 0 #transparent; position: relative; } #nav_pc_dmenue li a.kategorie_link span { background: url("") no-repeat scroll -995px -339px transparent; display: block; float: left; height: 29px; width: 15px; } #nav_pc_dmenue li:hover a.kategorie_link span, #nav_pc_dmenue li.hover a.kategorie_link span { background: url("") no-repeat scroll -520px -147px transparent; display: block; color:ffffff; float: left; height: 29px; width: 15px; } #nav_pc_dmenue li.level_2, #nav_pc_dmenue li.new { background: url("") repeat-x scroll 0 29px #4B4B4B; border-bottom: 1px solid #FFFFFF; display: block; float: left; width: 170px; line-height: 29px; height: 29px; } #nav_pc_dmenue li.new { background: url("") no-repeat scroll 100% 100% #4B4B4B; line-height: 29px; height: 29px; } #nav_pc_dmenue li:hover, #nav_pc_dmenue li.hover { position: relative; } #nav_pc_dmenue li:hover ul, #nav_pc_dmenue li.hover ul { background: none repeat scroll 0 0 #ffffff; border: 1px solid #eb6909; left: 170px; padding: 20; top: -35px; width: 170px; line-height: 29px; } #nav_pc_dmenue li:hover ul li, #nav_pc_dmenue li.hover ul li { color: #000000; display: block; float: left; font-weight: normal; height: 29px; position: relative; width: 170px; } #nav_pc_dmenue li:hover ul li, #nav_pc_dmenue li.hover ul li { border-top: 1px solid #DDDDDD; height: 29px; margin: 0 10px; } #nav_pc_dmenue li ul li.title { color: #333333; display: block; font-size: 12px; font-weight: bold; height: 42px; margin: 0; width: 100%; } #nav_pc_dmenue li:hover li.title, #nav_pc_dmenue li.hover li.title { border: 0 none; } #nav_pc_dmenue li:hover a, #nav_pc_dmenue li.hover a { color: #323232; display: block; font-size: 12px; height: 29px; line-height: 29px; overflow: hidden; padding: 0 10px; text-decoration: none; width: 170px; } #nav_pc_dmenue a.new_child { background: none repeat scroll 0 0 #transparent; color: #FFFFFF; font-size: 12px; font-weight: normal; overflow: visible; text-decoration: none; padding-left: 10px; } #nav_pc_dmenue li:hover a:hover, #nav_pc_dmenue li.hover a.hover ul { background: none repeat scroll 0 0 #transparent; font-size: 12px; color: #eb6909; text-decoration: underline; } #nav_pc_dmenue li:hover a.new_child:hover, #nav_pc_dmenue li.hover a.new_child:hover { background: url("http://www.printer-care.de/logos/menue_test/arrow_nav_neu.gif") no-repeat scroll 0 0px transparent; color: #ffffff; border-bottom: none; text-decoration: none; width: 185px; z-index: 9999; } #nav_pc_dmenue li:hover li:hover ul, #nav_pc_dmenue li.hover li.hover ul { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #eb6909; left: 170px; padding: 20px; position: absolute; top: -35px; } #nav_pc_dmenue ul, #nav_pc_dmenue li:hover ul ul, #nav_pc_dmenue li.hover ul ul { left: -9999px; list-style: none outside none; margin: 0; padding: 0; position: absolute; top: -9999px; z-index: 1; color:ffffff; } #nav_pc_dmenue li:hover ul ul, #nav_pc_dmenue li.hover ul ul { position: relative; } #nav_pc_dmenue li:hover li:hover a.new_child, #nav_pc_dmenue li.hover li.hover a.new_child { background: url("") no-repeat scroll 0 -1px transparent; color: #FFFFFF; position: absolute; width: 150px; z-index: 99999; } |
|
||||
Kannst du bitte einen Link posten? Falls du es nicht hochgeladen hast, dann mach es über einen "Freehoster".
Denke aber daran den Pfad zum Stylesheet an den Server anzupassen.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! |
|
|||
|
|
|||
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
Einbindung von frei erhältlichen Scripten - CSS Problem | DonL | CSS | 1 | 22.01.2011 17:09 |
Problem mit CSS Menü | SMundt | CSS | 9 | 07.01.2009 20:12 |
Tab Menü Problem | BloodHunger | CSS | 6 | 22.12.2008 17:04 |
Menue Css Problem | AKraisser | CSS | 11 | 27.11.2008 17:40 |