hamburger-menu
Version:
☰ A responsive CSS solution for a hamburger menu ☰
83 lines (78 loc) • 3.76 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=products><i data-icon=cubes></i>Products</a>
<ul>
<li><a href=products/x3000.html><i data-icon=cube></i>X-3000</a></li>
<li><a href=products/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>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
<li><a href=.><i data-icon=bolt></i>Filler</a></li>
</ul>
</aside>
</nav>
</header>
<main>
<h1>About</h1>
<h2>Hamburgers rule!</h2>
<p>
This page tests a <b>long</b> menu with <b>short</b> content.
</p>
<p>
Pig capicola corned beef bacon frankfurter filet mignon drumstick meatloaf. Shoulder kevin strip steak rump venison t-bone. Brisket landjaeger flank ground round, filet mignon tongue kielbasa turducken alcatra turkey ham. Pig jerky spare ribs short ribs, ball tip cupim rump. Shoulder turkey kielbasa rump. Turducken beef sausage venison turkey boudin kevin beef ribs meatloaf pork chop tail chicken frankfurter ground round biltong. Fatback chicken bresaola frankfurter drumstick kielbasa ribeye, venison doner bacon tongue prosciutto.
</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>