hamburger-menu
Version:
☰ A responsive CSS solution for a hamburger menu ☰
71 lines (66 loc) • 2.61 kB
HTML
<html lang=en>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>HamburgerMenu ☰ Specification Cases</title>
<link rel=icon href=https://centerkey.com/graphics/bookmark.png>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6/css/all.min.css>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/dna.js@1.5/dist/dna.css>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/web-ignition@1.1/dist/reset.min.css>
<style>
body { text-align: center; color: gray; background-color: black; }
body >header { margin-bottom: 40px; }
body >main >nav { margin: 20px auto; max-width: 550px; }
body >main >nav i.font-icon { font-size: 8rem; margin-bottom: 5px; }
body >main >nav figcaption { margin-bottom: 20px; }
body >footer p:first-child { font-size: 1.3rem; font-weight: lighter; margin-bottom: 10px; }
body >footer i.font-icon { font-size: 2.7rem; }
body >footer figure { display: inline-block; width: 100px; }
@media (max-width: 667px) { /* selects iPhone 6/6s/7/8 landscape and anything narrower */
body >header h1 { font-size: 1.2rem; }
body >main >nav i.font-icon { font-size: 6rem; }
}
</style>
</head>
<body>
<header>
<h1>☰ HamburgerMenu ☰</h1>
</header>
<main>
<h2>Specification Cases</h2>
<nav class=flex-columns>
<figure>
<a href=multipage><i data-icon=map></i></a>
<figcaption>Multiple Pages</figcaption>
</figure>
<figure>
<a href=single-page-app><i data-icon=scroll></i></a>
<figcaption>Single-Page App</figcaption>
</figure>
</nav>
<p>
If you are using a desktop or laptop, manually resize your web browser to the smallest width
to simulate the responsive design for a mobile device.
</p>
</main>
<footer>
<div>
<p>v<span class=version-number></p>
<p>
<a href=https://github.com/center-key/hamburger-menu><i data-brand=github-alt></i></a>
</p>
<figure>
<a href=https://centerkey.com>
<img src=https://centerkey.com/graphics/center-key-icon.svg alt=logo>
</a>
</figure>
</div>
</footer>
<script src=https://cdn.jsdelivr.net/npm/jquery@3.3/dist/jquery.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/dna.js@1.5/dist/dna.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/web-ignition@1.1/dist/library.min.js></script>
<script src=hamburger-menu.js></script>
<script>$('.version-number').text(hamburgerMenu.version);</script>
</body>
</html>