diff options
| author | xengineering <me@xengineering.eu> | 2021-09-05 13:49:08 +0200 |
|---|---|---|
| committer | xengineering <me@xengineering.eu> | 2021-09-05 13:52:40 +0200 |
| commit | 437bf22078af95f4576fec452bcbc88c1a9a09ec (patch) | |
| tree | 0803469f53ce0c3b1c6ff8cb7ff885a99db05956 /html/template.html | |
| parent | f58bf0443d71f7476c7fdb7a6e1dc9c3d61da412 (diff) | |
| download | libweb-437bf22078af95f4576fec452bcbc88c1a9a09ec.tar libweb-437bf22078af95f4576fec452bcbc88c1a9a09ec.tar.zst libweb-437bf22078af95f4576fec452bcbc88c1a9a09ec.zip | |
Implement Cards and State-based Menu
Diffstat (limited to 'html/template.html')
| -rw-r--r-- | html/template.html | 58 |
1 files changed, 51 insertions, 7 deletions
diff --git a/html/template.html b/html/template.html index eaaf9e7..080c07d 100644 --- a/html/template.html +++ b/html/template.html @@ -19,8 +19,8 @@ <body> <nav> - <button onclick=toggleMenu()>MENU</button> - <a href="https://xengineering.eu">xengineering.eu</a> + <button id="menu-button" onclick=toggleMenu()>MENU</button> + <a class="menu-anchor" href="https://xengineering.eu">xengineering.eu</a> </nav> <main> @@ -36,21 +36,65 @@ print("This is just some example code!") </code></pre> - <p>Sometimes it is quite nice to put things into containers:</p> + <p>Sometimes it is quite nice to put things into cards:</p> + <div class="card"> + <h3>This is a Card</h3> + <p>Cards are very good.</p> + </div> + + <p>It is also possible to put cards into an anchor tag:</p> <a href="https://xengineering.eu"> - <div href="https://xengineering.eu"> - <h3>This is a Container</h3> - <p>Containers are very good.</p> + <div class="card"> + <h3>This is a Card inside an Anchor</h3> + <p>It is a link!</p> </div> </a> </main> <script> + // define menu state + const MenuState = { + Desktop: "Desktop", + MobileCollapsed: "MobileCollapsed", + MobileExpanded: "MobileExpanded" + } + var state; + + // init menu state and add mediaChange handler + var isMobile = window.matchMedia("(max-width: 767px)"); + mediaChange(isMobile); + isMobile.addListener(mediaChange) + + function mediaChange(isMobile) { + if (isMobile.matches) { + state = MenuState.MobileCollapsed; + handleState(state); + } else { + state = MenuState.Desktop; + handleState(state); + } + } + function toggleMenu() { + switch (state) { + case MenuState.MobileCollapsed: + state = MenuState.MobileExpanded; + handleState(state); + break; + case MenuState.MobileExpanded: + state = MenuState.MobileCollapsed; + handleState(state); + break; + } + } + + function handleState(state) { + console.log("State is now " + state) + var items = document.getElementsByTagName("a"); for(var i=0; i<items.length; i++) { if (items[i].parentNode.tagName == "NAV") { - if (items[i].style.display == "block") { + if (state == MenuState.MobileCollapsed) { items[i].style.display = "none"; } else { items[i].style.display = "block"; |