harrisonmalone/_hamburger-menus.md

## _hamburger-menus.md

      
    Raw
  

              _hamburger-menus.md
            
          
    🍔 menus

With heaps of people working on hamburger menus I thought I'd put this little piece together with some examples at the bottom.
Essentially with hamburger menus you have 3 options:


You can use the :hover psuedoclass, the menu is display:none until you hover on the icon, the menu needs to be a child of the hamburger, downside of this technique is that :hover doesn't work on touch screen devices


You can use the 'fake checkbox' technique which Aaron told me about yesterday, this requires a bit more setup but have a look at the code that I've posted below, it works on touch screens


JavaScript onclick which is by far the easiest approach, works on all devices, but we'll get to JavaScript in about 6 weeks 🤪!


## clickable-hamburger.css
/* remove all margin and padding */

* {
  margin: 0px;
  padding: 0px;
}

/* html elements */

ul {
  list-style-type: none;
  font-family: sans-serif;
  font-size: 30px;
  color: white;
  background: black;
  position: fixed;
  top: 60px;
}

li {
  padding: 5px 0px;
}

ul a {
  color: white;
  text-decoration: none;
}

/* classes */

.container {
  background: dodgerblue;
  padding: 20px;
}

.ham {
  font-size: 30px;
}

.menu {
  display: none;
}

/* ids */

#button {
  display: block;
  height: 30px;
  width: 30px;
}

#button label span {
  display: block;
}

#button input:checked + span + .menu {
  display: block;
}

#button label input {
  display: none;
}

## clickable-hamburger.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>Harry Malone</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="clickable-hamburger.css">
</head>
<body>
  <div class="container">
    <div id="button">
      <label>
        <input type="checkbox" value="1"><span class="fas fa-bars ham"></span>
        <div class="menu">
          <ul>
            <a href="#1"><li>Menu 1</li></a>
            <a href="#2"><li>Menu 2</li></a>
            <a href="#3"><li>Menu 3</li></a>
          </ul>
        </div>
      </label>
    </div>
  </div>
</body>
</html>

## hover-menu-nav.css
/* remove all padding and margin */

* {
  margin: 0px;
  padding: 0px;
}

/* html elements */

ul {
  list-style-type: none;
  display: inline-block;
  position: fixed;
  right: 20px;
  top: 50px;
  font-family: sans-serif;
  background: black;
}

li {
  padding: 10px;
  color: white;
}

a {
  text-decoration: none;
}

/* classes */

.container {
  padding: 20px;
  background: red;
}

.menu {
  display: none;
}

.hamburger {
  font-size: 30px;
  display: block;
  text-align: right;
  position: relative;
}

.hover {
  display: inline-block;
  position: absolute;
  right: 0px;
  top: 0px;
  height: 30px;
  width: 30px;
}

.hover:hover .menu {
  display: block;
}

## hover-menu-nav.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>Document</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="hover-menu-nav.css">
</head>
<body>
  <div class="container">
    <div class="fas fa-bars hamburger">
      <div class="hover">
        <div class="menu">
          <ul>
            <a href="#1"><li>Menu 1</li></a>
            <a href="#2"><li>Menu 2</li></a>
            <a href="#3"><li>Menu 3</li></a>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
	/* remove all margin and padding */

	* {
	margin: 0px;
	padding: 0px;
	}

	/* html elements */

	ul {
	list-style-type: none;
	font-family: sans-serif;
	font-size: 30px;
	color: white;
	background: black;
	position: fixed;
	top: 60px;
	}

	li {
	padding: 5px 0px;
	}

	ul a {
	color: white;
	text-decoration: none;
	}

	/* classes */

	.container {
	background: dodgerblue;
	padding: 20px;
	}

	.ham {
	font-size: 30px;
	}

	.menu {
	display: none;
	}

	/* ids */

	#button {
	display: block;
	height: 30px;
	width: 30px;
	}

	#button label span {
	display: block;
	}

	#button input:checked + span + .menu {
	display: block;
	}

	#button label input {
	display: none;
	}
	<!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>Harry Malone</title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
	<link rel="stylesheet" href="clickable-hamburger.css">
	</head>
	<body>
	<div class="container">
	<div id="button">
	<label>
	<input type="checkbox" value="1"><span class="fas fa-bars ham"></span>
	<div class="menu">
	<ul>
	<a href="#1"><li>Menu 1</li></a>
	<a href="#2"><li>Menu 2</li></a>
	<a href="#3"><li>Menu 3</li></a>
	</ul>
	</div>
	</label>
	</div>
	</div>
	</body>
	</html>