Adding a hamburger icon to an existing navigation menu
Question
I have found a tutorial for a navigation menu with a logo to the left. But now I would like it to have the hamburger icon for mobile devices and I'm not sure how to do this. Unfortunately, I have been unable to find a tutorial online with my specific needs but have tried using a tutorial for a hamburger icon but had no luck and went back to the beginning.
<div class="container">
<div class="logo">
<img src="images/logo-large.png" alt="Nathan Ashbury Logo" class="image-1">
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Coding</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
```
.container {
clear: both;
overflow: auto;
}
nav {
background-color: rgba(18,7,88,1.00);
margin: 10px auto;
text-align: center;
width: 95%;
}
.logo img {
float: left;
width: 130px;
}
.image-2 {
display: none;
}
.image-3 {
display: none;
}
nav ul li {
display: inline-block;
padding: 10px;
font-size: 20px;
font-family: "Helvetica", sans-serif;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
nav ul li a:hover {
text-transform: uppercase;
}
1 answers
solution1
0 2020-03-07 06:29:41
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<h1>Example: Creating a hamburger menu</h1>
<div class="top">
<a href="#" class="menu_icon"><i class="material-icons">dehaze</i></a>
</div>
</header>
<nav class="menu">
<a href="#" class="item_menu">home</a>
<a href="#" class="item_menu">about</a>
<a href="#" class="item_menu">products</a>
<a href="#" class="item_menu">services</a>
<a href="#" class="item_menu">contact</a>
</nav>
<main>
Site content.
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
CSS
* { margin: 0 auto; font-family: sans-serif; }
body { margin: 0 auto; }
header {
height: 70px;
background-color: #3e739d;
border-bottom: 1px solid #494949;
display: flex;
align-items: center;
justify-content: center;
}
header > h1 {
width: calc(100% - 160px);
text-align: center;
font-size: 20px;
color: white;
}
header > .top {
position: absolute;
left: 20px;
}
header > .top a.menu_icon i {
color: #000;
font-size: 40px;
padding-top: 5px;
transition: .2s ease;
}
header > .top a.menu_icon:hover i {
color: #fff;
}
nav.menu {
width: 300px;
min-height: calc(100vh - 121px);
background-color: #03a9f4;
position: absolute;
left: -300px;
transition: .3s all;
}
nav.menu > a {
display: block;
padding: 5px;
margin: 15px 0 0px 20px;
color: #494949;
text-transform: uppercase;
}
main {
width: 100%;
padding: 30px;
box-sizing: border-box;
}
footer {
height: 50px;
background-color: #494949;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
bottom: 0;
position: fixed;
width: 100%;
}
.menu_show {
left: 0!important;
}
@media screen and (max-width: 425px) {
header h1 {
font-size: 16px;
}
}
@media screen and (max-width: 360px) {
nav.menu {
width: 100%;
left: -100%;
}
}
To activate the menu, displaying or hiding the navigation list when it is clicked, we use the jQuery library. Here is the click event of the button that contains the class top and jQuery's "toggleClass" function, adding or removing the " menu_show" class from the menu, making it visible or invisible, as follows:
$(document).ready(function() {
$("body").on('click', '.top', function() {
$("nav.menu").toggleClass("menu_show");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.