Veröffentlicht 14. Juli 201015 j HI ich habe auf der seite der pcwelt (Das Portal für Computer und Technik - PC-WELT) entdeckt, das die so ein nettes menü haben, was sich so ausklappt, sobald man mit dem Cursor drübergeht. nun fände ich es super, wenn ihr mir erklären könntet, wie ich sowas bewerkstelligen kann. AUs dem quelltext der seite bin ich nciht wirklich schlau geworden, weil der einfsach völlig überladen ist. mfg
14. Juli 201015 j Vl. hilft dir diese Seite weiter? Multilevel Drop Down Navigation Menus: Examples and Tutorials - Noupe Sonst einfach mal nach "html drop down navigation" bei google suchen, sollte sich vieles zu finden lassen.
14. Juli 201015 j Vl. hilft dir diese Seite weiter? Multilevel Drop Down Navigation Menus: Examples and Tutorials - Noupe Sonst einfach mal nach "html drop down navigation" bei google suchen, sollte sich vieles zu finden lassen. danke duper der link hat alle fragen geklärt
14. Juli 201015 j der link hatte nur auf den ersten blick habe mir mal das jQuick ****er... ausgesucht. jedoch habe cih das problem, das ich mti dem javascript dort nix anfnagen kann. Nur dieses Ocdefragment funktioniert einfach nicht. ihc bnötige trotzdem noch den gnazen css teil und die 3 verknüpften css/javascript-datein... kann mir das mal bitte jemand erklären?
14. Juli 201015 j Das geht auch ganz ohne JS rein mit CSS. Ist bei pcwelt auch so. Im Grunde werden die Submenüs per CSS ausgeblendet und entsprechend per Pseudoklasse :hover über das Elternelement sichtbar gemacht.
16. Juli 201015 j So ich habe dann mal ein wenig herumgetestet... hier der code.... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <link rel="stylesheet" media="all" type="text/css" href="../css/default.css" /> <style type="text/css"> /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/final_drop2.html Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ /* style the outer div to give it width */ .menu { font-size:0.85em; padding-bottom:200px; } /* remove all the bullets, borders and padding from the default list styling */ .menu ul { padding:0; margin:0; list-style-type:none; } .menu ul ul { width:100px; } /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */ .menu li { float:left; position:relative; } /* style the links for the top level */ .menu a, .menu a:visited { font-size:11px; text-decoration:none; padding-left:10px; color:#000; width:auto; height:30px; line-height:29px; } /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited { width:150px; w\idth:139px; } /* style the second level background */ .menu ul ul a.drop, .menu ul ul a.drop:visited { background:#949e7c; } /* style the second level hover */ .menu ul ul a.drop:hover{ background:#c9ba65; } .menu ul ul :hover > a.drop { background:#c9ba65; } /* style the third level background */ .menu ul ul ul a, .menu ul ul ul a:visited { background:#e2dfa8; } /* style the third level hover */ .menu ul ul ul a:hover { background:#b2ab9b; } .menu ul ul ul :hover > a { background:#b2ab9b; } /* hide the sub levels and give them a positon absolute so that they take up no room */ .menu ul ul { visibility:hidden; position:absolute; height:0; top:31px; left:0; width:150px; } /* another hack for IE5.5 */ * html .menu ul ul { top:30px; t\op:31px; } /* position the third level flyout menu */ .menu ul ul ul{ left:150px; top:0; width:150px; } /* position the third level flyout menu for a left flyout */ .menu ul ul ul.left { left:-150px; } /* style the table so that it takes no part in the layout - required for IE to work */ .menu table {position:absolute; top:0; left:0;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { background:#d4d8bd; color:#000; height:auto; line-height:1em; padding:5px 10px; width:129px /* yet another hack for IE5.5 */ } * html .menu ul ul a{ width:150px; w\idth:129px; } /* style the top level hover */ /* make the second level visible when hover on first level list OR link */ .menu ul li:hover ul, .menu ul a:hover ul{ visibility:visible; } /* keep the third level hidden when you hover on first level list OR link */ .menu ul :hover ul ul{ visibility:hidden; } /* keep the fourth level hidden when you hover on second level list OR link */ .menu ul :hover ul :hover ul ul{ visibility:hidden; } /* make the third level visible when you hover over second level list OR link */ .menu ul :hover ul :hover ul{ visibility:visible; } /* make the fourth level visible when you hover over third level list OR link */ .menu ul :hover ul :hover ul :hover ul { visibility:visible; } </style> </head> <body id="www-cssplay-co-uk"> <table border=1><tr> <td class="navrow"> <div class='menu'> <ul><li><a href="./ucp.php">Persönlicher Bereich</a></li></ul><ul><li><a href="./ucp.php?i=pm&folder=inbox"><strong>0</strong> neue Nachrichten</a></li></ul> <ul><li><a href="./calendar.php">Kalender</a></li></ul> <ul><li><a href="./gallery/index.php" title="Bilder Galerie">Galerie</a></li></ul> <ul><li><a href="./faq.php">FAQ</a></li></ul> <ul><li><a href="./search.php">Suche</a></li></ul> <ul> <li><a href="./memberlist.php">Mitglieder</a></li> <li><ul> <li><a href="./stars.php">Sterne</a></li> </ul></li> </ul> <ul><li><a href="./ucp.php?mode=logout&sid=7e1570ae154e455616bc79baec090e6f">Abmelden [ mojito ]</a></li></ul> </div> </td> </tr> </body> </html> jedoch habe ich das problem, das dort nix rausklappt ^^ auch wüsste ich gerne, wie cih diesen mosntrösen abstand vermeiden kann.... NAchtrag: heir ncoh der link zur seite: 1.htm Bearbeitet 16. Juli 201015 j von callidus
19. Juli 201015 j jedoch habe ich das problem, das dort nix rausklappt ^^ Das passiert wenn man Code kopiert, ohne ihn zu verstehen. Wenn Du jeden Menüpunkt in eine eigene Liste mit nur einem Listenelement packst, ist das nicht verwunderlich. Und wozu die Tabelle, die zudem nichtmal geschlossen wird? Schmeiß die raus. Wie man eine unsortierte Liste korrekt erstellt, siehe hier: SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Listen Ausklappende Submenüs werden entsprechend durch Verschachtelung realisiert.
19. Juli 201015 j gut, danke, hat geholfen, jedoch ist dieser gigantische abstand jetzt da... habe die tabelle nur zum anzeigen des platzes, der eingenommen wird eingefügt... Bearbeitet 19. Juli 201015 j von callidus
19. Juli 201015 j so, habe den fehler mit dem großen abstand gefunden... aktuelle datei ist hochgeladen. (s. link vom vorletzten beitrag). nur der untergeordnete butten ist einfach nciht anklickbar... wie kommt das.... mfg
19. Juli 201015 j nach vielem hin und her habe ich den fehler jetzt gefunden. jedoch stört mich eine kleinigkeit. die droppdown-menüleiste beginnt immer ganz rechts. ich hätte die gerne in der mitte centriert. wo muss ich da ansetzen? mfg Nachtrag: derzeit habe ich das ganze als fixed gesetzt, damit dder dropdown immer über allem steht, da dieser header, ind as das droptdown-teil soll nru ein kleiner part der seite ist. jemand ne idee, wie ich einen mix aus fixed und relativ hinbekomme? Bearbeitet 19. Juli 201015 j von callidus
20. Juli 201015 j Erstmal noch allgemeine Sachen: [invalid] Markup Validation of http://soulsociety.so.funpic.de/trash/1.htm - W3C Markup Validator Viele Fehler werden von der Funpic-Werbung erzeugt, aber nicht alle. Das Title-Element fehlt. Deine äußere Liste wird nicht geschlossen. jedoch stört mich eine kleinigkeit. die droppdown-menüleiste beginnt immer ganz rechts. ich hätte die gerne in der mitte centriert. wo muss ich da ansetzen? Man kann Block-Elemente per Seitenabstand zentrieren. derzeit habe ich das ganze als fixed gesetzt, damit dder dropdown immer über allem steht, da dieser header, ind as das droptdown-teil soll nru ein kleiner part der seite ist. jemand ne idee, wie ich einen mix aus fixed und relativ hinbekomme? Wenn Du mir erklärst, was ein Mix aus fixed und relative sein soll, kann ich Dir vielleicht helfen.
20. Juli 201015 j Hi, bei dem ganzen handelt es sich um ein forum (phpbb3). das heißt ich kann nciht einfach dort in den quelltexten rumfuschen und plötzlich tabellen öffnen/schließen, ohne das ich alle datein durchsuchen muss.... das was in der 1.htm ist ist immer nur ein auschnitt des headers wiedu evtl. weißt besteht eine phpbb-seite immer aus drei seiten uase. overall_header (da wo das dropdown drin ist), inhalt, overall_footer das problem ist ja, das der overall_header direkt unter dem dropdown zu ende ist, also ab dort ne andere seite beginnt. nun habe ich das problem, das sobald ich die position als relativ setze, was ja im normalfall das sinnvollste ist ^^, generell hinter der "2.seite" also dem inhal verschwindet. nur wenn ich die position auf fixed setze, dann legt es sich quasi über die 2. seite. jedoch ist es so, das ich bei dem fixed jedes droppdown-leil quasi einen eigenen style braucht. verstehst du, wo das problem ist? zur ausrichtung: mit text-align:center; würde cihd as ja theoretisch in die mitte zaubern, jedoch setzt das float:left dagegen, sodasses trtzdem rechts klebt. zufälig eine idee, wie ich das trotzdem hinbekomme? nehme ich fload:left raus, ist alles in der mitte untereinander.... Bearbeitet 20. Juli 201015 j von callidus
20. Juli 201015 j Hi, bei dem ganzen handelt es sich um ein forum (phpbb3). das heißt ich kann nciht einfach dort in den quelltexten rumfuschen und plötzlich tabellen öffnen/schließen, ohne das ich alle datein durchsuchen muss.... das was in der 1.htm ist ist immer nur ein auschnitt des headers Nichtsdestotrotz fehlt da ein </ul> in Deinem Menü. das problem ist ja, das der overall_header direkt unter dem dropdown zu ende ist, also ab dort ne andere seite beginnt. nun habe ich das problem, das sobald ich die position als relativ setze, was ja im normalfall das sinnvollste ist ^^, generell hinter der "2.seite" also dem inhal verschwindet. nur wenn ich die position auf fixed setze, dann legt es sich quasi über die 2. seite. jedoch ist es so, das ich bei dem fixed jedes droppdown-leil quasi einen eigenen style braucht. verstehst du, wo das problem ist? Ähm... nein, keine Ahnung warum das "verschwinden" soll. zur ausrichtung: mit text-align:center; würde cihd as ja theoretisch in die mitte zaubern, jedoch setzt das float:left dagegen, sodasses trtzdem rechts klebt. zufälig eine idee, wie ich das trotzdem hinbekomme? nehme ich fload:left raus, ist alles in der mitte untereinander.... Wie gesagt, Seitenabstand. .menu { margin-left:auto; margin-right:auto; }
20. Juli 201015 j HI, habe das mal geändert. habe jetzt mal die htm des forums angehängt, da siehst du dann mal was ich emien mit dem verschwinden... einfach mal den cursor über "mitglieder" bewegen. datei2.htm das mit dem margin-left etc. funzt übrigens nicht....
21. Juli 201015 j HI, habe das mal geändert. habe jetzt mal die htm des forums angehängt, da siehst du dann mal was ich emien mit dem verschwinden... Hier liegt der Hund begraben: .navrow { background: #3b83c6 url(images/buttons.gif) top left repeat-x; height: 21px; [B]overflow: hidden;[/B] border-bottom: solid 1px #000; border-top: solid 1px #000; color: #F0E80A; text-align: center; font-size: 11px; padding: 1px; } das mit dem margin-left etc. funzt übrigens nicht.... Das funktioniert bestens. Das Problem ist, dass sich das div .menu (Hier wäre eine ID statt einer Klasse besser, das nur nebenbei) innerhalb einer Tabellenzelle befindet und sich divs in tds offensichtlich auf die Breite der Zelle ausdehnen. Und wenn man ein div mit 100% Breite zentriert, sieht das natürlich genau so aus wie vorher. Wie man das jetzt löst, weiß ich nicht. Das ist halt eins von vielen Problemen von Tabellen-Layouts. Phpbb ist Mist.
23. Juli 201015 j Das kann man mit JavaScript machen. Ich empfehle zur Vereinfachung die jQuery-Bibliothek. Tutorials dazu findest du auf der Homepage jQuery: The Write Less, Do More, JavaScript Library.
23. Juli 201015 j Ich weiß nicht, inwiefern JavaScript hier bei der Zentrierung helfen soll. Hast Du den Thread überhaupt gelesen? Eine Lösung gäbe es: .menu ul kriegt ein text-align:center verpasst und .menu li statt float:left ein display:inline.
23. Juli 201015 j Hi, erstmal danke für den hinweeisß mit dem fixed/relativ, das aht schonmal geholfen... nur der dropdown kliegt ertwas zu hcoh... naja, das dürfte ich hinbekommen. werde das mit der zentrierung aml probieren...
Archiv
Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.