public_html/css/hpr.css

@@ -91,7 +91,7 @@ body > nav ul {
 	margin: 0;
 	padding: 0.25rem;
 }
-body > nav ul li {
+body > nav ul li {	
 	display: inline-block;
 	background-color: inherit;
 	color: inherit;
@@ -513,3 +513,73 @@ fieldset > input {
 		flex: 1;
 	}
 }
+
+@media (max-width: 480px) {
+	#main_menu {
+		display: none;
+		position: absolute;
+		top: 100%;
+		left: 0;
+		width: 100%;
+		z-index: 1000;
+	}
+
+	.hamburger {
+		display: block ! important;
+	}
+
+		#main_menu.is_open {
+		display: block;
+		position: relative;	
+		left: 0;
+		width: 100%;
+	}
+
+	#main_menu.is_open ul {
+		width: fit-content;
+		margin: 0 auto;
+	}
+
+	#main_menu.is_open ul li {
+		display: block;
+		margin-bottom: 0.5rem;
+	}
+
+}
+
+.hamburger {
+	float: right;
+	background-color: var(--background-secondary);
+	border: none;
+	display: none;
+}
+
+.icon {
+	display: block;
+  mask-size: contain;
+  background-color: var(--link-secondary);
+  height: var(--font-size-default);
+  padding: 0.25rem;
+  border: solid 1px var(--link-secondary);
+  transition: background-color 0.2s ease;
+}
+
+.icon:hover {
+	background-color: var(--link-secondary-hover);
+}
+
+.hamburger_icon {
+	display: block;
+}
+
+.hamburger_icon.is_open {
+	display: none ! important;
+}
+
+.close_icon {
+	display: none;
+}
+
+.close_icon.is_open {
+	display: block ! important;
+}

public_html/images/icons/close-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"/></svg>

public_html/images/icons/menu-line.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z"/></svg>

public_html/js/menu.js

@@ -0,0 +1,27 @@
+const hamburger = document.querySelector('.hamburger');
+const mainNav = document.querySelector('#main_menu');
+const hamburgerIcon = document.querySelector('.hamburger_icon');
+const closeIcon = document.querySelector('.close_icon');
+
+hamburger.addEventListener('click', function() {
+    const isOpen = this.getAttribute('aria-expanded') === 'true';
+
+    this.setAttribute('aria-expanded', !isOpen);
+    
+    mainNav.classList.toggle('is_open');
+    hamburgerIcon.classList.toggle('is_open');
+    closeIcon.classList.toggle('is_open');
+
+    if (!isOpen) {
+        const firstLink = mainNav.querySelector('a');
+        if (firstLink) firstLink.focus();
+    }
+});
+
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape' && mainNav.classList.contains('is_open')) {
+        mainNav.classList.remove('is_open');
+        hamburger.setAttribute('aria-expanded', 'false');
+        hamburger.focus();
+    }
+});

templates/page.tpl.html

@@ -40,6 +40,10 @@
    <a href="<!--% absolute_path(baseurl) %-->sitemap.html#main_content">Site Map</a>
    - <a href="#main_content">skip to main content</a>
 </nav>
+<button type="button" id="hamburger-menu" class="hamburger" aria-controls="main-navigation" aria-expanded="false" aria-label="Toggle navigation menu">
+  <i aria-hidden="true" class="icon hamburger_icon" style="mask: url('<!--% absolute_path(baseurl) %-->images/icons/menu-line.svg') no-repeat center;"></i>
+  <i aria-hidden="true" class="icon close_icon" style="mask: url('<!--% absolute_path(baseurl) %-->images/icons/close-line.svg') no-repeat center;"></i>
+</button>
 <nav id="main_menu" class="menu" role="navigation">
 <!--% INCLUDE "navigation-main.tpl.html" %-->
 </nav>
@@ -77,5 +81,6 @@
  <div id="generated_by">This page was <a href="https://repo.anhonesthost.net/HPR/hpr_generator">generated</a> by <a href="mailto:<!--% generator_email %-->"><!--% generator_name %--></a> at <time dateTime="<!--% format_iso8601_date(date.now) %-->"><!--% format_feed_date(date.now) %--></time></em>
  </div>
 </footer>
+<script src="/js/menu.js"></script>
 </body>
 </html>