Menu Bar

.idea/workspace.xml

@@ -51,7 +51,7 @@
       <option name="presentableId" value="Default" />
       <updated>1679674447095</updated>
       <workItem from="1679674448294" duration="3278000" />
-      <workItem from="1679754546660" duration="791000" />
+      <workItem from="1679754546660" duration="2767000" />
     </task>
     <servers />
   </component>

Style.css

@@ -17,12 +17,17 @@ li, a, button
     text-decoration: none;
 }
 
-@media only screen and (max-width: 10cm)
+@media only screen and (max-width: 18cm)
 {
     li, a, button
     {
         font-size: 25px;
     }
+
+    .hideOnMobile
+    {
+        display: none;
+    }
 }
 
 header
@@ -39,6 +44,14 @@ header
     list-style: none;
 }
 
+@media only screen and (max-width: 18cm)
+{
+    .navLinks
+    {
+        display: none;
+    }
+}
+
 .navLinks li
 {
     cursor: pointer;
@@ -116,8 +129,85 @@ body
     text-align: center;
 }
 
+@media only screen and (max-width: 18cm)
+{
+    .dropdown div ul li
+    {
+        margin-top: 5px;
+        margin-bottom: 5px;
+        text-align: center;
+        padding: 0;
+    }
+
+    .dropdown div ul li
+    {
+        margin-top: 5px;
+        margin-bottom: 5px;
+        text-align: center;
+        padding: 0;
+    }
+
+    .dropdown div
+    {
+        right: 150px;
+        border-radius: 50px 0px 0 50px;
+        top: 10px;
+    }
+
+}
+
 .dropdown:hover div ul, .dropdown:hover div
 {
     display: flex;
     flex-direction: column;
 }
+
+.mobileMenuButton
+{
+    background-color: rgba(0, 0, 0, 0);
+    display: none;
+}
+
+@media only screen and (max-width: 18cm)
+{
+    .mobileMenuButton
+    {
+        display: inline-block;
+    }
+}
+
+.mobileMenuButton svg
+{
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    right: 30px;
+    top: 30px
+}
+
+.mobileMenuDropDown
+{
+    display: none;
+    background-color: #24242A;
+}
+
+
+.mobileMenuDropDown li
+{
+    list-style: none;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: center;
+    padding: 20px;
+}
+
+
+.mobileMenuButton:hover .mobileMenuDropDown
+{
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    right: 0;
+    height: 100vh;
+    margin-top: 20px;
+}

index.html

@@ -15,8 +15,12 @@
                 Games
                 <div>
                     <ul>
-                        <li><button>FlufflParty</button></li>
+                        <li>
-                        <li><button>Coming Soon</button></li>
+                            <button>FlufflParty</button>
+                        </li>
+                        <li>
+                            <button>More</button>
+                        </li>
                     </ul>
                 </div>
             </li>
@@ -28,6 +32,35 @@
     <a href="#">
         <button>IO Game Studios</button>
     </a>
+
+    <div class="mobileMenuButton">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list"
+             viewBox="0 0 16 16">
+            <path fill-rule="evenodd"
+                  d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+        </svg>
+
+        <div class="mobileMenuDropDown">
+            <ul>
+                <li class="dropdown">
+                    Games
+                    <div>
+                        <ul>
+                            <li>
+                                <button>FlufflParty</button>
+                            </li>
+                            <li>
+                                <button>More</button>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li><a href="#">Quicklinks</a></li>
+                <li><a href="#">About Us</a></li>
+            </ul>
+        </div>
+    </div>
+
 </header>