• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] CSS-Menü

B

bdt600

Guest
#1
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

MrMurphy

Senior HTML'ler
28 Juli 2009
1.458
211
63
#2
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:

MrMurphy

Senior HTML'ler
28 Juli 2009
1.458
211
63
#4
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:
<nav>
   <a href=""><span>Banane</span></a>
   <a href=""><span>Orange</span></a>
   <a href=""><span>Kiwi</span></a>
   <a href=""><span>Birne</span></a>
   <a href=""><span>Zwetschke</span></a>
</nav>
Das zugehörige CSS

Code:
nav {
   margin: 1rem 1rem 1rem 3rem;
   display: flex;
}
nav a {
   background: darkblue;
   color: white;
   text-decoration: none;
   outline: none;
   position: relative;
   display: flex;
   transform: skew(-45deg);
   padding: 1rem 2.5rem;
   margin-right: 0.5rem;
}
nav a:hover {
   background-color: darkred;
}
nav span {
   transform: skew(45deg);
}

nav a:first-child {
   padding-left: 0;
}
nav a:last-child {
   padding-right: 0;
}
nav a:first-child::before,
nav a:last-child::after {
   content: "";
   background-color: darkblue;
   position: absolute;
   z-index: -1;
   transform: skew(45deg);
   width: 3.5rem;
   height: 100%;
   margin-top: -1rem;
   margin-left: -1.6rem;
}
nav a:first-child:hover::before,
nav a:last-child:hover::after {
   background-color: darkred;
}
Und noch eine komplette Testseite mit zusätzlichen Informationen:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Menu Parallelogramm 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import 'https://fonts.googleapis.com/css?family=Roboto+Slab';

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import 'https://fonts.googleapis.com/css?family=Roboto';

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 0;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         padding: 0 0.25rem 0.5rem 0.25rem;
         border-top: 0.01px solid transparent;
         margin: 0;
      }
   }

   /*Schriften 01*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      p, li, dl, dt, address {
         font-family: 'Roboto', 'Sans-Serif';
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      a {
         color: blue;
         text-decoration: none;
         outline: none;
         margin: 0;
      }
      figcaption {
         font-family: 'Roboto', 'Sans-Serif';
         font-size: 0.9rem;
         margin: 0;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 1rem 0 0 2rem;
      }
      img {
         /*text-align: bottom;*/
         min-width: 0;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

   /*Spezielle Einstellungen*/
   @media all {
      nav {
         margin: 1rem 1rem 1rem 3rem;
         display: flex;
         flex-wrap: wrap;
      }
      nav a {
         background: darkblue;
         color: white;
         text-decoration: none;
         outline: none;
         position: relative;
         transform: skew(-45deg);
         padding: 1rem 2.5rem;
         margin-right: 0.5rem;
         display: flex;
      }
      nav a:hover {
         background-color: darkred;
      }
      nav span {
         transform: skew(45deg);
      }

      nav a:first-child {
         padding-left: 0;
      }
      nav a:last-child {
         padding-right: 0;
      }
      nav a:first-child::before,
      nav a:last-child::after {
         content: "";
         background-color: darkblue;
         position: absolute;
         z-index: -1;
         transform: skew(45deg);
         width: 3.5rem;
         height: 100%;
         margin-top: -1rem;
         margin-left: -1.6rem;
      }
      nav a:first-child:hover::before,
      nav a:last-child:hover::after {
         background-color: darkred;
      }

      nav:last-of-type {
         background-color: gold;
      }
      nav:last-of-type span {
         background-color: green;
      }
      nav:last-of-type a::before,
      nav:last-of-type a::after {
         background-color: hsla(0, 0%, 80%, 0.8);
      }
   }
   @media only screen and (max-width: 1350px) {
      nav {
         width: 35rem;
      }
      nav a:nth-child(1n+5) {
         margin-top: 0.5rem;
      }
      nav a:nth-child(5) {
         padding-left: 0;
      }
      nav a:nth-child(4) {
         padding-right: 0;
      }
      nav a:nth-child(4)::after,
      nav a:nth-child(5)::before {
         content: "";
         background-color: darkblue;
         position: absolute;
         z-index: -1;
         transform: skew(45deg);
         width: 3.5rem;
         height: 100%;
         margin-top: -1rem;
         margin-left: -1.6rem;
      }
      nav a:nth-child(4):hover::after,
      nav a:nth-child(5):hover::before {
         background-color: darkred;
      }

      nav:last-of-type a:nth-child(5)::before,
      nav:last-of-type a:nth-child(4)::after {
         background-color: hsla(0, 0%, 80%, 0.8);
      }
   }

   /*Flexbox für IE*/
         /*-ms-flex-preferred-size: calc(50% - 1rem);*/
   /*Vorlage für das gesamte CSS*/
   @media all {
   }
   /*Vorlage zum Kopieren für Media Queries - Mobile first*/
   @media only screen and (min-width: 0px) {
   }
   /*Vorlage zum Kopieren für Media Queries - Desktop first*/
   @media only screen and (max-width: 0px) {
   }

   </style>
