Skip to content

Add dropdown demo #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 18 commits into
base: main
Choose a base branch
from
Open

Add dropdown demo #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
9b4f902
Add dropdown demo
jamesnw Sep 24, 2025
7840d02
style cleanup
dvdherron Sep 25, 2025
12f94e3
Add title
jamesnw Sep 25, 2025
ba65682
more style cleanup
dvdherron Sep 25, 2025
c26fa95
fix inner menus
dvdherron Sep 26, 2025
37be349
reorganize styles
dvdherron Oct 16, 2025
1169eca
add transitions to popovers
dvdherron Oct 17, 2025
a6fc2e3
lint
dvdherron Oct 17, 2025
16a0f88
Merge branch 'main' of https://github.com/oddbird/baseline-demos into…
jamesnw Oct 23, 2025
3692d31
Add more content, add to sitemap
jamesnw Oct 23, 2025
844134c
clean up popover styles
dvdherron Oct 23, 2025
66e04de
make main content narrower
dvdherron Oct 23, 2025
9345f50
add animation media query
dvdherron Oct 24, 2025
d3ce6fa
fix grid layout in safari
dvdherron Oct 27, 2025
3a17aad
fix anchor positioning
dvdherron Oct 27, 2025
b12cd12
add extra space after main content
dvdherron Oct 27, 2025
5818b8f
cleanup popover alignment on transition
dvdherron Oct 28, 2025
6f85fc2
Remove exit animation if overlay not supported, fixes Safari
jamesnw Nov 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
263 changes: 263 additions & 0 deletions src/dropdown/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,263 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Bird News Daily</title>
</head>

<body>
<header role="banner">
<h1 class="title">Bird News Daily</h1>
<p class="tagline">
Building a Disclosure Navigation with Baseline features
</p>
</header>
<nav aria-label="Bird News Daily">
<ul class="nav-list">
<li class="nav-list-item">
<a href="#home">Home</a>
</li>
<li class="nav-list-item">
<button data-button="popover-trigger" popovertarget="about-menu">
About
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"
data-icon="triangle" width="32" height="32" fill="currentColor">
<defs>
<linearGradient id="triangle-gradient" x1="0%" x2="100%" y1="0%" y2="0%" gradientTransform="rotate(45)">
<stop class="gradient-start" offset="4%" />
<stop class="gradient-end" offset="100%" />
</linearGradient>
</defs>
<path d="M16 12L10 18V6L16 12Z" fill="url(#triangle-gradient)"></path>
</svg>
</button>

