Skip to content

Instantly share code, notes, and snippets.

@Phlow
Created August 22, 2022 19:41
Show Gist options
  • Save Phlow/3dde1dbc112d4f71de8504c9ba129eec to your computer and use it in GitHub Desktop.
Save Phlow/3dde1dbc112d4f71de8504c9ba129eec to your computer and use it in GitHub Desktop.
Simple Responsive Navigation #HTML #CSS #Javascript
<!doctype html>
<html lang="de">
<head>
<title>Simple Responsive Navigation</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<style>
body {
margin: 0;
font-family: sans-serif;
background: #1d2433;
color: #d7dce2;
}
ul.topnav {
list-style: none; /* Bulletpoints entfernen */
background-color: #2f3b54;
margin: 0; /* Abstand auf 0 */
padding: 0;
overflow: hidden;
/* Die overflow Eigenschaft legt fest, ob Inhalte aus einem Element hinausragen dürfen oder, ob Scrollbalken beim Überlauf zum Einsatz kommen. Mit hidden wird der Inhalt abgeschnitten und es werden keine Scrollbalken angezeigt. */
}
.topnav li a {
display: block;
float: left;
padding: .75rem 1rem;
text-decoration: none;
color: #f2f2f2;
}
.topnav a:hover {
background-color: #6679a4;
}
.topnav li.active a {
background-color: #ffae57;
}
.topnav .icon {
display: none; /* Menu und Icon in großer Ansicht entfernen */
}
@media screen and (max-width: 600px) {
.topnav li a {
display: none;
}
.topnav li.show a {
display: block;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav svg {
margin-bottom: -1px;
padding: 0 6px 0 0;
}
}
</style>
</head>
<body>
<nav>
<ul id="top--navigation" class="topnav">
<li class="show active">
<a href="#">Start</a>
</li>
<li>
<a href="#">Aktuelles</a>
</li>
<li>
<a href="#">Kontakt</a>
</li>
<li>
<a href="#">Unser Service</a>
</li>
<li>
<a href="#">Über Uns</a>
</li>
<li>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<svg width="14px" height="14px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#d7dce2" d="M32 96v64h448V96H32zm0 128v64h448v-64H32zm0 128v64h448v-64H32z"/></svg>
<strong>MENU</strong>
</a>
</li>
</ul>
</nav>
<div style="padding: 1rem;">
<h1>Responsive Topnav-Navigation</h1>
<p>Ändern Sie die Größe des Browserfensters, um zu sehen, wie es funktioniert.</p>
</div>
<script>
/* Umschalten zwischen Hinzufügen und Entfernen der Klasse "responsive" zu topnav, wenn der Benutzer auf das Icon/Menu klickt */
function myFunction() {
var x = document.getElementById("top--navigation");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment