Ever wonder how the common Navigation menu are made manually? Here is the basic guide to create your custom menu manually! We will be using CSS Flex to easily design the layout and Jquery for the menu mobile toggle.
1. Create Basic Html Structure with Class
<div class="custom-menu-header">
<div class="site-logo">Site Logo</div>
<span class="hamburger-menu"></span>
<nav>
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Blog</a>
<a href="#">Contact Us</a>
</nav>
</div>
2. Add Basic Style to your Html
<style type="text/css">
.custom-menu-header{
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content: space-between;
align-items: center;
background: #000;
padding: 10px;
color: #fff;
}
.site-logo img{
width: 70px;
}
nav a{
padding: 10px;
text-decoration: none;
color: #000;
font-weight: bold;
}
nav a:hover{
color: #2196F3
}
}
</style>
3. Add details to Hambuger Menu
<style>
.hamburger-menu {
width: 25px;
height: 20px;
position: relative;
display: block;
}
.hamburger-menu span {
display: block;
width: 100%;
height: 3px;
background: #377dff;
box-sizing: border-box;
margin: 3px 0;
}
</style>
<span class="hamburger-menu">
<span></span>
<span></span>
<span></span>
</span>4. Hide Hamburger Menu on Desktop
<style>
.sp{
display:none;
}
</style>
<span class="hamburger-menu sp">
<span></span>
<span></span>
<span></span>
</span>5. Add Jquery Source and Meta Viewport for Responsive
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>Meta Viewport gives the browser instructions on how to control the page’s dimensions and scaling. Detailed Explanation can be found here.
Jquery is an open-source a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. You may use download the source file and save it locally or you can also use CDN.
6. Add class to your nav and style the display setting using media query
<style>
@media(max-width:768px){
.pc{
display: none;
}
.sp{
display: block;
}
}
</style>
<nav class="pc">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Blog</a>
<a href="#">Contact Us</a>
</nav>7. Add jquery script (in footer section) to toggle your menu
<script type="text/javascript">
jQuery(document).ready(function($) {
$('span.hamburger-menu').click(function(){
$(this).next().slideToggle();
});
});
</script>8. Style Menu on Mobile View and You’re Done!
<style>
@media(max-width:768px){
nav{
border-top: 1px solid #aaa;
width: 100%;
margin-top: 10px;
}
nav a {
display: block;
padding: 7px 0;
font-size: 13px;
}
}
</style>9. Example Code
a. Simple Menu Header with Topbar
<style>
.custom-flex{
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.custom-topbar-1 {
padding: 10px 10px 0;
text-align: right;
font-size: 11px;
}
.site-logo-1 img{
width: 70px;
}
nav.nav-1 a{
padding: 10px;
text-decoration: none;
color: #000;
font-weight: bold;
}
nav.nav-1 a:hover{
color: #2196F3
}
.hamburger-menu-1 {
width: 25px;
height: 20px;
position: relative;
display: block;
flex-wrap: wrap;
align-items: center;
}
.hamburger-menu-1 span {
display: block;
width: 100%;
height: 3px;
background: #377dff;
box-sizing: border-box;
margin: 3px 0;
}
.sp-1{
display: none;
}
@media(max-width:768px){
.pc-1{
display: none;
}
.sp-1{
display: block;
}
.custom-menu-header-1{
padding: 10px;
}
nav.nav-1 {
border-top: 1px solid #aaa;
width: 100%;
margin-top: 10px;
background: #000;
padding: 0 10px;
}
nav.nav-1 a {
display: block;
padding: 7px 0;
font-size: 13px;
color: #fff;
}
}
</style>
<div class="custom-topbar-1 pc-1">
<div>Address Here, PH 6000 | youremail@domain.com</div>
</div>
<div class="custom-menu-header-1 custom-flex">
<div class="site-logo-1"><a href="#"><img src="https://dirctojnn.com/wp-content/uploads/2020/05/logo.png" alt="Dircto Jnn"></a></div>
<span class="hamburger-menu-1 sp-1">
<span></span>
<span></span>
<span></span>
</span>
<nav class="nav-1 pc-1">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Blog</a>
<a href="#">Contact Us</a>
</nav>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('span.hamburger-menu-1').click(function(){
$(this).next().slideToggle();
});
});
</script>b. Center Logo and Fullwidth Navigation (Desktop)
<style>
.custom-flex{
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.custom-menu-header-2{
flex-direction: column;
}
.site-logo-2 img{
width: 70px;
}
nav.nav-2 {
justify-content: space-between;
width: 100%;
}
nav.nav-2 a{
padding: 10px;
text-decoration: none;
color: #000;
font-weight: bold;
}
nav.nav-2 a:hover{
color: #2196F3
}
.hamburger-menu-2 {
width: 25px;
height: 20px;
position: relative;
display: block;
flex-wrap: wrap;
align-items: center;
}
.hamburger-menu-2 span {
display: block;
width: 100%;
height: 3px;
background: #377dff;
box-sizing: border-box;
margin: 3px 0;
}
.sp-2{
display: none;
}
@media(max-width:768px){
.pc-2{
display: none;
}
.sp-2{
display: block;
}
.custom-menu-header-2{
padding: 10px;
flex-direction: row;
}
nav.nav-2 {
border-top: 1px solid #aaa;
width: 100%;
margin-top: 10px;
background: #000;
padding: 0 10px;
}
nav.nav-2 a {
display: block;
padding: 7px 0;
font-size: 13px;
color: #fff;
}
}
</style>
<div class="custom-menu-header-2 custom-flex">
<div class="site-logo-2"><a href="#"><img src="https://dirctojnn.com/wp-content/uploads/2020/05/logo.png" alt="Dircto Jnn"></a></div>
<span class="hamburger-menu-2 sp-2">
<span></span>
<span></span>
<span></span>
</span>
<nav class="nav-2 pc-2 custom-flex">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Blog</a>
<a href="#">Contact Us</a>
</nav>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('span.hamburger-menu-2').click(function(){
$(this).next().slideToggle();
});
});
</script>
Conclusion
There you have it! Start customizing your menu and You’ll love the results especially if you code it from scratch. Happy Coding!
