shadowfacts.net/site/static/web/2019/js-free-hamburger-menu/final.html

132 lines
3.9 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hamburger Menu Demo</title>
<style>
body {
font-family: sans-serif;
}
main {
position: relative;
max-width: 980px;
margin: 0 auto;
}
main .sidebar-toggle {
position: absolute;
right: calc(100% + 1rem);
}
#sidebar-visible {
display: none;
}
.sidebar-toggle {
cursor: pointer;
}
#sidebar-container {
visibility: hidden;
display: flex;
flex-direction: row;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background-color: transparent;
transition:
visibility 0.35s ease-in-out,
background-color 0.35s ease-in-out;
}
#sidebar-visible:checked + #sidebar-container {
visibility: visible;
background-color: rgba(0, 0, 0, 0.3);
}
#sidebar-content {
background-color: #eee;
width: 25%;
position: relative;
left: -100%;
padding: 1rem;
transition: left 0.35s ease-in-out;
}
#sidebar-visible:checked + #sidebar-container > #sidebar-content {
left: 0;
}
#sidebar-content .sidebar-toggle {
position: absolute;
right: 1rem;
top: 1rem;
}
#sidebar-dismiss {
flex-grow: 1;
}
@media (max-width: 980px) {
#sidebar-content {
width: 40%;
}
main .sidebar-toggle {
position: unset;
}
}
@media (max-width: 480px) {
#sidebar-content {
width: 100%;
}
}
</style>
</head>
<body>
<input type="checkbox" id="sidebar-visible">
<div id="sidebar-container">
<div id="sidebar-content">
<label for="sidebar-visible" class="sidebar-toggle">Close</label>
<p>Some sidebar content</p>
</div>
<label for="sidebar-visible" id="sidebar-dismiss"></label>
</div>
<main>
<label for="sidebar-visible" class="sidebar-toggle">Open Sidebar</label>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at ipsum commodo, hendrerit sapien sit amet, sodales
neque. Aenean imperdiet consequat nulla, quis fringilla quam eleifend vulputate. Duis at felis leo. Etiam at
ligula massa. Nunc ut faucibus velit, sit amet vestibulum lectus. Aliquam sit amet est vitae risus interdum
laoreet. Etiam non commodo libero, id pellentesque sapien. Vivamus in augue tempor, luctus ligula et, dignissim
ex. Pellentesque eleifend, tellus sit amet rhoncus ornare, mi est hendrerit ex, ac blandit felis nisi nec ligula.
Ut at sem non diam iaculis dignissim non eu purus. Etiam placerat sapien ut sagittis porttitor.
Pellentesque mollis nulla magna, at dapibus enim tristique nec. Nam felis augue, suscipit ut dignissim elementum,
lacinia sed turpis. Vivamus justo sem, cursus nec lectus non, consectetur sodales nisi.
</p>
<p>
Quisque id purus in urna tempor vulputate. Fusce a turpis semper odio sollicitudin lobortis. Pellentesque ac
placerat ex, in tincidunt augue. Etiam mattis enim vel tempus porta. Donec maximus, massa at iaculis dapibus,
mauris eros volutpat enim, sed ullamcorper est sem ac mauris. Mauris blandit purus a auctor feugiat. Duis
scelerisque orci at nibh fermentum, ut lobortis libero vestibulum. Vivamus sed mi nec nibh condimentum dapibus.
Sed sed vulputate augue. Maecenas ut lobortis orci. Sed eleifend dapibus auctor. Pellentesque dignissim massa
sed mi facilisis malesuada eget ut leo. Proin mollis ac est malesuada hendrerit. Fusce pulvinar sagittis ultrices.
Cras fermentum sodales lectus quis iaculis.
</p>
<p>
Sed molestie sit amet eros vel placerat. Aliquam feugiat sagittis nisl eget pretium. Quisque ut ligula sit amet
quam tempus commodo. Phasellus vulputate quis turpis et faucibus. Morbi neque est, blandit mollis enim at,
lacinia egestas risus. Cras gravida interdum est vitae ultricies. Fusce consequat neque molestie, molestie elit
et, tincidunt massa.
</p>
</main>
</body>
</html>