Flat Navigation Menu - CSS + HTML + JQuery
close
Flat Navigation Menu - CSS + HTML + JQuery

Flat Navigation Menu - CSS + HTML + JQuery

Flat Navigation Menu - CSS + HTML + JQuery

Hello welcome friends and today in this article I am going to tell you how you can create flat navigation menu for your website or blog.

I have provided the source code of this flat navigation below you can get that source code and implement it on your website or blog where you want to show this navigation.

This flat navigation looks very much beautiful but one thing that I want to tell us that somehow I was unable to make it responsive for a while but I will try to make it afterwards responsive.

If you resize your screen or change your device you will see that this navigation will overflow and will be hidden that's not a good thing.

So now let me share the source code of this flat navigation menu with you.

First of all let me show you the snapped preview of this flat navigation menu.

Demo / Preview:

Flat Navigation Menu - CSS + HTML + JQuery

How are you buddy today we are going to make Flat Navigation

As you know the HTML markup is mandatory for that so we should have some HTML markup first. Below is the HTML markup.

The HTML, CSS & Javascript code that are provided below can have some encoding errors so i recommend you to used codes from project files in case if there is any error with the working of code.

There are some external files used in the code provided below you can download them if you want:
http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/logo_(1).svg
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

HTML markup for Flat Navigation :

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'><link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'><div class='info'><h1>Flat Navigation</h1><span>Made with<i class='fa fa-heart animated infinite pulse'></i>by<a href='https://www.softwebtuts.com'>Muhammad Muzammil</a><div class='spoilers'>(Dropdown Menu) | (Very Cool!)</div></span></div><div class='nav'><ul><li><a class='logo' href='https://www.softwebtuts.com'><img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/logo_(1).svg'></a></li><li><a href='#portfolio'>Portfolio</a></li><li><a href='#calendar'>Calendar<i class='fa fa-caret-down'></i></a><ul class='menu'><li><a href='#event_one'>Event #1</a></li><li><a href='#event_two'>Event #2</a></li><li><a href='#event_three'>Event #3</a></li></ul></li><li><a href='#resume'>Resume</a></li><li><a href='#about'>About</a></li><li><a href='#privacy-policy'>Privacy Policy</a></li><li><a href='#categories'>Categories</a></li><li><a href='#blog'>Blog</a></li><li><a href='#contact'><div class='fa fa-envelope'></div></a></li></ul></div><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 

I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.

In the code provided above i have added some icons using fontawesome css library that's why i have included the fontawesome library if you will remove it then you will see squares instead icons.

If you want to implement this flat navigation menu into your blogger blog then I recommend you to create a new widget where you want to implement this and add the source code as provided to that widget content.
Without CSS our this script (Flat Navigation) will never look wonderful. So here we are, our HTML markup is ready now we have to personalize our HTML and it can only be done using CSS.

So this is the CSS code which i have written and we will use this to customize Flat Navigation you can copy it by clicking on the code and code will be automatically copied to clipboard.

CSS Code for Flat Navigation :

body{background:#e9e9e9;font-family:'Roboto', sans-serif;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.nav{display:inline-block;background:#FFFFFF;border-radius:3px;border-top:2px solid #ffce54;height:60px}.nav ul{list-style:none;margin:0;padding:0}.nav ul li{position:relative;display:inline-block;height:60px;border-left:1px solid rgba(0, 0, 0, 0.05);vertical-align:middle;float:left}.nav ul li:first-child,
.nav ul li:nth-child(2),
.nav ul li:last-child{border-left:0}.nav ul li:nth-child(2) a:before,
.nav ul li:nth-last-child(2) a:before,
.nav ul li:nth-child(2) a:after,
.nav ul li:nth-last-child(2) a:after{-webkit-transition:all 0.3s linear 0s;-moz-transition:all 0.3s linear 0s;-ms-transition:all 0.3s linear 0s;-o-transition:all 0.3s linear 0s;transition:all 0.3s linear 0s}.nav ul li:nth-child(2) > a:before{z-index:1;position:absolute;top:0;left:-15px;content:'';width:0;height:0;display:block;border-right:15px solid #FFFFFF;border-top:60px solid transparent}.nav ul li:nth-last-child(2) a:after{position:absolute;z-index:1;top:0;right:-15px;content:'';width:0;height:0;display:block;border-left:15px solid #FFFFFF;border-bottom:60px solid transparent}.nav ul li:last-child a{background:#ffce54;padding:0 25px 0 30px;color:#FFFFFF}.nav ul li:last-child a:hover{background:#ffce54}.nav ul li a{position:relative;display:block;padding:0 25px;color:#666666;font-size:14px;line-height:60px;text-decoration:none;-webkit-transition:all 0.3s linear 0s;-moz-transition:all 0.3s linear 0s;-ms-transition:all 0.3s linear 0s;-o-transition:all 0.3s linear 0s;transition:all 0.3s linear 0s}.nav ul li a:hover{background:#f2f2f2}.nav ul li a:hover:before{border-right:15px solid #f2f2f2}.nav ul li a:hover:after{border-left:15px solid #f2f2f2}.nav ul li a.logo{background:#ffce54;width:30px;height:30px;padding:15px 30px 15px 15px;line-height:1;vertical-align:middle}.nav ul li a.logo:hover{background:#ffce54}.nav ul li a.logo img{width:100%}.nav ul li a i{margin:0 0 0 6px}.nav ul li .menu{display:none;position:absolute;background:#FFFFFF;top:100%;width:180px;border-top:1px solid rgba(0, 0, 0, 0.05);border-bottom:3px solid #ffce54;border-radius:0 0 3px 3px;overflow:hidden}.nav ul li .menu li{display:block;width:100%;height:45px;margin:0;border-bottom:1px solid rgba(0, 0, 0, 0.05)}.nav ul li .menu li:nth-child(2),
.nav ul li .menu li:nth-last-child(2){height:45px}.nav ul li .menu li:nth-child(2) a:before,
.nav ul li .menu li:nth-last-child(2) a:before,
.nav ul li .menu li:nth-child(2) a:after,
.nav ul li .menu li:nth-last-child(2) a:after{content:'';display:none}.nav ul li .menu li a{background:#FFFFFF;padding:0 15px 0 30px;color:#666666;line-height:45px;text-align:left}.nav ul li .menu li a:hover{background:#f2f2f2}.info{width:300px;margin:50px auto;text-align:center}.info h1{margin:0;padding:0;font-size:24px;font-weight:400;color:#333333}.info span{color:#666666;font-size:12px}.info span a{color:#000000;text-decoration:none}.info span .fa{color:#ffce54}.info span .spoilers{color:#999999;margin-top:5px;font-size:10px}

In the CSS code I have used a scheme of yellow color you can change his dad color code to your favourite color code and that color code can be in hex or in RGB format.

These are some css selectors that are used in the above css code with their description and example.
SelectorExampleExample description
:first-childp:first-childSelects every <P> elements that is the first child of its parent
:hovera:hoverSelects links on mouse over
:last-childp:last-childSelects every <P> elements that is the last child of its parent

So we have written HTML markup and customised it using CSS and now we will add some functionality in this project (Flat Navigation) to make it work as we want it to be.

To make this project (Flat Navigation) work properly for that we will use JavaScript or jquery in some cases which is a javascript library.

This is the javascript code for our project you can also copy it by simple clicking once and code will be copied automatically.

JavaScript Code for Flat Navigation :

$(".nav li").hover(function () {
$(this).children("ul").stop().delay(200).animate({height: "toggle", opacity: "toggle"}, 200);
});

Customizations :

In the above codes provided you have to make customizations replace following things:
Replace https://www.softwebtuts.com with your own website url.

Completion :

So here we are, We have done and our project Flat Navigation is ready now you can copy and combine all the codes provided above and combine them into single html file and have fun.

If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

Download Project (Flat Navigation) File :

Flat Navigation.zip
File Size 5.08 KB
Click the download button and you will be redirected to download page from where you can download project files.

If you face any difficulty in downloading the project file leave you comment below i will resolve that issue as soon as possible.

I hope that this post help you a lot and I think you will appreciate it so don't take that appreciation with you if you like my post appreciate me in the comment form below.
Thank you !
Disqus Codes

No comments

Notifications

Disqus Logo