Hallo. Ich hab n Schulprojekt und soll eine Seite erstellen. An sich recht 'einfach', wenn man nur das nötigste reinpackt, aber Ich möchte schon dass es mir gefällt, da ich aber noch ein blutiger Anfänger bin, fällt mir das natürlich schwer.
Ich hänge noch ganz am Anfang an der Navigation.
Was ich möchte sind diese Dinge für die Navigation:
Wenn ich auf einen Bereich klicke, soll der aktive Bereich in der Navigation unterstrichen sein.
Wenn ich über ein Wort im Navigationsbereich hover, soll es die Farbe ändern.
Wenn ich runter scrolle, soll die Navigationsbar nicht sichtbar sein, sobald man aber minimal hochscrollt, soll sie wieder sichtbar sein.
Also an sich wie auf dieser Seite https://demos.pixelgrade.com/rosa/ nur halt das mit dem scrollen fehlt da.
Mein jetziger Code sieht so aus: (Vieles hab ich aber ausm Internet und weiß dementsprechend auch nicht wirklich, was das alles ist lol)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Citrøn dream</title>
<meta name="description" content="My template">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- style -->
<style>
<link rel="stylesheet" href="//cdn.jsdelivr.net/normalize/3.0.3/normalize.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans">
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.footer {
position:sticky;
text-align: right;
background: #ddd;
margin-top: 20px;
}
.footer p {
float: left;
margin: 0;
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#Zitrone">Zitrone</a>
<a href="#Café">Café</a>
<a href="#Kontakt">Kontakt</a>
<a href="#Kochabend">Kochabend</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
</div>
<div class="footer">
<a href="#Impressum.html">Impressum</a>
<p>© 2018 Citrøn dream</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>Kennt ihr Seiten, die mir bei meinem "Problem" helfen oder könnt ihr mir selber sagen, was ich am Code alles ändern muss um meine Wünsche einzubringen?
