Embedded Files
Home > Class Projects> Travel Brochure Project > The Hamburger Menu
HTML, CSS, and Javascript
<!Doctype html>
<html>
<!-- https://reintech.io/blog/creating-hamburger-menu-css-tutorial -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.hamburger-button {
background-color: #333;
color: white;
padding: 15px;
font-size: 24px;
cursor: pointer;
}
.nav-links {
display: none;
background-color: #333;
color: white;
}
.nav-links a {
display: block;
padding: 15px;
color: white;
text-decoration: none;
}
.nav-links a:hover {
background-color: #111;
}
</style>
</head>
<body>
<!-- https://www.compart.com/en/unicode/U+2630
<p>☰ ☰ ☰</p> -->
<!-- Hamburger button -->
<div id="hamburger-menu">
<button class="hamburger-button" onclick="toggleMenu()"> ☰ </button>
<!-- Navigation links to be toggled -->
<div class="nav-links">
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</div>
<script type="text/javascript">
document.querySelector('.hamburger-button').addEventListener('click', function() {
document.querySelector('.nav-links').style.display =
(document.querySelector('.nav-links').style.display == 'none') ? 'block' : 'none';
});
/*
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.hamburger-button').addEventListener('click', function() {
var hamburgerButton = document.querySelector('.hamburger-button');
var navLinks = document.querySelector('.nav-links');
if (hamburgerButton && navLinks) {
hamburgerButton.addEventListener('click', function() {
navLinks.style.display = (navLinks.style.display == 'none') ? 'block' : 'none';
});
}
});
*/
</script>
</body>
</html>
HTML, CSS, and Javascript
<!Doctype html>
<html>
<!-- https://www.w3schools.com/howto/howto_js_mobile_navbar.asp -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Style the navigation menu */
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
display: none;
}
/* Style navigation menu links */
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
/* Style the hamburger menu */
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
/* Add a grey background color on mouse-over */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Style the active link (or home/logo) */
.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="#home" class="active">Logo</a>
<!-- Navigation links (hidden by default) -->
<div id="myLinks">
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
HTML, CSS, and Javascript
<!Doctype html>
<html>
<!-- https://blog.hubspot.com/website/hamburger-button -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.nav {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
</style>
</head>
<body>
<div class="nav"></div>
<div class="nav"></div>
<div class="nav"></div>
<br>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<br>
</div>
</body>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</html>
HTML and CSS
<!doctype html>
<html>
<head>
<!-- https://alvarotrigo.com/blog/hamburger-menu-css-responsive/ -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*, *:before, *:after
{ box-sizing: border-box; }
html { font-size: 18px; }
body {
color: #e0e4cc;
font-size: 1.2em;
line-height: 1.6;
background: #fa6900;
overflow-x: hidden;
}
label .menu {
position: absolute;
right: -100px;
top: -100px;
z-index: 100;
width: 200px;
height: 200px;
background: #FFF;
border-radius: 50% 50% 50% 50%;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
cursor: pointer;
}
label .hamburger {
position: absolute;
top: 135px;
left: 50px;
width: 30px;
height: 2px;
background: #69D2e7;
display: block;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
label .hamburger:after, label .hamburger:before {
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #69d2e7;
}
label .hamburger:before { top: -10px; }
label .hamburger:after { bottom: -10px; }
label input { display: none; }
label input:checked + .menu {
box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;
border-radius: 0;
}
label input:checked + .menu .hamburger {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
label input:checked + .menu .hamburger:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
bottom: 0;
}
label input:checked + .menu .hamburger:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: 0;
}
label input:checked + .menu + ul { opacity: 1; }
label ul {
z-index: 200;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: .25s 0s ease-in-out;
transition: .25s 0s ease-in-out;
}
label a {
margin-bottom: 1em;
display: block;
color: #f38630;
text-decoration: none;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
}
</style>
<body>
<label>
<input type="checkbox">
<span class="menu"> <span class="hamburger"></span> </span>
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="#">About</a> </li>
<li> <a href="#">Contact</a> </li>
</ul>
</label>
<h1>Morphing Fullscreen Hamburger Menu Demo</h1>
</body>
HTML and CSS
<!doctype html>
<html>
<head>
<!-- https://alvarotrigo.com/blog/hamburger-menu-css-responsive/ -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Cabin&display=swap');
body {
padding: 0px;
margin: 0px;
font-size: 20px;
min-height: 200vh;
font-family: 'Cabin', Sans-serif;
}
.overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
background: black;
z-index: -1;
}
#main-menu {
display: block;
height: 100px;
width: 100%;
background: #3D0E61;
margin: 0px;
z-index: 9;
}
#main-menu ul {
max-width: 800px;
width: 100%;
height: 100%;
margin: 0px auto;
padding: 0px;
display: flex;
justify-content: space-evenly;
align-items: center;
z-index: 9;
}
#main-menu li {
list-style-type: none;
font-size: 2rem;
}
#main-menu a {
color: #B9FAF8;
font-size: 1.5rem;
text-decoration: none;
}
#main-menu a:hover {
text-decoration: underline;
}
#hamburger-input{
display: none;
}
#hamburger-menu {
position: fixed;
top: 20px;
left: 20px;
width: 50px;
height: 50px;
display: none;
border: none;
padding: 0px;
margin: 0px;
font-family: 'Cabin', Sans-serif;
background: linear-gradient(
to bottom,
#3D0E61, #3D0E61 20%,
white 20%, white 40%,
#3D0E61 40%, #3D0E61 60%,
white 60%, white 80%,
#3D0E61 80%, #3D0E61 100%
);
}
#hamburger-menu #sidebar-menu {
visibility: hidden;
position: fixed;
top: 0;
left: -250px;
width: 200px;
height: 100%;
background-color: #3D0E61;
transition: 0.3s;
padding: 0px 10px;
box-sizing: border-box;
}
#hamburger-menu h3 {
color: #B9FAF8;
font-size: 2.2rem;
}
#hamburger-menu ul {
padding-left: 0px;
}
#hamburger-menu li {
list-style-type: none;
line-height: 3rem;
}
#hamburger-menu a {
color: #B9FAF8;
font-size: 1.3rem;
text-decoration: none;
}
#hamburger-menu a:hover {
text-decoration: underline;
}
#hamburger-input:checked + #hamburger-menu #sidebar-menu {
visibility: visible;
left: 0;
}
#hamburger-input:checked ~ .overlay{
visibility: visible;
opacity: 0.4;
}
@media screen and (max-width: 2750px) {
#main-menu {
display: none;
}
#hamburger-menu {
display: inline;
}
}
</style>
</head>
<body>
<nav id="main-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<input type="checkbox" id="hamburger-input" class="burger-shower" />
<label id="hamburger-menu" for="hamburger-input">
<nav id="sidebar-menu">
<h3>Menu</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</label>
<div class="overlay"></div>
</body>
</html>
Report abuse