Navigation bar und die anker aber wie richtig?

Selbes Thema noch mal. https://jsfiddle.net/RXBeat/fnmLc2jr/ Das hab ich jetzt gebaut. Code hab ich aus dem Netz und leicht abgeändert. Die untersten 5 Zeilen im CSS hab ich selbst eingefügt. Also "relative und height: 100vh. Dachte, das kann helfen.. Aber na ja.

Der hier verwendete Code

<style> body { background: #888; display:flex; flex-direction:column; } * { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; box-sizing: border-box; } nav { width: 100%; height:30px; background: #2a2a2a; font-size: 11px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; box-shadow: 0 0 10px rgba(0,0,0,1); } /* first stage */ nav > ul { display: flex; width: 100%; } nav a { display: block; color: #fff; text-decoration: none; } nav ul li { color: #fff; list-style: none; transition: 0.5s; flex:1; text-align:center; } nav > ul > li > a { padding: 8px 12px; } nav ul > li.submenu > a:after { position: relative; float: right; content: ''; margin-left: 8px; margin-top: 4px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #5db35b; border-bottom: 5px solid transparent; } nav ul > li.submenu:hover > a:after { margin-top: 2px; border-top: 5px solid transparent; border-bottom: 5px solid #5db35b; } nav > ul > li:hover { background: #4096ee; } nav ul.megamenu { position: absolute; display: flex; flex-wrap: wrap; width: 100%; top: -9999px; left: 0; padding: 30px 40px 0 20px; background-color:grey; text-align: center; border-top: 5px solid #4096ee; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); z-index: 1; font-size: 11px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } nav ul li:hover ul.megamenu { top: 0%; } nav ul.megamenu ul { width: 25%; margin-bottom: 40px; color: #000; box-shadow: none; } nav ul.megamenu h4 { margin-bottom: 15px; text-transform: uppercase; color: #5db35b; } nav ul.megamenu ul li { display: block; } nav ul.megamenu ul li a { margin-top: 10px; transition: 0.5s; color: #fff; } nav ul.megamenu ul li a:hover { color: #4096ee; } main{ display:flex; flex-direction:column; } section{ display:none; text-align:center; font-size:50px; overflow:auto; height:calc(100vh - 30px); border:2px solid red; } section:target{ display:block; } </style> <body> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#ueberuns">Über uns</a></li> <li><a href="#kontakt">Kontakt</a></li> <li><a href="#impressum">Impressum</a></li> <li class="submenu"><a href="#produkte" title="Unser Produktsortiment">Produkte</a> <ul class="megamenu"> <ul> <h4>Speicher</h4> <li><a href="#">DDR</a></li> <li><a href="#">DDR2</a></li> <li><a href="#">DDR3</a></li> <li><a href="#">DDR4</a></li> </ul> <ul> <h4>Festplatten</h4> <li><a href="#">Interne Festten</a></li> <li><a href="#">Externe Festplen</a></li> <li><a href="#">SSD (Solid State)</a></li> <li><a href="#">DDR4</a></li> </ul> <ul> <h4>Gehäuse</h4> <li><a href="#">PC-Gehäuse</a></li> <li><a href="#">Festplattenge</a></li> <li><a href="#">Netzteile</a></li> <li><a href="#">Kühler</a></li> </ul> <ul> <h4>Grafikkarten</h4> <li><a href="#">AMD</a></li> <li><a href="#">Nvidia</a></li> <li><a href="#">Sonstige</a></li> <li><a href="#">Kühler</a></li> </ul> </ul> </li> </ul> </nav> <main> <section id="home"> <p>home</p> </section> <section id="ueberuns"> <p>über uns</p> </section> <section id="kontakt"> <p>kontakt</p> </section> <section id="impressum"> <p>impressum</p> </section> <section id="produkte"> <p>home</p> </section> </main>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!