Navigation bar und die anker aber wie richtig? 2
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 naja.
Javascript hab ich auch aus dem Netz. Versteh den nicht so wirklich.
Ganz unten im html section hab ich selbst hinzugefügt. Weil das im JS so angegeben ist. Dachte das kann helfen.
Tut es aber nicht :D
die hab ich auch selbst eingefügt zum testen. Funktioniert aber nicht grrr
also doch es greift zwar dahin aber öffnet optisch keine neue Seite sondern scrollt runter.
Mein Wunsch:
Das Menü soll dauerhaft sichtbar sein.
Wenn man ein menüpunkt auswählt soll die seite 100%x100% auf dem bildschirm erscheinen. Ohne das man zum nächsten punkt scrollen soll.
Also eine ganz normale Page.
Ich versuche das schon seit tagen sauber hinzubekommen. Ohne fusch etc.
Ich würde es einfach gerne mal sehen wie es aussehen muss.
Ich hab es schon mal fast hinbekommen, da hat es funktioniert aber sobald man man gesamte fenster verkleinert hat, ist die page hoch oder runter gescrollt obwohl das nicht sein durfte.
Ich will euch nicht immer die arbeit machen lassen aber nur so schnall ich wie man vorgeht.
Zu dem JS Code, vielleicht jemand die möglichkeit den mir in wenigen worten zu erklären?
Funktioniert das auch ohne JS?
https://jsfiddle.net/RXBeat/fnmLc2jr/1/
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hallo Welt</title>
<style>
body {
background: #888;
}
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
}
/*scrollbalken ausblenden
body::-webkit-scrollbar {
display: none;
}
*/
nav {
z-index:99;
position: fixed;
top:0;
left:0;
width: 100%;
background: #2a2a2a;
font-size: 11px;
align-items: center; /* Zentrieren das menu */
justify-content: center; /* Zentrieren das menu */
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
box-shadow: 0 0 10px rgba(0,0,0,1);
}
nav > ul {
display: flex;
justify-content: center;
width: 100%;
}
nav a {
display: block;
color: #fff;
text-decoration: none;
}
nav ul li {
color: #fff;
list-style: none;
transition: 0.5s;
}
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: 100%;
}
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;
}
section
{
border:2px solid red;
text-align:center;
font-size:30px;
display:none;
position: relative;
height: 100vh;
}
section:before{
margin-top:30px;
content:'';
width:100%;
display:block;
}
section:target{
display:block;
overflow:auto;
}
</style>
</head>
<body id="wrapper">
<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="Megamenu" style="color:#aaa;">Part 5</a>
<ul class="megamenu">
<ul>
<h4>Part 6.1-6.3</h4>
<li><a href="#part_61">Part 6.1</a></li>
<li><a href="#part_62">Part 6.2</a></li>
</ul>
<ul>
<h4>Part 7.1-7.3</h4>
<li><a href="#part_71">Part 7.1</a></li>
<li><a href="#part_72">Part 7.2</a></li>
</ul>
<ul>
<h4>Part 8.1-8.3</h4>
<li><a href="#part_81">Part 8.1</a></li>
<li><a href="#part_82">Part 8.2</a></li>
</ul>
<ul>
<h4>Part 9.1-9.3</h4>
<li><a href="#part_91">Part 9.1</a></li>
<li><a href="#part_92">Part 9.2</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>Produkte</p>
</section>
<section id="part_61">
<h1>Part 6.1</h1>
</section>
<section id="part_62">
<h1>Part 6.2</h1>
</section>
<section id="part_63">
<h1>Part 6.3</h1>
</section>
<section id="part_64">
<h1>Part 6.4</h1>
</section>
<section id="part_71">
<h1>Part 7.1</h1>
</section>
<section id="part_72">
<h1>Part 7.2</h1>
</section>
<section id="part_73">
<h1>Part 7.3</h1>
</section>
<section id="part_74">
<h1>Part 7.4</h1>
</section>
<section id="part_81">
<h1>Part 8.1</h1>
</section>
<section id="part_82">
<h1>Part 8.2</h1>
</section>
<section id="part_83">
<h1>Part 8.3</h1>
</section>
<section id="part_84">
<h1>Part 8.4</h1>
</section>
<section id="part_91">
<h1>Part 9.1</h1>
</section>
<section id="part_92">
<h1>Part 9.2</h1>
</section>
<section id="part_93">
<h1>Part 9.3</h1>
</section>
</main>
</body>
</html>