navbar.css + dropdown-navbar

css/navbar.css

@@ -0,0 +1,94 @@
+.nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #fff;
+    padding: 0 1rem;
+}
+.nav__left,
+.nav__right {
+    display: flex;
+    align-items: center;
+}
+
+.nav__logo img {
+    height: 3rem;
+}
+
+.nav__center {
+    display: flex;
+    align-items: center;
+}
+
+.nav__item {
+    position: relative;
+    margin: 0 0.5rem;
+}
+
+.nav__dropdown-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-weight: 600;
+}
+
+.nav__dropdown-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: #f9f9f9;
+    min-width: 12rem;
+    box-shadow: 0 2px 5px rgba(0,0,0,.15);
+    padding: 0.5rem 0;
+}
+
+.nav__link,
+.nav__dropdown-menu a {
+    padding: 0.5rem 1rem;
+    color: #333;
+    text-decoration: none;
+}
+
+.nav__link:not(:last-child)::after,
+.nav__dropdown:not(:last-child)::after {
+    content: '|';
+    margin: 0 0.75rem;
+    color: #ccc;
+}
+
+/* CSS von https://responsivenavigation.net/examples/simple-toggle/ */
+/*
+.nav { width:100%; background-color: #fff; border-bottom: 1px solid #ccc; }
+ul.simple-toggle { list-style: none; padding: 0px; margin: 0px; font-weight: bold; text-align: center; }
+ul.simple-toggle li { display: inline-block; text-align: left; }
+ul.simple-toggle li a { display: block; padding: 15px 10px; text-decoration: none; color: #444; }
+ul.simple-toggle li a:hover { background-color: #ccc; }
+
+.anchor-link { display: none; text-align: right; padding: 0 1em 0; text-align: center; padding: 10px 15px; color: #fff; background-color: #0084B4; text-decoration: none; margin: 3px; float: right; }
+#mobile-nav { display:none; }
+
+@media (max-width:48.000em){
+
+    ul.simple-toggle { display: none; }
+    .anchor-link, #mobile-nav { display: block; }
+
+    ul.open {
+        background-color: #F4F4F4;
+        box-shadow: 2px 2px 3px #444444;
+        display: block;
+        list-style: none outside none;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        right: 5px;
+        top: 100%;
+        width: 70%;
+        z-index: 500;
+    }
+    ul.open li { display: block; list-style: none; text-align: center; }
+    ul.open li a { display: block; padding: 20px 10px; border-bottom: 1px solid #ccc; text-decoration: none; }
+    ul.open li a:hover { background-color: #ccc; color: #fff; }
+
+}
+*/

includes/navbar.php

@@ -1,7 +1,7 @@
 <!--
 Globales Menü, wird via PHP später in alle Seiten eingebunden
 -->
-<nav style="background:#808080; height: 60px;">
+<nav class="nav">
     <div style="float:left; text-align: center;">
         <a href="index.php">
 	        <img src="images/logo.png" alt="" style="height: 44px;">

index.php

@@ -10,6 +10,7 @@
     <meta name="description" content="EduForge">
     <meta name="author" content="Niklas Ortmann">
     <link rel="stylesheet" href="css/main.css" />
+    <link rel="stylesheet" href="css/navbar.css" />
     <title>EduForge</title>
 </head>