</head>
<body>
   <header>
      <h1>Menu Parallelogramm</h1>
   </header>
   <main>
      <h2>Problem</h2>
      <p>Ein Menu soll in Form eines Prallelogramms dargestellt werden.</p>
      <h2>Bild zum Problem</h2>
      <figure>
         <!-- <img src="https://www.html.de/attachments/menu-gif.4510/"> -->
         <!-- <img src="2016_11_30_bdt600_menu_parallelogramm_img_01.jpg"> -->
         <img src="index04_img_01.jpg">
         <figcaption>Bild zum Problem</figcaption>
      </figure>
      <h2>Lösung</h2>
      <nav>
         <a href=""><span>Banane</span></a>
         <a href=""><span>Orange</span></a>
         <a href=""><span>Kiwi</span></a>
         <a href=""><span>Birne</span></a>
         <a href=""><span>Zwetschke</span></a>
         <a href=""><span>Mandarine</span></a>
         <a href=""><span>Heidelbeere</span></a>
      </nav>
      <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>
      <p>Und noch mal etwas bunter um die einzelnen Elemente hervorzuheben:</p>
      <nav>
         <a href=""><span>Banane</span></a>
         <a href=""><span>Orange</span></a>
         <a href=""><span>Kiwi</span></a>
         <a href=""><span>Birne</span></a>
         <a href=""><span>Zwetschke</span></a>
         <a href=""><span>Mandarine</span></a>
         <a href=""><span>Heidelbeere</span></a>
      </nav>
      <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>
   </main>
   <footer>
      <p>Originaldiskussion: <a href="https://www.html.de/threads/css-menue.56774/">https://www.html.de/</a></p>
   </footer>
</body>
</html>
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:
B

bdt600

Guest
#6
@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
 

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#7
@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
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:
CSS:
nav:last-of-type {
   background-color: gold;
}
nav:last-of-type span {
   background-color: green;
}
nav:last-of-type a::before,
nav:last-of-type a::after {
   background-color: hsla(0, 0%, 80%, 0.8);
}

@media only screen and (max-width: 1350px) {
  ...
  nav:last-of-type a:nth-child(5)::before,
  nav:last-of-type a:nth-child(4)::after {
     background-color: hsla(0, 0%, 80%, 0.8);
  }
}
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.458
211
63
#9
Hallo

Richtig, du hast nur einen Eintrag vergessen:

Code:
   nav:last-of-type a:nth-child(5)::before,
   nav:last-of-type a:nth-child(4)::after {
      background-color: hsla(0, 0%, 80%, 0.8);
   }
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:
Zustimmungen: bdt600

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#10
B

bdt600

Guest
#12
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
 

nookie

I did it all for the nookie
14 Mai 2013
1.402
251
83
www.diarat.com
#13
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
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:
 
B

bdt600

Guest
#14
Geht es dir jetzt prinzipiell darum, das deine Navigations auch Responsive ist?
Gut erkannt.
Das du mal irgendwas nachfragst, hätte ich nicht gedacht.
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.
 
Zustimmungen: nookie

nookie

I did it all for the nookie
14 Mai 2013
1.402
251
83
www.diarat.com
#15
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.
 
B

bdt600

Guest
#16
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
 

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#17
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
Springe dann mal wieder in die Bresche :cool::D
CSS:
#nav ul li a {
    display: flex; /* wie in MrMurphys Beispiel - anstatt display: block */
    justify-content: center; /* Ergänzung, damit flexible Elemente mittig angeordnet werden */
    padding: 0.2em;
    margin: 0.2em;
    background: #0F9962;
    color: white;
    text-decoration: none;
    border-right: 1px solid #0a6b44;
    font-weight: bold;
    transform: skew(-45deg);
}
 
Zustimmungen: bdt600

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#19
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.
Ich hab da mal fix was gefiddelt: https://jsfiddle.net/SpiceLab/jxqzgnk3/
CSS:
#nav ul li a {
    ...
    position: relative; /* absolute top-/left-Startpositionen von ::before u. ::after beziehen sich auf <a> */
}
#nav ul li:first-child a::before,
#nav ul li:last-child a::after {
    content: "";
    background-color: rgba(255, 255, 0, .5); /* nur zu Demozwecken; wieder auf #0F9962 zurücksetzen */
    position: absolute;
    z-index: 10; /* nur zu Demozwecken; wieder auf -1 zurücksetzen */
    transform: skew(45deg);
    width: 2em;
    height: 100%;
    top: 0;
    left: -.8em;
}
#nav ul li:last-child a::after {
    left: calc(100% - 1.2em);
}
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.
 
Zustimmungen: bdt600
B

bdt600

Guest
#20
@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:
Top Bottom