← back to Fabricfriday
hamburger nav: apply canonical pattern from sister-site fleet
cacc63620f4845b3de2b6d2f2a61c55998172ef1 · 2026-05-10 21:40:37 -0700 · Steve Abrams
Files touched
Diff
commit cacc63620f4845b3de2b6d2f2a61c55998172ef1
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Sun May 10 21:40:37 2026 -0700
hamburger nav: apply canonical pattern from sister-site fleet
---
public/index.html | 102 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 102 insertions(+)
diff --git a/public/index.html b/public/index.html
index 5d23f23..9bcd634 100644
--- a/public/index.html
+++ b/public/index.html
@@ -497,5 +497,107 @@
}
});
</script>
+<!-- DW-HAMBURGER-NAV v1 (canonical 2026-05-10) -->
+<style id="dw-hamburger-styles">
+ /* Canonical hamburger nav — always visible top-right, all viewports.
+ Standing rule (Steve, 2026-05-08): hamburger is the primary nav. */
+ .dw-burger-btn {
+ position: fixed; top: 18px; right: 18px; z-index: 9999;
+ width: 44px; height: 44px;
+ background: rgba(20,20,20,0.78); color: #f5f1e8;
+ backdrop-filter: blur(8px) saturate(140%);
+ -webkit-backdrop-filter: blur(8px) saturate(140%);
+ border: 1px solid rgba(245,241,232,0.18); border-radius: 50%;
+ cursor: pointer; padding: 0;
+ display: flex; flex-direction: column; align-items: center; justify-content: center;
+ gap: 4px;
+ box-shadow: 0 6px 20px rgba(0,0,0,0.35);
+ transition: background 200ms, transform 200ms;
+ }
+ .dw-burger-btn:hover { background: rgba(20,20,20,0.92); }
+ .dw-burger-btn span {
+ display: block; width: 20px; height: 1.5px; background: currentColor;
+ transition: transform 220ms, opacity 220ms;
+ }
+ .dw-burger-btn[aria-expanded="true"] span:nth-child(1) {
+ transform: translateY(5.5px) rotate(45deg);
+ }
+ .dw-burger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
+ .dw-burger-btn[aria-expanded="true"] span:nth-child(3) {
+ transform: translateY(-5.5px) rotate(-45deg);
+ }
+ .dw-burger-panel {
+ position: fixed; top: 72px; right: 18px; z-index: 9998;
+ min-width: 240px; max-width: 88vw;
+ background: rgba(15,15,15,0.96);
+ backdrop-filter: blur(14px) saturate(140%);
+ -webkit-backdrop-filter: blur(14px) saturate(140%);
+ border: 1px solid rgba(245,241,232,0.12);
+ border-radius: 14px;
+ box-shadow: 0 18px 50px rgba(0,0,0,0.55);
+ padding: 10px 0;
+ display: none;
+ font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
+ }
+ .dw-burger-panel.open { display: block; }
+ .dw-burger-panel a,
+ .dw-burger-panel button {
+ display: block; width: 100%;
+ padding: 13px 22px;
+ color: #f5f1e8 !important;
+ background: transparent; border: 0; cursor: pointer;
+ text-decoration: none !important;
+ font-size: 15px; font-weight: 400;
+ text-align: left;
+ letter-spacing: 0;
+ border-bottom: 1px solid rgba(245,241,232,0.06);
+ transition: background 160ms, color 160ms;
+ box-sizing: border-box;
+ }
+ .dw-burger-panel a:last-child,
+ .dw-burger-panel button:last-child { border-bottom: 0; }
+ .dw-burger-panel a:hover,
+ .dw-burger-panel button:hover {
+ background: rgba(245,241,232,0.06);
+ color: #ffffff !important;
+ }
+ @media (max-width: 480px) {
+ .dw-burger-btn { top: 12px; right: 12px; width: 40px; height: 40px; }
+ .dw-burger-panel { top: 62px; right: 12px; }
+ }
+ /* Avoid double-print on sites already adopting a top-of-page header
+ that overlaps z-index. Reserve safe space near top-right. */
+</style>
+<button type="button" class="dw-burger-btn" id="dwBurgerBtn"
+ aria-label="Toggle menu" aria-controls="dwBurgerPanel"
+ aria-expanded="false">
+ <span></span><span></span><span></span>
+</button>
+<nav class="dw-burger-panel" id="dwBurgerPanel" aria-label="Primary">
+ <a href="/">FabricFriday</a>
+ <a href="#picks">Archive</a>
+ <a href="#subscribe">Subscribe</a>
+ <a href="https://designerwallcoverings.com">Shop DW</a>
+ <a href="mailto:info@fabricfriday.com">Contact</a>
+</nav>
+<script>
+(function(){
+ var btn = document.getElementById('dwBurgerBtn');
+ var panel = document.getElementById('dwBurgerPanel');
+ if (!btn || !panel) return;
+ function close(){ panel.classList.remove('open'); btn.setAttribute('aria-expanded','false'); }
+ function toggle(){
+ var open = panel.classList.toggle('open');
+ btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+ }
+ btn.addEventListener('click', function(e){ e.stopPropagation(); toggle(); });
+ document.addEventListener('click', function(e){
+ if (panel.classList.contains('open') && !panel.contains(e.target) && e.target !== btn) close();
+ });
+ document.addEventListener('keydown', function(e){ if (e.key === 'Escape') close(); });
+})();
+</script>
+<!-- /DW-HAMBURGER-NAV v1 -->
+
</body>
</html>
← e860975 snapshot before hamburger nav rollout
·
back to Fabricfriday
·
add rel="noreferrer" to all target="_blank" external links ae203c7 →