Skip to content

Instantly share code, notes, and snippets.

@asifbacchus

asifbacchus/menu.html

Created June 7, 2019 01:54
Show Gist options
  • Save asifbacchus/542129c748f15d174924608461d26839 to your computer and use it in GitHub Desktop.
Save asifbacchus/542129c748f15d174924608461d26839 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS hamburger menu using target pseudo-class to avoid using java to close
Raw
menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pure CSS Menu</title>
<link href="https://fonts.googleapis.com/css?family=EB+Garamond|Oswald&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<!-- css menu -->
<div class="menu-wrapper">
<div id="menu" class="menu">
<a href="#menu" class="menu-link menu-open">menu</a>
<a href="#" class="menu-link menu-close">close</a>
<div class="hamburger">
<div class="hamburger-lines">
<!-- css will generate hamburger lines here -->
</div>
</div>
<nav class="menu-items">
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#item1">Item 1</a></li>
<li><a href="#item2">Item 2</a></li>
<li><a href="#item3">Item 3</a></li>
<li><a href="#item4">Item 4</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class="content-wrapper">
<!--site content here-->
<h1>Pure CSS Menu</h1>
<p class="realtext">Example of a 'hamburger menu' coded using only CSS. The menu uses a hidden link to both open and close. There is no 'checkbox hack' used so no JQuery/JavaScript is required to close the menu. Upon opening, the URL is changed to include anchor fragment #menu. As long as that is the case, the menu will be open. Upon clicking any link or the 'close' button, the anchor fragment is removed from the URL and the menu is hidden.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis distinctio, deserunt quisquam esse atque enim labore vel illo dolorem ullam consequuntur nesciunt iure temporibus nemo ex impedit natus asperiores ducimus ipsa placeat vero libero aliquam quaerat. Iusto dolores quaerat voluptatem molestiae eaque omnis, dolore facilis harum accusamus architecto cum perspiciatis officia inventore ab deserunt quidem itaque porro doloribus placeat corporis et eius voluptatibus maiores nulla! Tempore quaerat, pariatur a culpa reiciendis atque expedita. Eveniet mollitia consequatur vel quam ullam provident quibusdam inventore exercitationem omnis, possimus odit molestias cumque sunt. Vel voluptas saepe deleniti nostrum eligendi tempora necessitatibus, alias ab maxime eaque in eos optio autem aliquam asperiores illum accusamus ea tempore quibusdam molestias. Necessitatibus sint officiis ducimus unde molestias ullam architecto sit fuga, minus velit. Reprehenderit iste voluptate animi iure delectus, repudiandae eos excepturi maxime aperiam id quod facilis pariatur omnis unde suscipit dolor enim sunt veniam quis. Quod sed doloribus voluptate. Explicabo amet iusto modi mollitia distinctio? Suscipit aut deleniti ea voluptatum perferendis maiores ullam nobis molestiae at illum tempore consequuntur amet laudantium id sequi voluptas veritatis obcaecati, dignissimos exercitationem aspernatur minus reiciendis architecto. Praesentium ipsa maiores dolores labore nemo sequi, recusandae eaque quis fugiat blanditiis libero quaerat sint porro inventore? Distinctio, necessitatibus. Laudantium id hic, eum sequi quisquam rem ea eius, ducimus quis natus deleniti quidem distinctio odio assumenda quam. Aliquam numquam tempore enim libero, incidunt ex omnis fuga ratione accusantium eius mollitia similique eveniet laboriosam quidem ducimus, fugiat quas aperiam perferendis exercitationem placeat repudiandae, deleniti esse! Neque deserunt libero magni soluta corrupti fugiat esse animi harum iure minima alias placeat molestiae mollitia molestias a, dolor enim. Suscipit sed nihil quidem? Labore, quia vel. Minima, aliquam provident? Labore nisi necessitatibus, dolorem ducimus nihil qui illum earum expedita hic quas. Accusamus, impedit ab? Deserunt esse, sint magnam perspiciatis nisi sed? Quas, saepe optio vel ea nemo illo consectetur architecto sint sed unde, repudiandae cumque perferendis id alias odio eius deleniti? Aliquid illum accusantium cupiditate, iure amet molestias nobis numquam culpa, suscipit maiores eveniet corporis enim maxime! Amet vero odit officiis iste error molestias inventore rerum obcaecati eos similique. Aspernatur quod illum sapiente vitae sequi nobis dolorem illo corporis minima cupiditate recusandae ullam perspiciatis, blanditiis cum voluptate dolores architecto doloribus nostrum. Enim distinctio corrupti amet magnam ipsam expedita cum animi quae inventore quidem, ea ab quibusdam! Molestias ratione est ex, consequatur temporibus neque doloremque id iure dolorem rerum vero ad similique animi? Esse vel vero doloremque atque earum in ullam saepe beatae vitae, sed cum enim ea fugit minus tempora reiciendis repudiandae illo distinctio officia autem sapiente reprehenderit? Minima aspernatur, error sunt odit iusto maxime blanditiis doloribus impedit eveniet consequuntur aperiam, tempora cumque itaque dolorum odio similique ab facere dicta. Tempora, quaerat vitae minima assumenda ad aut eaque repellat vero quo consectetur dolorum facilis soluta dolorem modi autem dolore corrupti, sit excepturi quis rem maxime magni! Magni rem tempora esse nulla saepe a placeat culpa quo quasi nisi aliquid, eaque quae delectus accusamus provident officiis, beatae qui, doloribus nihil tenetur?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur nulla nobis deserunt esse accusantium nisi error ea fugiat dicta totam natus sunt facilis reprehenderit autem impedit obcaecati fuga commodi voluptas distinctio sed laboriosam, vel inventore excepturi exercitationem. Vero enim ex laudantium dolorum itaque nisi laboriosam cum, in dicta ipsum veniam temporibus, hic repudiandae laborum! Rem!</p>
<div id="item1" class="item item1">
<h2>Item 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur earum officia sint ratione fugit quod veritatis repudiandae cupiditate. Exercitationem error et numquam veritatis harum explicabo sint atque dolorem itaque saepe.</p>
</div>
<div id="item2" class="item item2">
<h2>Item 2</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum, perferendis magni officia dolor maxime molestiae voluptates ipsum minus voluptatibus commodi. Nostrum, voluptates. Sint ducimus quod facere eaque possimus, beatae porro dolorem consequatur ab et unde cumque explicabo aliquid maxime sequi atque assumenda doloribus id modi totam magni veniam quae accusamus corrupti. Minima repellendus nam laborum veniam provident libero recusandae voluptatibus mollitia deleniti asperiores, ut consequuntur dolores aut autem, eligendi quam dolorum sequi optio suscipit. Nemo quia alias velit ut at fuga, veniam libero dicta repellendus modi, beatae excepturi ea pariatur blanditiis obcaecati dolore atque necessitatibus porro asperiores. Cum, sunt velit?</p>
</div>
<div id="item3" class="item item3">
<h2>Item 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure ullam dolorem impedit quas sed laudantium nesciunt quos optio aut asperiores similique et explicabo dolor repudiandae, accusantium nemo doloremque nisi porro nam aperiam quidem. Harum officiis nisi ratione nihil sequi earum ea eius qui aliquid cupiditate, consequatur corporis, ipsam consequuntur quis!</p>
</div>
<div id="item4" class="item item4">
<h2>Item 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur dolore officia, dolorem sunt omnis iure accusantium unde laudantium odit quam architecto, obcaecati suscipit ab quod iusto sit rem eum repellendus? Tenetur numquam veritatis voluptas, commodi esse ratione! Vitae dolorum cumque numquam in voluptas necessitatibus totam, asperiores ex facere provident dolores autem, voluptatibus labore perferendis cum quisquam magnam modi tempore vero.</p>
</div>
</div>
</body>
</html>
Raw
styles.css
/* dirty global reset -- in practice this should target elements
since '*' is known to be slow */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* set variables and font size to 62.5% (10px for most systems) */
:root {
--headingFont: 'Oswald', sans-serif;
--bodyFont: 'EB Garamond', serif;
--fgColour: #8eb8e5;
--bgColour: #5b5750;
--accentColour: #f5fbef;
--bgMenuColour: #6b7f82;
font-size: 62.5%;
}
body {
background-color: var(--bgColour);
font-size: 1.6rem;
line-height: 2.5rem;
padding-top: 50px;
}
h1,h2,h3,h4,h5,h6 {
margin: 2rem 0;
font-family: var(--headingFont);
color: var(--fgColour);
}
h1 {
font-size: 5rem;
}
h2 {
font-size: 3rem;
}
p {
font-family: var(--bodyFont);
color: var(--fgColour);
margin: 1rem 0;
}
/* menu wrapper -- layer 1, above content on layer 0 and fixed to upper right*/
.menu-wrapper {
position: fixed;
z-index: 1;
top: 0;
right: 0;
}
/* menu links -- fixed to upper right, hidden but above everything else */
.menu-wrapper .menu-link {
position: absolute;
z-index: 2;
top: 0;
right: 0;
cursor: pointer;
height: 35px;
width: 35px;
opacity: 0;
}
/* default state: hide the menu-close link */
.menu-close {
display: none;
}
/*
-----------------------
All about the burger...
-----------------------
*/
/*
Make the burger
*/
/* place hamburger just under link and with the same dimensions */
.menu-wrapper .menu .hamburger {
position: absolute;
z-index: 1;
top: 0;
right: 0;
cursor: pointer;
height: 35px;
width: 35px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
}
/* generate hamburger middle line */
.menu-wrapper .menu .hamburger .hamburger-lines {
position: relative;
z-index: 1;
height: 2px;
width: 100%;
display: flex;
flex: none;
align-items: center;
justify-content: center;
background-color: var(--fgColour);
transition: all 0.5s ease;
}
/* generate hamburger top and bottom lines */
.menu-wrapper .menu .hamburger .hamburger-lines::before,
.menu-wrapper .menu .hamburger .hamburger-lines::after {
content: '';
position: absolute;
z-index: 1;
top: -7px;
height: 2px;
width: 100%;
background: inherit;
}
/* move lower hamburger line into position */
.menu-wrapper .menu .hamburger .hamburger-lines::after {
top: 7px;
}
/*
Dress the burger (animations)
*/
/* change hamburger line colour when hovering over link */
.menu-wrapper .menu .menu-open:hover ~ .hamburger .hamburger-lines {
background-color: var(--accentColour);
}
/* turn the burger into an 'X' when menu is active */
.menu-wrapper .menu:target .hamburger-lines {
transform: rotate(135deg);
}
.menu-wrapper .menu:target .hamburger-lines::before,
.menu-wrapper .menu:target .hamburger-lines::after {
top: 0;
transform: rotate(90deg);
}
/*
---------------
Menu is open...
---------------
*/
/* Swap menu open and close links */
.menu-wrapper .menu:target .menu-open {
display: none;
}
.menu-wrapper .menu:target .menu-close {
display: block;
}
/* change 'X' to foreground colour for visibility */
.menu-wrapper .menu:target .hamburger .hamburger-lines {
background-color: var(--accentColour);
}
/* rotate the 'X' on hover */
.menu-wrapper .menu:target .menu-close:hover ~ .hamburger .hamburger-lines {
transform: rotate(225deg);
}
/*
---------------------
Style the menu itself
---------------------
*/
/* basic styling for 'nav' container */
.menu-wrapper .menu .menu-items {
position: fixed;
top: 0;
left: 0;
z-index: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
visibility: hidden;
}
/* make inner container overflow 'nav' so we can grow/shrink via animation */
.menu-wrapper .menu .menu-items > div {
display: flex;
flex: none;
height: 200vh;
width: 200vw;
align-items: center;
justify-content: center;
background-color: var(--bgMenuColour);
border-radius: 50%;
transform: scale(0);
transition: all 0.5s ease;
}
/* style menu list */
.menu-wrapper .menu .menu-items > div > ul {
text-align: left;
max-width: 90vw;
max-height: 100vh;
list-style: none;
opacity: 0;
transition: opacity 0.5s ease;
}
/* style list items */
.menu-wrapper .menu .menu-items > div > ul > li {
display: block;
color: var(--accentColour);
font-family: var(--headingFont);
font-size: 3rem;
padding: 1.5rem;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
/* style links */
.menu-wrapper .menu .menu-items > div > ul > li > a {
display: block;
color: inherit;
text-decoration: none;
}
/* animate menu choices */
.menu-wrapper .menu .menu-items > div > ul > li:hover {
border-left: 5px solid var(--accentColour);
border-right: 5px solid var(--accentColour);
}
/*
---------------------------------
Show the menu when link is active
---------------------------------
*/
.menu-wrapper .menu:target .menu-items {
visibility: visible;
}
.menu-wrapper .menu:target .menu-items > div {
transform: scale(1);
transition-duration: 0.75s;
}
.menu-wrapper .menu:target .menu-items > div > ul {
opacity: 1;
}
/*
---------------------------------
Page content
---------------------------------
*/
.content-wrapper {
display: flex;
flex-direction: column;
padding: 0 4rem 0 2rem;
}
.content-wrapper h1 {
align-self: center;
margin-bottom: 3rem;
}
.item {
padding-bottom: 100rem;
}
.realtext {
color: yellow;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment