Page Widget How to - Create Hamburger menu

Question

We would like to know how to create Hamburger menu.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.top-nav {<!-- w ww .ja  va2  s. co  m-->
  background: #333;
  padding: 30px;
}

h1 {
  float: left;
  color: #fff;
  margin: 8px 0 0 0;
  font-size: 18px;
  font-family: 'Helvetica', 'Arial';
}

a {
  display: block;
  float: right;
  width: 25px;
  padding: 6px 10px;
  border-radius: 5px;
  background: #444;
}

a:hover {
  background: #555;
}

a em {
  border-bottom: 3px solid #fff;
  background: #fff;
  display: block;
  margin: 4px 0;
}
</style>
</head>
<body>
  <div class="top-nav">
    <h1>My title</h1>
    <a href="#"> <em></em> <em></em> <em></em>
    </a>
    <div style="clear: both"></div>
  </div>
</body>
</html>

The code above is rendered as follows: