I can’t stop thinking about this site. It looks like a pretty standard fare; a website with links to different pages. Nothing to write home about except that… the whole website is contained within a single HTML file.
What about clicking the navigation links, you ask? Each link merely shows and hides certain parts of the HTML.
<section id="home">
<!-- home content goes here -->
</section>
<section id="about">
<!-- about page goes here -->
</section>
Each <section>
is hidden with CSS:
section { display: none; }
Each link in the main navigation points to an anchor on the page:
<a href="#home">Home</a>
<a href="#about">About</a>
And once you click a link, the <section>
for that particular link is displayed via:
section:target { display: block; }
See that :target
pseudo selector? That’s the magic! Sure, it’s been around for years, but this is a clever way to use it for sure. Most times, it’s used to highlight the anchor on the page once an anchor link to it has been clicked. That’s a handy way to help the user know where they’ve just jumped to.
Anyway, using :target
like this is super smart stuff! It ends up looking like just a regular website when you click around:
Direct Link to Article — Permalink
The post A Whole Website in a Single HTML File appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!