InitialCommit

2026-05-12 13:17:44 +01:00
commit 4847365f99
18 changed files with 684 additions and 0 deletions
@@ -0,0 +1,140 @@
+/*the hamburgers container, lays them in a centred column to make sure they're even */
+.Hamburger{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    margin: 0 2vh;
+    width: 5vh;
+    height: 5vh;
+    cursor: pointer;
+}
+/*turns the hamburger shape into a cross when its enabled*/
+.Hamburger.Active{
+    .HamburgerSlab.First{
+        transform: rotate(45deg) translateX(1.125vh)translateY(0.9vh);
+    }
+    .HamburgerSlab.Middle{
+        color:transparent;
+        background-color:transparent;
+    }
+    .HamburgerSlab.Last{
+        transform: rotate(-45deg)  translateX(0.75vh)translateY(-0.75vh);
+    }
+}
+.HamburgerNavMenu.Active{
+    transform: translateX(0) translateY(0);
+}
+.Hamburger:hover{
+    .HamburgerSlab{
+        transform: scaleX(1.2);
+    }
+}
+.HamburgerSlab{
+    outline: none;
+    width:5vh ;
+    height: 0.75vh;
+    margin-top:0.25vh;
+    margin-bottom: 0.25vh;
+    transition: 0.5s;
+    border-radius: 0 !important;
+}
+/*gives each hamburger bar a separate colour*/
+.Hamburger{
+    /*you can reference two consecutive classes for styling
+    so for example here, the hamburger slab span element has
+    class="HamburgerSlab First" or class="HamburgerSlab Middle"
+    and you can reference them individually
+     */
+    .HamburgerSlab.First{
+        color:slategray;
+        background-color:slategray;
+    }
+    .HamburgerSlab.Middle{
+        color:dimgrey;
+        background-color:dimgray;
+    }
+    .HamburgerSlab.Last{
+        color:darkslategray;
+        background-color:darkslategray;
+    }
+}
+
+/*this is for only mobile or 4:3 and lower screen aspect ratios*/
+@media only screen and (max-aspect-ratio: 12/9) {
+    /* drop down menu is a window not in the hotbar */
+    .HamburgerNavMenu {
+        padding: 0.5vh;
+        position: fixed;
+        display: flex;
+        top: 9vh;
+        right: 0;
+        transform: translateX(0) translateY(-100vh);
+        transition: 0.25s;
+        justify-content: flex-start;
+        flex-direction: column;
+        align-items: flex-start;
+        align-content: flex-start;
+    }
+    /* ::After is a pseudo element, it allows us to put the little point arrow */
+    .HamburgerNavMenu::After {
+        content: '';
+        position: absolute; /* if the parent element is positioned as relative, absolute defines position relative to the parent*/
+        right: 15%;
+        bottom: 100%;
+        width: 0;
+        height: 0;
+        border-left: 1.2vh solid transparent;
+        border-right: 1.2vh solid transparent;
+        border-bottom: 1.7vh solid black;
+        clear: both;
+    }
+}
+
+/*this is only for desktop screen aspect ratios */
+@media only screen and (min-aspect-ratio: 12/9) {
+    /*positions hamburger elements on hotbar when open
+    to always have a window style, move whats inside the @media only screen and (max-aspect-ratio: 12/9)
+    outside of the query and delete the @media boxes*/
+    .HamburgerNavMenu {
+        padding: 0.5vh;
+        position: relative;
+        display: flex;
+        transform: translateX(100vw) translateY(0);
+        transition: 0.25s;
+        justify-content: left;
+        flex-direction: row;
+        align-items: center;
+        align-content: center;
+    }
+}
+
+/*this isnt part of the hamburger itself but its needed for laying out the buttons horizontally*/
+/* sets the alignment of an element to be horizontal, flexbox allows dynamic resizing */
+.HFlexBox{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+/*this isnt part of the hamburger menu but its necessary for the buttons inside it*/
+.NavIcon:hover{
+    transform: scale(1.1);
+}
+.NavIcon{
+    margin:0 0.5vh;
+    width: 4vh;
+    height: 4vh;
+    transition: 0.5s;
+}
+.NavButton{
+    font-size: 3vh;
+    height: 6vh;
+    min-width: 6vh;
+    font-family: Arial,serif;
+    font-weight: bolder;
+    text-align: center;
+    margin: 0 1vh; /*this sets the horizontal margin to 1% of the viewport height but the vertical margin to nothing*/
+}
@@ -0,0 +1,16 @@
+<head>
+    <link rel="stylesheet" href="Hamburger.css">
+</head>
+<div class="HamburgerWrapper HFlexBox">
+    <div  id="HamburgerNavContent" class="HamburgerNavMenu">
+        <button  tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/shopping-cart-line.svg" style="">My Cart</button>
+        <button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/gallery.svg" style="">Gallery</button>
+        <button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/about.svg" style="">About Us</button>
+    </div>
+    <button id="HamburgerNav" class="Hamburger VFlexBox Center" onclick="ExpandHamburgerMenu();">
+        <span class="HamburgerSlab First"></span>
+        <span class="HamburgerSlab Middle"></span>
+        <span class="HamburgerSlab Last"></span>
+    </button>
+</div>
+<script src="Hamburger.js"></script>
@@ -0,0 +1,16 @@
+var hamburger = document.getElementById("HamburgerNav");
+var hamburgerContent = document.getElementById("HamburgerNavContent");
+function Setup(){
+    hamburger = document.getElementById("HamburgerNav");
+    hamburgerContent = document.getElementById("HamburgerNavContent");
+}
+function  ExpandHamburgerMenu(){
+    if(hamburger.classList.contains("Active")){
+        hamburger.classList.remove("Active");
+        hamburgerContent.classList.remove("Active");
+    }
+    else {
+        hamburger.classList.add("Active");
+        hamburgerContent.classList.add("Active");
+    }
+}