diff --git a/public/internal/footer.php b/public/internal/footer.php index 59ba39d44d39b4e286d1ad6fffce18f12e149d48..bad543db73205d028ffedb88ab414b9025a80e60 100644 --- a/public/internal/footer.php +++ b/public/internal/footer.php @@ -54,6 +54,7 @@ function getFooter(){ checkHide(); </script> <script src="/js/includeHTML.js"></script> + <script src="/js/burgerMenu.js"></script> </body> </html> EOF); diff --git a/public/internal/menue.php b/public/internal/menue.php index abca13362251a0cd33e3f526bb950df42098604a..e4d79e8ff454576c39cdd098ec43610bf3b7ee09 100644 --- a/public/internal/menue.php +++ b/public/internal/menue.php @@ -5,32 +5,39 @@ function getMenu($page){ $status = $page == "status" ? "class=\"menueSelected\"" : ""; return <<<EOF - <a href="/" $startpage>Startseite</a> - <div class="dropdown"> - <a href="#" $projects>Projekte</a> - <div class="dropdown-content"> - <a href="/Projekte/proxdroid.php">Proxdroid - Proxmox Android App</a><br> - <a href="/Projekte/websitecloner.php">Website Cloner</a><br> - <a href="/Projekte/youtubedownloader.php">YouTube Downloader</a><br> - <a href="/Projekte/mqttpush.php">MQTT Push</a><br> - <a href="/Projekte/gclogLink.php">Geocaching Premium Log link Generator</a><br> - <a href="/Projekte/ledtisch1.php">LED Tisch Version 1</a><br> - <a href="/Projekte/ledtisch2.php">LED Tisch Version 2</a><br> - <a href="/Projekte/regensensor.php">Regensensor</a><br> - <a href="/Projekte/blitzortung.php">Blitzortung</a><br> - <a href="/Projekte/insecam.php">Insecam</a><br> - <a href="/Projekte/URLkuerzer1.php">URL Kürzer V1</a><br> - <a href="/Projekte/URLkuerzer2.php">URL Kürzer V2</a><br> - <a href="/Projekte/smartmirror.php">Smart Mirror</a><br> - <a href="/Projekte/snowboy.php">Installation von Snowboy</a><br> - </div> + <div id="burgerMenu" onclick="handleBurger()"> + <div class="bar1"></div> + <div class="bar2"></div> + <div class="bar3"></div> </div> - <a href="//kuerzer.ml">URL Kürzer</a> - <div class="dropdown"> - <a href="#" $status>Status</a> - <div class="dropdown-content"> - <a href="//status.jonasled.de">Server</a><br> - <a href="/ntpstatus.php">NTP Server</a><br> + <div id="mainMenuContainer"> + <a href="/" $startpage>Startseite</a> + <div class="dropdown"> + <a href="#" $projects>Projekte</a> + <div class="dropdown-content"> + <a href="/Projekte/proxdroid.php">Proxdroid - Proxmox Android App</a><br> + <a href="/Projekte/websitecloner.php">Website Cloner</a><br> + <a href="/Projekte/youtubedownloader.php">YouTube Downloader</a><br> + <a href="/Projekte/mqttpush.php">MQTT Push</a><br> + <a href="/Projekte/gclogLink.php">Geocaching Premium Log link Generator</a><br> + <a href="/Projekte/ledtisch1.php">LED Tisch Version 1</a><br> + <a href="/Projekte/ledtisch2.php">LED Tisch Version 2</a><br> + <a href="/Projekte/regensensor.php">Regensensor</a><br> + <a href="/Projekte/blitzortung.php">Blitzortung</a><br> + <a href="/Projekte/insecam.php">Insecam</a><br> + <a href="/Projekte/URLkuerzer1.php">URL Kürzer V1</a><br> + <a href="/Projekte/URLkuerzer2.php">URL Kürzer V2</a><br> + <a href="/Projekte/smartmirror.php">Smart Mirror</a><br> + <a href="/Projekte/snowboy.php">Installation von Snowboy</a><br> + </div> + </div> + <a href="//kuerzer.ml">URL Kürzer</a> + <div class="dropdown"> + <a href="#" $status>Status</a> + <div class="dropdown-content"> + <a href="//status.jonasled.de">Server</a><br> + <a href="/ntpstatus.php">NTP Server</a><br> + </div> </div> </div> EOF; diff --git a/scss/_mobile.scss b/scss/_mobile.scss index dbec2aa58453f2bbe082a538203b54b4914232ed..451a6275b5470c21a1dcb0ae7860a07b591ed900 100644 --- a/scss/_mobile.scss +++ b/scss/_mobile.scss @@ -1,3 +1,31 @@ +#burgerMenu { + position: absolute; + top: 10px; + right: 10px; + display: none; + cursor: pointer; + + .bar1, .bar2, .bar3 { + width: 35px; + height: 5px; + background-color: $text-color; + margin: 6px 0; + transition: 0.4s; + } + &.change .bar1 { + -webkit-transform: rotate(-45deg) translate(-9px, 6px); + transform: rotate(-45deg) translate(-9px, 6px); + } + + &.change .bar2 {opacity: 0;} + + &.change .bar3 { + -webkit-transform: rotate(45deg) translate(-8px, -8px); + transform: rotate(45deg) translate(-8px, -8px); + } +} + + @media only screen and (max-width: 600px) { #homeImage{ float: none; @@ -30,4 +58,44 @@ article{ width: 95%; } + + #burgerMenu{ + display: inline-block; + } + + .visible{ + display: inline-grid !important; + } + + #mainMenuContainer{ + display: none; + + text-align: left; + background-color: $back-color-3; + width: 100%; + + a { + text-align: left; + border-bottom: #111721 solid 2px; + width: 100%; + } + + .dropdown-content{ + display: block; + position: relative; + left: 0; + transform: none; + width: 100%; + a{ + padding-left: 40px; + } + } + } + #mainMenu{ + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + } } \ No newline at end of file diff --git a/ts/burgerMenu.ts b/ts/burgerMenu.ts new file mode 100644 index 0000000000000000000000000000000000000000..bb7f75e6c646ac15e097774d15aa6b81fcd277d0 --- /dev/null +++ b/ts/burgerMenu.ts @@ -0,0 +1,5 @@ +function handleBurger(){ + (<HTMLElement> document.getElementById("burgerMenu")).classList.toggle("change"); + (<HTMLElement> document.getElementById("mainMenuContainer")).classList.toggle("visible"); + +} \ No newline at end of file