1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

[ERLEDIGT] CSS-Menü

Dieses Thema im Forum "CSS" wurde erstellt von bdt600, 30 November 2016.

  1. bdt600

    bdt600 Guest

    Hallo zusammen,

    ich habe auch mal eine Frage. Vor einiger Zeit habe ich eine interessante Navigation gesehen, dummerweise habe ich die URL vergessen und finde die Seite nicht mehr wieder. Ich habe das mal nachgezeichnet, ist im Anhang. Bekommt man soetwas mit CSS hin, oder wurden da vermutlich Grafiken zusammengesetzt?
     

    Anhänge:

    • menu.gif
      menu.gif
      Dateigröße:
      4,9 KB
      Aufrufe:
      45
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.266
    Punkte für Erfolge:
    63
    Hallo

    Ja, das geht mit CSS ohne Grafiken. Ich habe vor einigen Tagen meine Beispielseiten aufgeräumt und dabei auch so ein Menü entsorgt, weil seit Jahren niemand danach gefragt hat.

    Damals habe ich es mit transform erstellt.

    Ich kann mir auch optisch eine Lösung before-/after-Elementen vorstellen. Wobei dann aber die Navigation wohl nicht der Optik folgen kann.

    Daher würde ich eher zu transform tendieren. Oder einer Kombination von beiden.

    Nachtrag:

    Ich habe grade noch folgende Anleitung gefunden:

    https://blog.kulturbanause.de/2016/01/parallelogramme-mit-css-erstellen/

    mit folgendem Live-Beispiel:

    https://media.kulturbanause.de/blog/2016/01/css-parallelogramm.html

    Die senkrechten Abschlüsse für das erste und letzte Element können dann wohl über geeignete Selektoren ausgewählt und mittles before-/after-Elementen erzeugt werden.

    Gruss

    MrMurphy
     
    Zuletzt bearbeitet: 30 November 2016
  3. bdt600

    bdt600 Guest

    Yeah, damit sollte ich klar kommen, tausend Dank!!
     
  4. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.266
    Punkte für Erfolge:
    63
    Hallo

    Da mir die verlinkte Lösung nicht hundertprozentig zusagt habe ich mal eine eigene erstellt. Bei der gibt es keine Überschneidungen, der erste Menüpunkt beginnt und der letzte endet senkrecht.

    Der HTML-Quelltext wie bei mir üblich möglichst übersichtlich gehalten (das span-Element wird benötigt um die Schrift wieder aufzurichten):

    Code (text):
    1.  
    2. <nav>
    3.    <a href=""><span>Banane</span></a>
    4.    <a href=""><span>Orange</span></a>
    5.    <a href=""><span>Kiwi</span></a>
    6.    <a href=""><span>Birne</span></a>
    7.    <a href=""><span>Zwetschke</span></a>
    8. </nav>
    9.  
    Das zugehörige CSS

    Code (text):
    1.  
    2. nav {
    3.    margin: 1rem 1rem 1rem 3rem;
    4.    display: flex;
    5. }
    6. nav a {
    7.    background: darkblue;
    8.    color: white;
    9.    text-decoration: none;
    10.    outline: none;
    11.    position: relative;
    12.    display: flex;
    13.    transform: skew(-45deg);
    14.    padding: 1rem 2.5rem;
    15.    margin-right: 0.5rem;
    16. }
    17. nav a:hover {
    18.    background-color: darkred;
    19. }
    20. nav span {
    21.    transform: skew(45deg);
    22. }
    23.  
    24. nav a:first-child {
    25.    padding-left: 0;
    26. }
    27. nav a:last-child {
    28.    padding-right: 0;
    29. }
    30. nav a:first-child::before,
    31. nav a:last-child::after {
    32.    content: "";
    33.    background-color: darkblue;
    34.    position: absolute;
    35.    z-index: -1;
    36.    transform: skew(45deg);
    37.    width: 3.5rem;
    38.    height: 100%;
    39.    margin-top: -1rem;
    40.    margin-left: -1.6rem;
    41. }
    42. nav a:first-child:hover::before,
    43. nav a:last-child:hover::after {
    44.    background-color: darkred;
    45. }
    46.  
    Und noch eine komplette Testseite mit zusätzlichen Informationen:

    Code (text):
    1.  
    2. <!DOCTYPE html>
    3. <html lang="de">
    4. <head>
    5.    <meta charset="utf-8">
    6.    <title>Menu Parallelogramm 01</title>
    7.    <meta name="description" content="HTML5, CSS3">
    8.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    9.    <!--[if lt IE 9]>
    10.       <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
    11.    <![endif]-->
    12.    <style>
    13.  
    14.    /*Icon-Font - font-family: 'FontAwesome';*/
    15.    @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);
    16.  
    17.    /*Überschriften - font-family: 'Roboto Slab', Serif;*/
    18.    @import 'https://fonts.googleapis.com/css?family=Roboto+Slab';
    19.  
    20.    /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
    21.    @import 'https://fonts.googleapis.com/css?family=Roboto';
    22.  
    23.    /*Zahlen* - font-family: 'Merriweather';*/
    24.    @import url(https://fonts.googleapis.com/css?family=Merriweather);
    25.  
    26.    @media all {
    27.       header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
    28.          display: block;
    29.       }
    30.       * {
    31.          /*box-sizing: border-box;*/
    32.          min-width: 0;
    33.       }
    34.       html {
    35.          font-family: sans-serif;
    36.          font-size: 120%;
    37.          line-height: 1.3;
    38.       }
    39.       body {
    40.          padding: 0 0.25rem 0.5rem 0.25rem;
    41.          border-top: 0.01px solid transparent;
    42.          margin: 0;
    43.       }
    44.    }
    45.  
    46.    /*Schriften 01*/
    47.    @media all {
    48.       html {
    49.          font-family: sans-serif;
    50.          font-size: 120%;
    51.          line-height: 1.3;
    52.       }
    53.       h1 {
    54.          font-family: 'Roboto Slab', serif;
    55.          font-size: 1.2rem;
    56.          letter-spacing: 0.1rem;
    57.          margin: 0.5rem 0.25rem 0 0.25rem;
    58.       }
    59.       h2, h3, h4, h5, h6 {
    60.          font-family: 'Roboto Slab', serif;
    61.          font-size: 1rem;
    62.          margin: 0.5rem 0.25rem 0 0.25rem;
    63.       }
    64.       p, li, dl, dt, address {
    65.          font-family: 'Roboto', 'Sans-Serif';
    66.          font-size: 1rem;
    67.          font-style: normal;
    68.          margin: 0.5rem 0.25rem 0 0.25rem;
    69.       }
    70.       a {
    71.          color: blue;
    72.          text-decoration: none;
    73.          outline: none;
    74.          margin: 0;
    75.       }
    76.       figcaption {
    77.          font-family: 'Roboto', 'Sans-Serif';
    78.          font-size: 0.9rem;
    79.          margin: 0;
    80.       }
    81.    }
    82.  
    83.    /*Grafiken*/
    84.    @media all {
    85.       figure {
    86.          min-width: 0;
    87.          max-width: 100%;
    88.          margin: 1rem 0 0 2rem;
    89.       }
    90.       img {
    91.          /*text-align: bottom;*/
    92.          min-width: 0;
    93.          display: block;
    94.          max-width: 100%;
    95.          /*max-height: 100vh;*/
    96.          border: 0;
    97.       }
    98.    }
    99.  
    100.    /*Spezielle Einstellungen*/
    101.    @media all {
    102.       nav {
    103.          margin: 1rem 1rem 1rem 3rem;
    104.          display: flex;
    105.          flex-wrap: wrap;
    106.       }
    107.       nav a {
    108.          background: darkblue;
    109.          color: white;
    110.          text-decoration: none;
    111.          outline: none;
    112.          position: relative;
    113.          transform: skew(-45deg);
    114.          padding: 1rem 2.5rem;
    115.          margin-right: 0.5rem;
    116.          display: flex;
    117.       }
    118.       nav a:hover {
    119.          background-color: darkred;
    120.       }
    121.       nav span {
    122.          transform: skew(45deg);
    123.       }
    124.  
    125.       nav a:first-child {
    126.          padding-left: 0;
    127.       }
    128.       nav a:last-child {
    129.          padding-right: 0;
    130.       }
    131.       nav a:first-child::before,
    132.       nav a:last-child::after {
    133.          content: "";
    134.          background-color: darkblue;
    135.          position: absolute;
    136.          z-index: -1;
    137.          transform: skew(45deg);
    138.          width: 3.5rem;
    139.          height: 100%;
    140.          margin-top: -1rem;
    141.          margin-left: -1.6rem;
    142.       }
    143.       nav a:first-child:hover::before,
    144.       nav a:last-child:hover::after {
    145.          background-color: darkred;
    146.       }
    147.  
    148.       nav:last-of-type {
    149.          background-color: gold;
    150.       }
    151.       nav:last-of-type span {
    152.          background-color: green;
    153.       }
    154.       nav:last-of-type a::before,
    155.       nav:last-of-type a::after {
    156.          background-color: hsla(0, 0%, 80%, 0.8);
    157.       }
    158.    }
    159.    @media only screen and (max-width: 1350px) {
    160.       nav {
    161.          width: 35rem;
    162.       }
    163.       nav a:nth-child(1n+5) {
    164.          margin-top: 0.5rem;
    165.       }
    166.       nav a:nth-child(5) {
    167.          padding-left: 0;
    168.       }
    169.       nav a:nth-child(4) {
    170.          padding-right: 0;
    171.       }
    172.       nav a:nth-child(4)::after,
    173.       nav a:nth-child(5)::before {
    174.          content: "";
    175.          background-color: darkblue;
    176.          position: absolute;
    177.          z-index: -1;
    178.          transform: skew(45deg);
    179.          width: 3.5rem;
    180.          height: 100%;
    181.          margin-top: -1rem;
    182.          margin-left: -1.6rem;
    183.       }
    184.       nav a:nth-child(4):hover::after,
    185.       nav a:nth-child(5):hover::before {
    186.          background-color: darkred;
    187.       }
    188.  
    189.       nav:last-of-type a:nth-child(5)::before,
    190.       nav:last-of-type a:nth-child(4)::after {
    191.          background-color: hsla(0, 0%, 80%, 0.8);
    192.       }
    193.    }
    194.  
    195.    /*Flexbox für IE*/
    196.          /*-ms-flex-preferred-size: calc(50% - 1rem);*/
    197.    /*Vorlage für das gesamte CSS*/
    198.    @media all {
    199.    }
    200.    /*Vorlage zum Kopieren für Media Queries - Mobile first*/
    201.    @media only screen and (min-width: 0px) {
    202.    }
    203.    /*Vorlage zum Kopieren für Media Queries - Desktop first*/
    204.    @media only screen and (max-width: 0px) {
    205.    }
    206.  
    207.    </style>
    208. </head>
    209. <body>
    210.    <header>
    211.       <h1>Menu Parallelogramm</h1>
    212.    </header>
    213.    <main>
    214.       <h2>Problem</h2>
    215.       <p>Ein Menu soll in Form eines Prallelogramms dargestellt werden.</p>
    216.       <h2>Bild zum Problem</h2>
    217.       <figure>
    218.          <!-- <img src="https://www.html.de/attachments/menu-gif.4510/"> -->
    219.          <!-- <img src="2016_11_30_bdt600_menu_parallelogramm_img_01.jpg"> -->
    220.          <img src="index04_img_01.jpg">
    221.          <figcaption>Bild zum Problem</figcaption>
    222.       </figure>
    223.       <h2>Lösung</h2>
    224.       <nav>
    225.          <a href=""><span>Banane</span></a>
    226.          <a href=""><span>Orange</span></a>
    227.          <a href=""><span>Kiwi</span></a>
    228.          <a href=""><span>Birne</span></a>
    229.          <a href=""><span>Zwetschke</span></a>
    230.          <a href=""><span>Mandarine</span></a>
    231.          <a href=""><span>Heidelbeere</span></a>
    232.       </nav>
    233.       <p>Da die Abstände und Positionen recht genau aufeinander abgestimmt sind muss bei schmalen Fenstern das Menulayout mittels Media Queries im Griff behalten werden. Das ist heutzutage aber sowieso üblich. Ich habe mal eine Media Query eingebaut.</p>
    234.       <p>Und noch mal etwas bunter um die einzelnen Elemente hervorzuheben:</p>
    235.       <nav>
    236.          <a href=""><span>Banane</span></a>
    237.          <a href=""><span>Orange</span></a>
    238.          <a href=""><span>Kiwi</span></a>
    239.          <a href=""><span>Birne</span></a>
    240.          <a href=""><span>Zwetschke</span></a>
    241.          <a href=""><span>Mandarine</span></a>
    242.          <a href=""><span>Heidelbeere</span></a>
    243.       </nav>
    244.       <p>Durch das <i>transform</i> und <i>position: absolute</i> ragen einige Elemente über den umgebenden nav-Container hinaus. Das ist das ganz normale Verhalten und muss durch passende Abstände angepasst werden, sofern der nav-Container eine Hintergrundfarbe erhalten soll.</p>
    245.    </main>
    246.    <footer>
    247.       <p>Originaldiskussion: <a href="https://www.html.de/threads/css-menue.56774/">https://www.html.de/</a></p>
    248.    </footer>
    249. </body>
    250. </html>
    251.  
    Außerdem ein Link zum direkten Ausprobieren, der aber nur zeitweise bestehen bleibt, da ich meinen Testaccount immer wieder mal aufräume:

    http://boratb.bplaced.net/index04.html

    Nachtrag: Ich habe den Gesamtquelltext um ein Media Query erweitert.

    Gruss

    MrMurphy
     
    Zuletzt bearbeitet: 30 November 2016
  5. bdt600

    bdt600 Guest

    HAMMER!!! Danke, danke, danke!!!
     
  6. bdt600

    bdt600 Guest

    @MrMurphy

    Moin, moin,

    leider habe ich noch ein Problem, ich habe jetzt bei deinem Beispiel die untere Navigation rausgenommen und schwups, sah die erste Navigation aus wie die Zweite.
    Ich gestehe, ich bin nicht der große Kenner, was CSS angeht und wenn es etwas komplizierter wird.

    Könntest du mir daher bitte einen Tipp geben, was ich da anpassen muss.

    Danke und Gruß
    bdt600
     
  7. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.569
    Punkte für Erfolge:
    83
    Bin so frei, Dir dabei behilflich zu sein :)

    Entferne einfach diese Zeilen aus dem CSS, die sich auf das letzte <nav>-Element beziehen, und bei seinem Wegfall für das erste/einzige <nav> gelten:
    Code (CSS):
    1. nav:last-of-type {
    2.    background-color: gold;
    3. }
    4. nav:last-of-type span {
    5.    background-color: green;
    6. }
    7. nav:last-of-type a::before,
    8. nav:last-of-type a::after {
    9.    background-color: hsla(0, 0%, 80%, 0.8);
    10. }
    11.  
    12. @media only screen and (max-width: 1350px) {
    13.   ...
    14.   nav:last-of-type a:nth-child(5)::before,
    15.   nav:last-of-type a:nth-child(4)::after {
    16.      background-color: hsla(0, 0%, 80%, 0.8);
    17.   }
    18. }
     
  8. bdt600

    bdt600 Guest

    Passt, vielen Dank!
     
  9. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.266
    Punkte für Erfolge:
    63
    Hallo

    Richtig, du hast nur einen Eintrag vergessen:

    Code (text):
    1.  
    2.    nav:last-of-type a:nth-child(5)::before,
    3.    nav:last-of-type a:nth-child(4)::after {
    4.       background-color: hsla(0, 0%, 80%, 0.8);
    5.    }
    6.  
    Ich habe den Quelltext der bereitgestellten Datei mal daraufhin angepasst und alle Angaben zur farblichen Hervorhebung im CSS in einen Extrablock mit einem kurzen Kommentar "ausgelagert", der dann einfach komplett gelöscht oder auskommentiert werden kann.

    Gruss

    MrMurphy
     
    Zuletzt bearbeitet: 5 Dezember 2016
    bdt600 gefällt das.
  10. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.569
    Punkte für Erfolge:
    83
    Hatte ich auch nach dem Absenden meiner Antwort bemerkt, und direkt nachgereicht, während Du wohl noch am Lesen warst :cool:
     
  11. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.569
    Punkte für Erfolge:
    83
    Gern geschehen :)
     
    bdt600 gefällt das.
  12. bdt600

    bdt600 Guest

    Moin, moin,

    ich muss doch noch mal nachfragen. Die Navigation sieht soweit schon klasse aus, aber ein Problem habe ich noch. Die Navigation steckt in einem div und soll immer eine Breite von 100% haben. Wie bekomme ich es hin, dass jedes Element sich entsprechend dehnt bzw. verkleinert, wenn sich die Breite des div's ändert?

    Danke und Gruß
    bdt600
     
  13. nookie

    nookie I did it all for the nookie

    Registriert seit:
    14 Mai 2013
    Beiträge:
    1.378
    Punkte für Erfolge:
    83
    Geht es dir jetzt prinzipiell darum, das deine Navigations auch Responsive ist?

    Das du mal irgendwas nachfragst, hätte ich nicht gedacht. Darum extra für dich eine Anleitung:
    1. http://www.google.de aufrufen
    2. Frage in das vorgesehene Suchfeld eingeben
    3. Auf den Button "Google-Suche" klicken
    4. Gewünschtes Ergebnis raussuchen
    :D:oops:
     
  14. bdt600

    bdt600 Guest

    Gut erkannt.
    Warum sollte ich nicht. Ich bin eher der Programmierer als der Designer und wenn ich schon mal was zusammengebatelt habe, dann meist statische Seiten.
    Haha, sehr lustig :cool: In aller Regel bemühe ich google, aber bei der Navigation mit den Parallelogrammen komme ich irgendwie nicht weiter. Kann aber auch sein, dass ich da zu blöd für bin und zu wenig Erfahrung habe.
     
    nookie gefällt das.
  15. nookie

    nookie I did it all for the nookie

    Registriert seit:
    14 Mai 2013
    Beiträge:
    1.378
    Punkte für Erfolge:
    83
    Ich wollte dich doch nur ein bisschen ärgern.

    Aber zurück zu deiner Frage, wenn du kein Framework wie bspw. Bootstrap benutzt würde ich es ganz simple über MediaQueries versuchen. Bei entsprechender Auflösung eine entsprechende Breite vergeben.
     
  16. bdt600

    bdt600 Guest

    Bin ein Stück weiter, aber...

    Sowohl auf der linken als auch auf der rechten Seite sind die Links mit der 45 Grad Kante und der Text wird auch in diesem Winkel ausgegeben. Habe versucht, dies mit den Infos von MrMurphy zu beseitigen, aber ich bekomme es nicht hin. Ich wäre wirklich dankbar, wenn mir jemand weiterhelfen kann.

    Hier ein Link zur Testseite: http://helper.bplaced.net/navi

    Danke und Gruß
    bdt600
     
  17. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.569
    Punkte für Erfolge:
    83
    Springe dann mal wieder in die Bresche :cool::D
    Code (CSS):
    1. #nav ul li a {
    2.     display: flex; /* wie in MrMurphys Beispiel - anstatt display: block */
    3.     justify-content: center; /* Ergänzung, damit flexible Elemente mittig angeordnet werden */
    4.     padding: 0.2em;
    5.     margin: 0.2em;
    6.     background: #0F9962;
    7.     color: white;
    8.     text-decoration: none;
    9.     border-right: 1px solid #0a6b44;
    10.     font-weight: bold;
    11.     transform: skew(-45deg);
    12. }
     
    bdt600 gefällt das.
  18. bdt600

    bdt600 Guest

    Und das mit einer perfekten Lösung, damit der Text nicht mehr schräg steht.

    Jetzt muss ich nur noch links und rechts die Schrägen wegbekommen. Ich bastele mal weiter, vielleicht finde ich ja selber die Lösung. Würde aber auch gerne noch einen Tipp annehmen.

    Danke und Gruß
    bdt600
     
  19. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.569
    Punkte für Erfolge:
    83
    Ich hab da mal fix was gefiddelt: https://jsfiddle.net/SpiceLab/jxqzgnk3/
    Code (CSS):
    1. #nav ul li a {
    2.     ...
    3.     position: relative; /* absolute top-/left-Startpositionen von ::before u. ::after beziehen sich auf <a> */
    4. }
    5. #nav ul li:first-child a::before,
    6. #nav ul li:last-child a::after {
    7.     content: "";
    8.     background-color: rgba(255, 255, 0, .5); /* nur zu Demozwecken; wieder auf #0F9962 zurücksetzen */
    9.     position: absolute;
    10.     z-index: 10; /* nur zu Demozwecken; wieder auf -1 zurücksetzen */
    11.     transform: skew(45deg);
    12.     width: 2em;
    13.     height: 100%;
    14.     top: 0;
    15.     left: -.8em;
    16. }
    17. #nav ul li:last-child a::after {
    18.     left: calc(100% - 1.2em);
    19. }
    Wenn Du es anstelle von top u. left, lieber so wie in MrMurphys Beispiel bei margin-top / -left (mit negativen Werten) belassen willst, müsstest Du für den linken Außenabstand auf calc() unter Zuhilfenahme von Variablen zurückgreifen, um den "passenden" Wert im aktuell skalierten Viewport zu ermitteln, da sich ja in Deinem Seitenkonzept die Menübuttons bis zu einem gewissen Punkt zusammenziehen, ab dem sie dann im "Hamburger Menu" verschwinden.
     
    bdt600 gefällt das.
  20. bdt600

    bdt600 Guest

    @MrMurphy und @Spicelab

    tausend Dank, jetzt passt es perfekt.

    Danke und Gruß
    bdt600

    <edit>
    Doch noch Probleme, wenn man das Browserfenster verkleinert und dann das Menü aufklappt, sind die schrägen Kanten nicht so schön. Muss ich doch noch basteln.
    </edit>
     
    Zuletzt von einem Moderator bearbeitet: 9 Dezember 2016