<ul aria-label="About" popover id="about-menu" data-menu="outer">
<li>
<a href="#overview">Overview</a>
</li>
<li>
<a href="#our-mission">Our Mission</a>
</li>
<li>
<button popovertarget="facts-menu" data-button="popover-trigger">
Facts
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"
data-icon="triangle" width="32" height="32" fill="currentColor">
<defs>
<linearGradient id="triangle-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
<stop class="gradient-start" offset="0%" />
<stop class="gradient-end" offset="100%" />
</linearGradient>
</defs>
<path d="M16 12L10 18V6L16 12Z" fill="url(#triangle-gradient)"></path>
</svg>
</button>
<ul aria-label="Facts" popover id="facts-menu" data-menu="nested">
<li>
<a href="#history">History</a>
</li>
<li>
<a href="#staff">Staff</a>
</li>
<li>
<a href="#awards">Awards</a>
</li>
</ul>
</li>
<li>
<button popovertarget="local-events-menu" data-button="popover-trigger">
Local Events
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"
data-icon="triangle" width="32" height="32" fill="currentColor">
<defs>
<linearGradient id="triangle-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
<stop class="gradient-start" offset="0%" />
<stop class="gradient-end" offset="100%" />
</linearGradient>
</defs>
<path d="M16 12L10 18V6L16 12Z" fill="url(#triangle-gradient)"></path>
</svg>
</button>
<ul aria-label="Local Events" id="local-events-menu" popover data-menu="nested">
<li>
<a href="#bnd-birdwalks"> BND Birdwalks </a>
</li>
<li>
<a href="#live-talks">Live Talks</a>
</li>
<li>
<a href="#meetups">Meetups</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-list-item">
<button popovertarget="news-menu" data-button="popover-trigger">
News
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"
data-icon="triangle" width="32" height="32" fill="currentColor">
<path d="M16 12L10 18V6L16 12Z"></path>
<defs>
<linearGradient id="triangle-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
<stop class="gradient-start" offset="0%" />
<stop class="gradient-end" offset="100%" />
</linearGradient>
</defs>
<path d="M16 12L10 18V6L16 12Z" fill="url(#triangle-gradient)"></path>
</svg>
</button>
<ul aria-label="News" popover id="news-menu" data-menu="outer">
<li>
<a href="#latest-headlines">Latest Headlines</a>
</li>
<li>
<button popovertarget="regional-menu" data-button="popover-trigger">
Regional
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"
data-icon="triangle" width="32" height="32" fill="currentColor">
<linearGradient id="triangle-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
<stop class="gradient-start" offset="0%" />
<stop class="gradient-end" offset="100%" />
</linearGradient>
<path d="M16 12L10 18V6L16 12Z" fill="url(#triangle-gradient)"></path>
</svg>
</button>
<ul aria-label="Regional" id="regional-menu" popover data-menu="nested">
<li>
<a href="#prairies">Prairies</a>
</li>
<li>
<a href="#wetlands">Wetlands</a>
</li>
<li>
<a href="#rural">Rural</a>
</li>
</ul>
</li>
<li>
<a href="#sightings">Sightings</a>
</li>
<li>
<a href="#recordings">Birdsong Recordings</a>
</li>
<li>
<a href="#photo-essays">Photo Essays</a>
</li>
<li>
<a href="#sunday-interviews">The Sunday Interview</a>
</li>
</ul>
</li>
<li class="nav-list-item">
<button popovertarget="resources-menu" data-button="popover-trigger">
Resources
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"
data-icon="triangle" width="32" height="32" fill="currentColor">
<defs>
<linearGradient id="triangle-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
<stop class="gradient-start" offset="0%" />
<stop class="gradient-end" offset="100%" />
</linearGradient>
</defs>
<path d="M16 12L10 18V6L16 12Z" fill="url(#triangle-gradient)"></path>
</svg>
</button>
<ul id="resources-menu" popover aria-label="Resources" data-menu="outer">
<li>
<a href="#clubs-and-organizations">Clubs &amp; Organizations</a>
</li>
<li>
<a href="#identification-guides">Identification Guides</a>
</li>
<li>
<a href="#podcast">BND Podcast</a>
</li>
<li>
<a href="#online-courses">Online Courses</a>
</li>
<li role="separator"></li>
<li>
<a href="#research">Research</a>
</li>
<li>
<a href="#trails">BND Trails</a>
</li>
<li>
<a href="#kids">BDN Kids</a>
</li>
<li>
<a href="#maps">Maps</a>
</li>
</ul>
</li>
</ul>
</nav>
<main>
<section aria-labelledby="id-page-title">
<h2 id="id-page-title">Bird News Daily</h2>
<div data-article="a">
<p>
Quail eider garganey eu scotering Tinamou nostrud Tinamou nightjar sit
sunt peregrine non cuckoo puffin incididunt.
</p>
<p>
Vesper sparrow qui nisi labore ut do duail peregrine cupidatat occaecat
ea minim garganey avocet. Duail enim in scotering nisi avocet amet.
</p>
<p>
Amet cackling goose ea hummingbird sunt amet puffin officia in quail
garganey cackling goose est. Ut hummingbird quail cuckoo peregrine
cackling goose ex consequat ut sunt owl ea vesper sparrow amet.
</p>
</div>
<div data-article="2" hidden>
<p>
Sint excepteur garganey hummingbird do vesper sparrow hummingbird
consequat. Ad occaecat deserunt vulture plover cupidatat vulture sunt ad
puffin dolore ex Tinamou ea sint minim.
</p>
<p>
Minim qui exercitation aliquip et ea vesper sparrow qui proident qui
enim fugiat vesper sparrow qui consequat.
</p>
<p>
Incididunt Tinamou amet hummingbird officia irure aliqua cupidatat
cuckoo plover ullamco exercitation vesper sparrow. hummingbird minim do
ea owl nostrud aliquip owl fugiat peregrine consequat scotering enim
nightjar.
</p>
</div>
<div data-article="3" hidden>
<p>
Eu esse sit aliqua ad qui avocet. Aliqua eu puffin quail cillum irure
minim nisi irure minim aute aliquip esse eiusmod.
</p>
<p>
Nisi eider sunt officia excepteur aliquip labore dolor sit irure
hummingbird est veniam cupidatat officia occaecat. Ad plover non owl
Tinamou amet cackling goose irure sunt et.
</p>
<p>
Eider vulture peregrine tempor do Tinamou ut vesper sparrow quail ut ex
sint do enim puffin.
</p>
<p>
Sunt nightjar amet owl dolor et dolor labore officia plover. cackling
goose ullamco irure cackling goose incididunt amet amet dolor do duail
id cuckoo eiusmod scotering sunt duail.
</p>
</div>
</section>
</main>
<footer role="contentinfo">
<p>&#169;2025 Bird News Daily</p>
</footer>
<script src="./script.js"></script>
</body>

</html>
43 changes: 43 additions & 0 deletions src/dropdown/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
window.addEventListener("hashchange", () => {
handleRoute(window.location.hash);
});

const CONTAINS_PATH_TEXT = "Contains current page link";
let shownBlock = 0;

function handleRoute(newPage) {
// Close all open popovers, would be unneeded if we actually had navigated to a new page
document.querySelectorAll(":popover-open").forEach((popover) => {
popover.hidePopover();
});

// Replace the content
const heading = document.getElementById("id-page-title");
heading.innerText = newPage;

const contentBlocks = document.querySelectorAll("[data-article]");
shownBlock = (shownBlock + 1) % contentBlocks.length;

contentBlocks.forEach((block, index) => {
if(index === shownBlock) block.removeAttribute('hidden');
else block.setAttribute('hidden', '');
});

const formerLink = document.querySelector("[aria-current]");
if (formerLink) formerLink.removeAttribute("aria-current");

const linkToRoute = document.querySelector(`[href="${newPage}"]`);
Copy link
Collaborator Author

@jamesnw jamesnw Oct 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure what's happening, but this line seems to be crashing in Safari. I'll look into this more.

linkToRoute.setAttribute("aria-current", "page");

// Remove existing title attributes
document
.querySelectorAll(`[title="${CONTAINS_PATH_TEXT}"]`)
.forEach((element) => {
element.removeAttribute("title");
});

// Add a title to ancestors
document.querySelectorAll("li:has(a[aria-current])").forEach((element) => {
element.setAttribute("title", CONTAINS_PATH_TEXT);
});
}
Loading