hamburger-menu
Version:
☰ A responsive CSS solution for a hamburger menu ☰
60 lines (55 loc) • 2.01 kB
HTML
<!--
HamburgerMenu ☰ A responsive CSS solution
github.com/center-key/hamburger-menu
License: MIT
-->
<html lang=en>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>HamburgerMenu ☰ Multipage</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=../../hamburger-menu.css>
<link rel=stylesheet href=../../style.css>
</head>
<body>
<header>
<nav class=hamburger-menu>
<a class=hamburger href=#>☰</a>
<aside>
<ul>
<li><a href=..><i data-icon=home></i>Home</a></li>
<li>
<a href=.><i data-icon=cubes></i>Products</a>
<ul>
<li><a href=x3000.html><i data-icon=cube></i>X-3000</a></li>
<li><a href=x3200.html><i data-icon=cube></i>X-3200</a></li>
</ul>
</li>
<li><a href=../support.html><i data-icon=life-ring></i>Support</a></li>
<li><a href=../about.html><i data-icon=rocket></i>About</a></li>
</ul>
</aside>
</nav>
</header>
<main>
<h1>Product X-3200</h1>
<h2>Hamburgers rule!</h2>
<p>
This page tests another nested menu option.
</p>
<p>
Biltong pancetta cow, ham hock drumstick kielbasa salami. Porchetta venison shankle bresaola meatloaf chuck drumstick ground round biltong pork loin tongue pork belly tri-tip short loin. Turkey fatback shankle pancetta andouille swine. Chicken drumstick shankle short ribs.
</p>
</main>
<footer>
<a href=../..><i data-icon=power-off></i></a>
<a href=https://github.com/center-key/hamburger-menu><i data-brand=github-alt></i></a>
</footer>
<script src=https://cdn.jsdelivr.net/npm/jquery@3.3/dist/jquery.min.js></script>
<script src=../../hamburger-menu.js></script>
<script src=../../app.js></script>
</body>
</html>