Simple Responsive Navigation Menu

Developer
Mithicher
Size
4,107 Kb
Views
42,504
  1. Simple Responsive Navigation Menu Previews
  2. Simple Responsive Navigation Menu HTML Codes
  3. Simple Responsive Navigation Menu CSS Codes
  4. Simple Responsive Navigation Menu JS Codes

How do I make an simple responsive navigation menu?

A simple responsive navigation menu created with Sass, Compass and little jQuery.. What is a simple responsive navigation menu? How do you make a simple responsive navigation menu? This script and codes were developed by Mithicher on 12 August 2022, Friday.

Simple Responsive Navigation Menu Previews
IQ Test

Simple Responsive Navigation Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Responsive Navigation Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="header"> <div class="wrap"> <h2 class="logo"><a href="#">Website Logo</a></h2> <a id="menu-icon">&#9776; Menu</a> <nav class="navbar"> <ul class="menu"> <li><a class="active" href="#">Home</a></li><!-- --><li><a href="#">About</a></li><!-- --><li><a href="#">Blog</a></li><!-- --><li><a href="#">Work</a></li><!-- --><li><a href="#">Contact</a></li> </ul> </nav> </div>
</header>
<div class="content"> <h2>Simple Responsive Navigation Menu created by <a title="Follow me at twitter" href="https://twitter.com/mithicher">@mithicher</a></h2> <p>Built with Sass &amp; Compass.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Responsive Navigation Menu - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Nunito);
/* Color Palletes */
/*Just change the color e.g. $red or $green or define you color as you like....*/
/* Base Styles */
*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0;
}
html { font-size: 100%; font-family: "Nunito", Arial, sans-serif; font-weight: normal; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: indianred; opacity: 1; text-decoration: none;
}
a:hover { opacity: 0.85; text-decoration: underline;
}
.content { text-align: center; margin-top: 2em;
}
/* Navigation Styles */
/* Header */
.header { position: relative; width: 100%; background: indianred; height: 50px; line-height: 50px; box-shadow: 0 -3px 0 #bc3a3a inset;
}
.wrap { max-width: 960px; /* Changge this with your max-width size */ margin: 0 auto;
}
.logo { font-family: inherit; font-size: 1.5em; margin-left: 1em;
}
.logo a { color: #fff; text-decoration: none; opacity: 1; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.logo a:hover { opacity: 0.85;
}
/* Mobile menu */
#menu-icon { display: block; position: absolute; top: 0; right: 1em; color: #fff; text-decoration: none; font-weight: bold; cursor: pointer; opacity: 1; padding: 0 0.4em;
}
#menu-icon:hover { opacity: 0.85; text-decoration: none; border: none;
}
.navbar { background-color: indianred; float: none; max-height: 0; overflow: hidden; -moz-transition: max-height 0.4s; -o-transition: max-height 0.4s; -webkit-transition: max-height 0.4s; transition: max-height 0.4s;
}
.navbar .menu { margin: 0; padding: 0; list-style-type: none;
}
.navbar .menu li { list-style-type: none; display: block;
}
.navbar .menu li a { display: block; text-decoration: none; color: #fff; padding: 0 0.8em; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; border-bottom: 1px solid #db8b8b;
}
.navbar .menu li a:hover { background-color: #df9797;
}
.navbar .menu li a.active { background-color: #d98383;
}
.expand { max-height: 20em;
}
@media only screen and (min-width: 768px) { .wrap { padding-left: 1em; padding-right: 1em; } .logo { margin-left: 0; } .logo, .navbar { display: inline-block; } /* Mobile menu icon */ #menu-icon { display: none; } .navbar { float: right; max-height: none; } .navbar .menu { box-shadow: 0 -3px 0 #bc3a3a inset; } .navbar .menu li { list-style-type: none; display: inline-block; text-align: center; } .navbar .menu li a { display: block; border-bottom: 0; } .navbar .menu li a:hover { box-shadow: 0 -3px 0 indianred inset; } .navbar .menu li a.active { box-shadow: 0 -3px 0 indianred inset; }
}

Simple Responsive Navigation Menu - Script Codes JS Codes

$(document).ready(function(){ $('#menu-icon').on('click', function(){ $('.navbar').toggleClass('expand'); return false; });
});
Simple Responsive Navigation Menu - Script Codes
Simple Responsive Navigation Menu - Script Codes
Home Page Home
Developer Mithicher
Username mithicher
Uploaded August 12, 2022
Rating 3.5
Size 4,107 Kb
Views 42,504
Do you need developer help for Simple Responsive Navigation Menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mithicher (mithicher) Script Codes
Name
A Pen by Mithicher
Material Design Card - For Blog Post Article
OffCanvas Navigation Menu
Alert Boxes With CSS3
Card Article UI
Material Design Lite components demo
Creating Testimonals With CSS3
Ghost Buttons with CSS3
Material Design Form Inputs
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!