Skip to content

Instantly share code, notes, and snippets.

@maximpn

maximpn/buterbroad.svg

Last active June 4, 2018 08:03
Show Gist options
  • Save maximpn/6e6c5bba761dcd1aae45943d878243b3 to your computer and use it in GitHub Desktop.
Save maximpn/6e6c5bba761dcd1aae45943d878243b3 to your computer and use it in GitHub Desktop.
Download ZIP
Page with a menu
Display the source blob
Display the rendered blob
Raw
buterbroad.svg
<?xml version="1.0" encoding="iso-8859-1"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="512px" height="512px">
<g>
<path d="M24,3c0-0.6-0.4-1-1-1H1C0.4,2,0,2.4,0,3v2c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V3z" fill="#FFFFFF"/>
<path d="M24,11c0-0.6-0.4-1-1-1H1c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V11z" fill="#FFFFFF"/>
<path d="M24,19c0-0.6-0.4-1-1-1H1c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V19z" fill="#FFFFFF"/>
</g>
</svg>
Display the source blob
Display the rendered blob
Raw
cross.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>A simple page with a multi-level menu</title>
<link rel="stylesheet" href="styles.css">
<script async src="scripts.js"></script>
</head>
<body>
<header>
<div class="menu">
<input type="checkbox" id="menu">
<label for="menu" class="menu-title">Menu</label>
<ul class="menu-content">
<li class="menu-item">
<input type="checkbox" id="menu-item-1" class="menu-item-input">
<label class="header" for="menu-item-1">Menu item 1</label>
<ul class="menu-content">
<li class="menu-item">
<div class="header">Sub menu item 1</div>
</li>
<li class="menu-item">
<div class="header">Sub menu item 2</div>
</li>
<li class="menu-item">
<div class="header">Sub menu item 3</div>
</li>
</ul>
</li>
<li class="menu-item">
<input type="checkbox" id="menu-item-2" class="menu-item-input">
<label class="header" for="menu-item-2">Menu item 2</label>
<ul class="menu-content">
<li class="menu-item">
<div class="header">Sub menu item 1</div>
</li>
<li class="menu-item">
<div class="header">Sub menu item 2</div>
</li>
<li class="menu-item">
<div class="header">Sub menu item 3</div>
</li>
</ul>
</li>
<li class="menu-item">
<input type="checkbox" id="menu-item-3" class="menu-item-input">
<label class="header" for="menu-item-3">Menu item 3</label>
<ul class="menu-content">
<li class="menu-item">
<div class="header">Sub menu item 1</div>
</li>
<li class="menu-item">
<div class="header">Sub menu item 2</div>
</li>
<li class="menu-item">
<div class="header">Sub menu item 3</div>
</li>
</ul>
</li>
<li class="menu-item">
<input type="checkbox" id="menu-item-4" class="menu-item-input">
<label class="header" for="menu-item-4">Menu item 4</label>
<ul class="menu-content">
<li class="menu-item">
<div class="header">Sub menu item 1</div>
</li>
<li class="menu-item">
<div class="header">Sub menu item 2</div>
</li>
<li class="menu-item">
<div class="header">Sub menu item 3</div>
</li>
</ul>
</li>
<li class="menu-item">
<input type="checkbox" id="menu-item-5" class="menu-item-input">
<label class="header" for="menu-item-5">Menu item 5</label>
<ul class="menu-content">
<li class="menu-item">
<div class="header">Sub menu item 1</div>
</li>
<li class="menu-item">
<div class="header">Sub menu item 2</div>
</li>
<li class="menu-item">
<div class="header">Sub menu item 3</div>
</li>
</ul>
</li>
</ul>
</div>
</header>
<main>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</article>
</main>
<footer>
Footer
</footer>
</body>
</html>
Raw
scripts.js
(() => {
const onSubmenuItemClick = (e) => {
const t = e.target;
if (t.nodeName !== 'DIV' || !t.classList.contains('header')) {
return;
}
const headerEl = t.closest('.menu > .menu-content > .menu-item').querySelector('.header');
alert(headerEl.textContent);
};
const DOMisReadyCallback = () => {
var menuContentEl = document.querySelector('.menu-content');
menuContentEl.addEventListener('click', onSubmenuItemClick);
};
window.addEventListener('load', DOMisReadyCallback, false);
})();
Raw
styles.css
html,
body {
height: 100%;
}
body {
font-size: 16px;
font-family: cursive;
color: #222;
background-color: #eeeaeb;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
header {
position: fixed;
width: 100%;
color: white;
background-color: #336a98;
text-align: center;
padding: 0;
}
main {
margin-top: 90px;
flex: 1;
padding: 2em;
}
footer {
flex: 0 0 auto;
background-color: #336a98;
color: white;
padding: 2em 0;
font-size: 28px;
text-align: center;
}
.menu {
text-align: left;
padding: 0 2em 0.2em 2em;
border-bottom: 3px solid #666;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
.menu-title {
font-size: 56px;
display: block;
cursor: pointer;
background: #336a98 url(buterbroad.svg) no-repeat left center;
background-size: 30px;
padding: 0 0 0 50px;
user-select: none;
}
.menu-content {
transition: max-height ease-out 200ms;
list-style-type: none;
max-height: 0;
overflow: hidden;
margin: 0 0 0 1em;
padding: 0;
}
.menu-item > .header {
cursor: pointer;
user-select: none;
padding: 0.5em 0;
display: block;
}
.menu-item .header:hover {
color: #eeeaeb;
}
.menu-item .content {
max-height: 0;
overflow: hidden;
}
input#menu,
.menu-item-input {
display: none;
}
input#menu:checked ~ label {
background-image: url(cross.svg);
}
input#menu:checked ~ .menu-content {
max-height: 1000px;
}
.menu-item > .menu-item-input:checked ~ .menu-content {
max-height: 117px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment