← back to Beverlyhillsvideos
nav: collapse all tabs into upper-left hamburger → full-screen luxury drawer; Home leads, Map moved to end
d04a7464cf6f23bc185d886b10caa3ee99348f02 · 2026-08-05 14:18:11 -0700 · Steve Abrams
Files touched
M build.mjsM public/index.htmlM public/map.htmlM public/posts/beverly-hills-nightlife.htmlM public/posts/beverly-hills-real-estate.htmlM public/posts/beverly-hills-wellness-spas.htmlM public/posts/dining-in-beverly-hills.htmlM public/posts/rodeo-drive-guide.htmlM public/posts/staying-fit-beverly-hills.htmlM public/posts/things-to-do-beverly-hills.htmlM public/privacy.htmlM public/style.cssM public/videos.html
Diff
commit d04a7464cf6f23bc185d886b10caa3ee99348f02
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed Aug 5 14:18:11 2026 -0700
nav: collapse all tabs into upper-left hamburger → full-screen luxury drawer; Home leads, Map moved to end
---
build.mjs | 32 ++++++++++++++++++++-------
public/index.html | 30 +++++++++++++++++++------
public/map.html | 30 +++++++++++++++++++------
public/posts/beverly-hills-nightlife.html | 30 +++++++++++++++++++------
public/posts/beverly-hills-real-estate.html | 30 +++++++++++++++++++------
public/posts/beverly-hills-wellness-spas.html | 30 +++++++++++++++++++------
public/posts/dining-in-beverly-hills.html | 30 +++++++++++++++++++------
public/posts/rodeo-drive-guide.html | 30 +++++++++++++++++++------
public/posts/staying-fit-beverly-hills.html | 30 +++++++++++++++++++------
public/posts/things-to-do-beverly-hills.html | 30 +++++++++++++++++++------
public/privacy.html | 30 +++++++++++++++++++------
public/style.css | 15 +++++++++++++
public/videos.html | 30 +++++++++++++++++++------
13 files changed, 292 insertions(+), 85 deletions(-)
diff --git a/build.mjs b/build.mjs
index 97a3aa0..3998557 100644
--- a/build.mjs
+++ b/build.mjs
@@ -118,16 +118,32 @@ const videoEmbed = (v) => {
const nav = `
<header class="site-head">
<div class="wrap">
+ <button class="hamb" aria-label="Open menu" aria-expanded="false" onclick="toggleNav(this)"><span></span><span></span><span></span></button>
<a class="brand" href="/">BEVERLY HILLS<span>VIDEOS</span></a>
- <nav>
- <a href="/map.html">Map</a>
- <a href="/videos.html">Videos</a>
- <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
- <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
- <a href="/posts/dining-in-beverly-hills.html">Dining</a>
- </nav>
</div>
- </header>`;
+ </header>
+ <div class="drawer" id="nav" aria-hidden="true">
+ <button class="drawer-x" aria-label="Close menu" onclick="toggleNav()">×</button>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/videos.html">Videos</a>
+ <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
+ <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
+ <a href="/posts/things-to-do-beverly-hills.html">City Guide</a>
+ <a href="/posts/dining-in-beverly-hills.html">Dining</a>
+ <a href="/posts/beverly-hills-nightlife.html">Nightlife</a>
+ <a href="/map.html">Map</a>
+ </nav>
+ </div>
+ <script>
+ function toggleNav(btn){
+ var d=document.getElementById('nav'), open=d.classList.toggle('open');
+ document.body.style.overflow=open?'hidden':'';
+ d.setAttribute('aria-hidden', open?'false':'true');
+ var h=document.querySelector('.hamb'); if(h) h.setAttribute('aria-expanded', open?'true':'false');
+ if(open) h&&h.classList.add('x'); else h&&h.classList.remove('x');
+ }
+ </script>`;
const footer = `
<footer class="site-foot">
diff --git a/public/index.html b/public/index.html
index 7c2f7ff..d412fb2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,16 +20,32 @@
<header class="site-head">
<div class="wrap">
+ <button class="hamb" aria-label="Open menu" aria-expanded="false" onclick="toggleNav(this)"><span></span><span></span><span></span></button>
<a class="brand" href="/">BEVERLY HILLS<span>VIDEOS</span></a>
- <nav>
- <a href="/map.html">Map</a>
- <a href="/videos.html">Videos</a>
- <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
- <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
- <a href="/posts/dining-in-beverly-hills.html">Dining</a>
- </nav>
</div>
</header>
+ <div class="drawer" id="nav" aria-hidden="true">
+ <button class="drawer-x" aria-label="Close menu" onclick="toggleNav()">×</button>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/videos.html">Videos</a>
+ <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
+ <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
+ <a href="/posts/things-to-do-beverly-hills.html">City Guide</a>
+ <a href="/posts/dining-in-beverly-hills.html">Dining</a>
+ <a href="/posts/beverly-hills-nightlife.html">Nightlife</a>
+ <a href="/map.html">Map</a>
+ </nav>
+ </div>
+ <script>
+ function toggleNav(btn){
+ var d=document.getElementById('nav'), open=d.classList.toggle('open');
+ document.body.style.overflow=open?'hidden':'';
+ d.setAttribute('aria-hidden', open?'false':'true');
+ var h=document.querySelector('.hamb'); if(h) h.setAttribute('aria-expanded', open?'true':'false');
+ if(open) h&&h.classList.add('x'); else h&&h.classList.remove('x');
+ }
+ </script>
<section class="hero home-hero">
<div class="wrap">
diff --git a/public/map.html b/public/map.html
index aa737c2..90e38c1 100644
--- a/public/map.html
+++ b/public/map.html
@@ -20,16 +20,32 @@
<header class="site-head">
<div class="wrap">
+ <button class="hamb" aria-label="Open menu" aria-expanded="false" onclick="toggleNav(this)"><span></span><span></span><span></span></button>
<a class="brand" href="/">BEVERLY HILLS<span>VIDEOS</span></a>
- <nav>
- <a href="/map.html">Map</a>
- <a href="/videos.html">Videos</a>
- <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
- <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
- <a href="/posts/dining-in-beverly-hills.html">Dining</a>
- </nav>
</div>
</header>
+ <div class="drawer" id="nav" aria-hidden="true">
+ <button class="drawer-x" aria-label="Close menu" onclick="toggleNav()">×</button>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/videos.html">Videos</a>
+ <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
+ <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
+ <a href="/posts/things-to-do-beverly-hills.html">City Guide</a>
+ <a href="/posts/dining-in-beverly-hills.html">Dining</a>
+ <a href="/posts/beverly-hills-nightlife.html">Nightlife</a>
+ <a href="/map.html">Map</a>
+ </nav>
+ </div>
+ <script>
+ function toggleNav(btn){
+ var d=document.getElementById('nav'), open=d.classList.toggle('open');
+ document.body.style.overflow=open?'hidden':'';
+ d.setAttribute('aria-hidden', open?'false':'true');
+ var h=document.querySelector('.hamb'); if(h) h.setAttribute('aria-expanded', open?'true':'false');
+ if(open) h&&h.classList.add('x'); else h&&h.classList.remove('x');
+ }
+ </script>
<section class="hero home-hero vids-hero">
<div class="wrap">
diff --git a/public/posts/beverly-hills-nightlife.html b/public/posts/beverly-hills-nightlife.html
index 1b860dc..529b1ac 100644
--- a/public/posts/beverly-hills-nightlife.html
+++ b/public/posts/beverly-hills-nightlife.html
@@ -20,16 +20,32 @@
<header class="site-head">
<div class="wrap">
+ <button class="hamb" aria-label="Open menu" aria-expanded="false" onclick="toggleNav(this)"><span></span><span></span><span></span></button>
<a class="brand" href="/">BEVERLY HILLS<span>VIDEOS</span></a>
- <nav>
- <a href="/map.html">Map</a>
- <a href="/videos.html">Videos</a>
- <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
- <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
- <a href="/posts/dining-in-beverly-hills.html">Dining</a>
- </nav>
</div>
</header>
+ <div class="drawer" id="nav" aria-hidden="true">
+ <button class="drawer-x" aria-label="Close menu" onclick="toggleNav()">×</button>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/videos.html">Videos</a>
+ <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
+ <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
+ <a href="/posts/things-to-do-beverly-hills.html">City Guide</a>
+ <a href="/posts/dining-in-beverly-hills.html">Dining</a>
+ <a href="/posts/beverly-hills-nightlife.html">Nightlife</a>
+ <a href="/map.html">Map</a>
+ </nav>
+ </div>
+ <script>
+ function toggleNav(btn){
+ var d=document.getElementById('nav'), open=d.classList.toggle('open');
+ document.body.style.overflow=open?'hidden':'';
+ d.setAttribute('aria-hidden', open?'false':'true');
+ var h=document.querySelector('.hamb'); if(h) h.setAttribute('aria-expanded', open?'true':'false');
+ if(open) h&&h.classList.add('x'); else h&&h.classList.remove('x');
+ }
+ </script>
<article class="post">
<div class="wrap">
diff --git a/public/posts/beverly-hills-real-estate.html b/public/posts/beverly-hills-real-estate.html
index cf924e1..40c5cfb 100644
--- a/public/posts/beverly-hills-real-estate.html
+++ b/public/posts/beverly-hills-real-estate.html
@@ -20,16 +20,32 @@
<header class="site-head">
<div class="wrap">
+ <button class="hamb" aria-label="Open menu" aria-expanded="false" onclick="toggleNav(this)"><span></span><span></span><span></span></button>
<a class="brand" href="/">BEVERLY HILLS<span>VIDEOS</span></a>
- <nav>
- <a href="/map.html">Map</a>
- <a href="/videos.html">Videos</a>
- <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
- <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
- <a href="/posts/dining-in-beverly-hills.html">Dining</a>
- </nav>
</div>
</header>
+ <div class="drawer" id="nav" aria-hidden="true">
+ <button class="drawer-x" aria-label="Close menu" onclick="toggleNav()">×</button>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/videos.html">Videos</a>
+ <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
+ <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
+ <a href="/posts/things-to-do-beverly-hills.html">City Guide</a>
+ <a href="/posts/dining-in-beverly-hills.html">Dining</a>
+ <a href="/posts/beverly-hills-nightlife.html">Nightlife</a>
+ <a href="/map.html">Map</a>
+ </nav>
+ </div>
+ <script>
+ function toggleNav(btn){
+ var d=document.getElementById('nav'), open=d.classList.toggle('open');
+ document.body.style.overflow=open?'hidden':'';
+ d.setAttribute('aria-hidden', open?'false':'true');
+ var h=document.querySelector('.hamb'); if(h) h.setAttribute('aria-expanded', open?'true':'false');
+ if(open) h&&h.classList.add('x'); else h&&h.classList.remove('x');
+ }
+ </script>
<article class="post">
<div class="wrap">
diff --git a/public/posts/beverly-hills-wellness-spas.html b/public/posts/beverly-hills-wellness-spas.html
index 8391b76..46a8636 100644
--- a/public/posts/beverly-hills-wellness-spas.html
+++ b/public/posts/beverly-hills-wellness-spas.html
@@ -20,16 +20,32 @@
<header class="site-head">
<div class="wrap">
+ <button class="hamb" aria-label="Open menu" aria-expanded="false" onclick="toggleNav(this)"><span></span><span></span><span></span></button>
<a class="brand" href="/">BEVERLY HILLS<span>VIDEOS</span></a>
- <nav>
- <a href="/map.html">Map</a>
- <a href="/videos.html">Videos</a>
- <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
- <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
- <a href="/posts/dining-in-beverly-hills.html">Dining</a>
- </nav>
</div>
</header>
+ <div class="drawer" id="nav" aria-hidden="true">
+ <button class="drawer-x" aria-label="Close menu" onclick="toggleNav()">×</button>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/videos.html">Videos</a>
+ <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
+ <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
+ <a href="/posts/things-to-do-beverly-hills.html">City Guide</a>
+ <a href="/posts/dining-in-beverly-hills.html">Dining</a>
+ <a href="/posts/beverly-hills-nightlife.html">Nightlife</a>
+ <a href="/map.html">Map</a>
+ </nav>
+ </div>
+ <script>
+ function toggleNav(btn){
+ var d=document.getElementById('nav'), open=d.classList.toggle('open');
+ document.body.style.overflow=open?'hidden':'';
+ d.setAttribute('aria-hidden', open?'false':'true');
+ var h=document.querySelector('.hamb'); if(h) h.setAttribute('aria-expanded', open?'true':'false');
+ if(open) h&&h.classList.add('x'); else h&&h.classList.remove('x');
+ }
+ </script>
<article class="post">
<div class="wrap">
diff --git a/public/posts/dining-in-beverly-hills.html b/public/posts/dining-in-beverly-hills.html
index fac69a5..2caa6cd 100644
--- a/public/posts/dining-in-beverly-hills.html
+++ b/public/posts/dining-in-beverly-hills.html
@@ -20,16 +20,32 @@
<header class="site-head">
<div class="wrap">
+ <button class="hamb" aria-label="Open menu" aria-expanded="false" onclick="toggleNav(this)"><span></span><span></span><span></span></button>
<a class="brand" href="/">BEVERLY HILLS<span>VIDEOS</span></a>
- <nav>
- <a href="/map.html">Map</a>
- <a href="/videos.html">Videos</a>
- <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
- <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
- <a href="/posts/dining-in-beverly-hills.html">Dining</a>
- </nav>
</div>
</header>
+ <div class="drawer" id="nav" aria-hidden="true">
+ <button class="drawer-x" aria-label="Close menu" onclick="toggleNav()">×</button>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/videos.html">Videos</a>
+ <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
+ <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
+ <a href="/posts/things-to-do-beverly-hills.html">City Guide</a>
+ <a href="/posts/dining-in-beverly-hills.html">Dining</a>
+ <a href="/posts/beverly-hills-nightlife.html">Nightlife</a>
+ <a href="/map.html">Map</a>
+ </nav>
+ </div>
+ <script>
+ function toggleNav(btn){
+ var d=document.getElementById('nav'), open=d.classList.toggle('open');
+ document.body.style.overflow=open?'hidden':'';
+ d.setAttribute('aria-hidden', open?'false':'true');
+ var h=document.querySelector('.hamb'); if(h) h.setAttribute('aria-expanded', open?'true':'false');
+ if(open) h&&h.classList.add('x'); else h&&h.classList.remove('x');
+ }
+ </script>
<article class="post">
<div class="wrap">
diff --git a/public/posts/rodeo-drive-guide.html b/public/posts/rodeo-drive-guide.html
index 16f9994..7f0a577 100644
--- a/public/posts/rodeo-drive-guide.html
+++ b/public/posts/rodeo-drive-guide.html
@@ -20,16 +20,32 @@
<header class="site-head">
<div class="wrap">
+ <button class="hamb" aria-label="Open menu" aria-expanded="false" onclick="toggleNav(this)"><span></span><span></span><span></span></button>
<a class="brand" href="/">BEVERLY HILLS<span>VIDEOS</span></a>
- <nav>
- <a href="/map.html">Map</a>
- <a href="/videos.html">Videos</a>
- <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
- <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
- <a href="/posts/dining-in-beverly-hills.html">Dining</a>
- </nav>
</div>
</header>
+ <div class="drawer" id="nav" aria-hidden="true">
+ <button class="drawer-x" aria-label="Close menu" onclick="toggleNav()">×</button>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/videos.html">Videos</a>
+ <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
+ <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
+ <a href="/posts/things-to-do-beverly-hills.html">City Guide</a>
+ <a href="/posts/dining-in-beverly-hills.html">Dining</a>
+ <a href="/posts/beverly-hills-nightlife.html">Nightlife</a>
+ <a href="/map.html">Map</a>
+ </nav>
+ </div>
+ <script>
+ function toggleNav(btn){
+ var d=document.getElementById('nav'), open=d.classList.toggle('open');
+ document.body.style.overflow=open?'hidden':'';
+ d.setAttribute('aria-hidden', open?'false':'true');
+ var h=document.querySelector('.hamb'); if(h) h.setAttribute('aria-expanded', open?'true':'false');
+ if(open) h&&h.classList.add('x'); else h&&h.classList.remove('x');
+ }
+ </script>
<article class="post">
<div class="wrap">
diff --git a/public/posts/staying-fit-beverly-hills.html b/public/posts/staying-fit-beverly-hills.html
index c9cc95a..094ae4a 100644
--- a/public/posts/staying-fit-beverly-hills.html
+++ b/public/posts/staying-fit-beverly-hills.html
@@ -20,16 +20,32 @@
<header class="site-head">
<div class="wrap">
+ <button class="hamb" aria-label="Open menu" aria-expanded="false" onclick="toggleNav(this)"><span></span><span></span><span></span></button>
<a class="brand" href="/">BEVERLY HILLS<span>VIDEOS</span></a>
- <nav>
- <a href="/map.html">Map</a>
- <a href="/videos.html">Videos</a>
- <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
- <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
- <a href="/posts/dining-in-beverly-hills.html">Dining</a>
- </nav>
</div>
</header>
+ <div class="drawer" id="nav" aria-hidden="true">
+ <button class="drawer-x" aria-label="Close menu" onclick="toggleNav()">×</button>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/videos.html">Videos</a>
+ <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
+ <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
+ <a href="/posts/things-to-do-beverly-hills.html">City Guide</a>
+ <a href="/posts/dining-in-beverly-hills.html">Dining</a>
+ <a href="/posts/beverly-hills-nightlife.html">Nightlife</a>
+ <a href="/map.html">Map</a>
+ </nav>
+ </div>
+ <script>
+ function toggleNav(btn){
+ var d=document.getElementById('nav'), open=d.classList.toggle('open');
+ document.body.style.overflow=open?'hidden':'';
+ d.setAttribute('aria-hidden', open?'false':'true');
+ var h=document.querySelector('.hamb'); if(h) h.setAttribute('aria-expanded', open?'true':'false');
+ if(open) h&&h.classList.add('x'); else h&&h.classList.remove('x');
+ }
+ </script>
<article class="post">
<div class="wrap">
diff --git a/public/posts/things-to-do-beverly-hills.html b/public/posts/things-to-do-beverly-hills.html
index e61fbe3..8fb21b7 100644
--- a/public/posts/things-to-do-beverly-hills.html
+++ b/public/posts/things-to-do-beverly-hills.html
@@ -20,16 +20,32 @@
<header class="site-head">
<div class="wrap">
+ <button class="hamb" aria-label="Open menu" aria-expanded="false" onclick="toggleNav(this)"><span></span><span></span><span></span></button>
<a class="brand" href="/">BEVERLY HILLS<span>VIDEOS</span></a>
- <nav>
- <a href="/map.html">Map</a>
- <a href="/videos.html">Videos</a>
- <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
- <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
- <a href="/posts/dining-in-beverly-hills.html">Dining</a>
- </nav>
</div>
</header>
+ <div class="drawer" id="nav" aria-hidden="true">
+ <button class="drawer-x" aria-label="Close menu" onclick="toggleNav()">×</button>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/videos.html">Videos</a>
+ <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
+ <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
+ <a href="/posts/things-to-do-beverly-hills.html">City Guide</a>
+ <a href="/posts/dining-in-beverly-hills.html">Dining</a>
+ <a href="/posts/beverly-hills-nightlife.html">Nightlife</a>
+ <a href="/map.html">Map</a>
+ </nav>
+ </div>
+ <script>
+ function toggleNav(btn){
+ var d=document.getElementById('nav'), open=d.classList.toggle('open');
+ document.body.style.overflow=open?'hidden':'';
+ d.setAttribute('aria-hidden', open?'false':'true');
+ var h=document.querySelector('.hamb'); if(h) h.setAttribute('aria-expanded', open?'true':'false');
+ if(open) h&&h.classList.add('x'); else h&&h.classList.remove('x');
+ }
+ </script>
<article class="post">
<div class="wrap">
diff --git a/public/privacy.html b/public/privacy.html
index 984bc1f..6e22d78 100644
--- a/public/privacy.html
+++ b/public/privacy.html
@@ -20,16 +20,32 @@
<header class="site-head">
<div class="wrap">
+ <button class="hamb" aria-label="Open menu" aria-expanded="false" onclick="toggleNav(this)"><span></span><span></span><span></span></button>
<a class="brand" href="/">BEVERLY HILLS<span>VIDEOS</span></a>
- <nav>
- <a href="/map.html">Map</a>
- <a href="/videos.html">Videos</a>
- <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
- <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
- <a href="/posts/dining-in-beverly-hills.html">Dining</a>
- </nav>
</div>
</header>
+ <div class="drawer" id="nav" aria-hidden="true">
+ <button class="drawer-x" aria-label="Close menu" onclick="toggleNav()">×</button>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/videos.html">Videos</a>
+ <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
+ <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
+ <a href="/posts/things-to-do-beverly-hills.html">City Guide</a>
+ <a href="/posts/dining-in-beverly-hills.html">Dining</a>
+ <a href="/posts/beverly-hills-nightlife.html">Nightlife</a>
+ <a href="/map.html">Map</a>
+ </nav>
+ </div>
+ <script>
+ function toggleNav(btn){
+ var d=document.getElementById('nav'), open=d.classList.toggle('open');
+ document.body.style.overflow=open?'hidden':'';
+ d.setAttribute('aria-hidden', open?'false':'true');
+ var h=document.querySelector('.hamb'); if(h) h.setAttribute('aria-expanded', open?'true':'false');
+ if(open) h&&h.classList.add('x'); else h&&h.classList.remove('x');
+ }
+ </script>
<article class="post">
<div class="wrap">
diff --git a/public/style.css b/public/style.css
index d6c18f2..5fd44c9 100644
--- a/public/style.css
+++ b/public/style.css
@@ -113,3 +113,18 @@ p{margin:0 0 1.1em}
.pop .paddr:hover{border-color:var(--soft)}
.pop .pcall{display:block;text-align:center;font-family:var(--ui);text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;font-weight:500;color:#fff!important;background:var(--accent);padding:.7em 1em;border-radius:2px;text-decoration:none}
.pop .pcall:hover{background:#163025}
+
+/* hamburger header + drawer (overrides earlier header rules) */
+.site-head .wrap{flex-direction:row;justify-content:center;align-items:center;position:relative;padding-top:22px;padding-bottom:20px;min-height:64px}
+.hamb{position:absolute;left:40px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;width:26px;height:18px;padding:0;display:flex;flex-direction:column;justify-content:space-between;z-index:60}
+.hamb span{display:block;height:1.5px;width:100%;background:var(--ink);transition:transform .3s,opacity .3s}
+.hamb.x span:nth-child(1){transform:translateY(8px) rotate(45deg)}
+.hamb.x span:nth-child(2){opacity:0}
+.hamb.x span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
+.drawer{position:fixed;inset:0;background:var(--paper);z-index:55;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
+.drawer.open{opacity:1;visibility:visible}
+.drawer-x{position:absolute;top:22px;right:40px;background:none;border:0;font-size:2.1rem;color:var(--ink);cursor:pointer;line-height:1;font-family:var(--ui);font-weight:300}
+.drawer nav{display:flex;flex-direction:column;align-items:center;gap:4px}
+.drawer nav a{font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.6rem);font-weight:500;color:var(--ink);letter-spacing:.01em;padding:.12em 0;transition:opacity .2s}
+.drawer nav a:hover{opacity:.5}
+@media(max-width:640px){.hamb{left:22px}.drawer-x{right:22px}}
diff --git a/public/videos.html b/public/videos.html
index acf5af0..a625a78 100644
--- a/public/videos.html
+++ b/public/videos.html
@@ -20,16 +20,32 @@
<header class="site-head">
<div class="wrap">
+ <button class="hamb" aria-label="Open menu" aria-expanded="false" onclick="toggleNav(this)"><span></span><span></span><span></span></button>
<a class="brand" href="/">BEVERLY HILLS<span>VIDEOS</span></a>
- <nav>
- <a href="/map.html">Map</a>
- <a href="/videos.html">Videos</a>
- <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
- <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
- <a href="/posts/dining-in-beverly-hills.html">Dining</a>
- </nav>
</div>
</header>
+ <div class="drawer" id="nav" aria-hidden="true">
+ <button class="drawer-x" aria-label="Close menu" onclick="toggleNav()">×</button>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/videos.html">Videos</a>
+ <a href="/posts/beverly-hills-real-estate.html">Real Estate</a>
+ <a href="/posts/rodeo-drive-guide.html">Rodeo Drive</a>
+ <a href="/posts/things-to-do-beverly-hills.html">City Guide</a>
+ <a href="/posts/dining-in-beverly-hills.html">Dining</a>
+ <a href="/posts/beverly-hills-nightlife.html">Nightlife</a>
+ <a href="/map.html">Map</a>
+ </nav>
+ </div>
+ <script>
+ function toggleNav(btn){
+ var d=document.getElementById('nav'), open=d.classList.toggle('open');
+ document.body.style.overflow=open?'hidden':'';
+ d.setAttribute('aria-hidden', open?'false':'true');
+ var h=document.querySelector('.hamb'); if(h) h.setAttribute('aria-expanded', open?'true':'false');
+ if(open) h&&h.classList.add('x'); else h&&h.classList.remove('x');
+ }
+ </script>
<section class="hero home-hero vids-hero">
<div class="wrap">
← c544fb4 map: add phone + address to all 32 pins with click-to-call (
·
back to Beverlyhillsvideos
·
map: add Beverly Hills doctors + attorneys as two new pin ca c1e40d7 →