Anzeige

vertikales Menü mit horizontalem Untermenüpunkten

vertikales Menü mit horizontalem Untermenüpunkten | PSD-Tutorials.de

Erstellt von RemoteC, 08.06.2012.

  1. RemoteC

    RemoteC Nicht mehr ganz neu hier

    Dabei seit:
    09.09.2005
    Beiträge:
    68
    Geschlecht:
    männlich
    vertikales Menü mit horizontalem Untermenüpunkten
    Servus!

    Ich hab mal wieder ein Problem und hoffe dass mir jemand weiterhelfen kann :-|

    Ich bin dabei eine Website zu erstellen. Hauptmenü ist ein vertikales Menü mit einer <ul> realisiert, soweit nichts neues. Die Untermenüpunkte sollen aber horizontal neben dem Hauptmenüpunkt angezeigt werden sobald darauf geklickt wird.

    Ich habe das nach langem probieren geschafft, aber das ganze ist nicht sehr schön und vor allem nicht dynamisch, sprich ich müsste für jeden Menüpunkt eine eigene CSS-Klasse machen. Die Untermenüpunkte sind im DIV #zweite-ebene jeweils in einem <span> Mit einer ul li ul li wie ich es gewohnt bin habe ich es nicht geschafft weil beim float, clear usw. auch immer das Hauptmenü verschoben wird bzw. es plötzlich einen großen Spalt unter dem aktiven Hauptmenüpunkt gibt. Ich habe es nur mit position:absolute; geschafft, dass das Untermenü unabhängig vom Hauptmenü formatiert werden kann. Für einen anderen Menüpunkt stimmt diese Position natürlich nicht mehr.

    So sieht es jetzt aus und so soll es auch aussehen:
    [​IMG]

    Das CSS
    Code (Text):
    1.  
    2. #leftmenu a{
    3. display:block;
    4. width:67px;
    5. border:1px solid #4b4b4d;
    6. border-right:none; /* überschneidung mit vertikaler Linie */
    7. padding-right:1px; /* Korrektur weil rechts kein border */
    8. text-transform:uppercase;
    9. font-family:'CabinMedium', HelveticaNeue, Arial, sans-serif;
    10. font-size:8pt;
    11. line-height:10pt;
    12. color:#b1b3b4;
    13. margin-bottom:8px;
    14. text-decoration:none;
    15. }
    16.  
    17. #leftmenu span.active a{
    18. font-weight:bold;
    19. color:#000000;
    20. border-right:none;
    21. padding-right:1px;
    22. }
    23.  
    24. #zweite-ebene{
    25. display:block;
    26. position:absolute;
    27. left:70px;
    28. top:82px;
    29. text-transform:none;
    30. width:800px;
    31. }
    32.  
    33. #zweite-ebene a{
    34. width:auto;
    35. display:inline;
    36. float:left;
    37. margin-right:3px;
    38. padding-left:3px;
    39. border:none;
    40. border-left:1px solid #4b4b4d;
    41. }
    42.  
    43. #zweite-ebene a:first-child{ /* Sonst grauer Rahmen links, überschneidung mit schwarzer linie */
    44. border:none;
    45. }
    46.  
    47. #zweite-ebene a.active{
    48. font-weight:bold;
    49. color:#000000;
    50. }
    51.  
    Gibt es hier Lösungen? Bzw. woran liegt es dass ich kein einfaches "display:inline; float:left" machen kann beim Untermenü ohne das Hauptmenü damit zu zerstören?
     
    #1      
  2. Misco

    Misco Nicht mehr ganz neu hier

    Dabei seit:
    14.02.2010
    Beiträge:
    65
    Geschlecht:
    männlich
    vertikales Menü mit horizontalem Untermenüpunkten
    AW: vertikales Menü mit horizontalem Untermenüpunkten

    Mit einem Link zur Seite kann ich dir helfen.
     
    #2      
  3. webginga

    webginga Nicht mehr ganz neu hier

    Dabei seit:
    02.02.2008
    Beiträge:
    235
    Geschlecht:
    weiblich
    Software:
    XPress, InDesign, PS, Illustrator, Dreamweaver, Flash, Acrobat, Imovie,
    Kameratyp:
    Olympus Camedia
    vertikales Menü mit horizontalem Untermenüpunkten
    AW: vertikales Menü mit horizontalem Untermenüpunkten

    Hallo RemoteC,

    ist es denn überhaupt günstig das so zu lösen?
    Geht Dir da nicht das Untermenü über den eigentlichen Content?
    Es wirkt auf mich sehr verwirrend.
    LG Webginga
     
    #3      
  4. RemoteC

    RemoteC Nicht mehr ganz neu hier

    Dabei seit:
    09.09.2005
    Beiträge:
    68
    Geschlecht:
    männlich
    vertikales Menü mit horizontalem Untermenüpunkten
    AW: vertikales Menü mit horizontalem Untermenüpunkten

    Leider gibt es (noch) keinen Link da ich die Seite momentan lokal erstelle.

    Und nein, das Menü geht dann nicht über den Content, da ist genug Platz bzw. ein whitespace ;-)
     
    #4      
  5. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.468
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    vertikales Menü mit horizontalem Untermenüpunkten
    #5      
Seobility SEO Tool
x
×
×