HTML CSS Flat Navigation Bar | Flat Navbar With Sub Menu
In this tutorial, we learn how to create Flat Navigation Bar with Sub Menu Using HTML and CSS?
I hope you will aware about Navigation Bar if you don’t know’ don’t worry I will explain everything in this tutorial for creating the CSS Flat Navigation Bar.
previously, I have shared Multi-level Navigation Menu, Horizontal Scrolling Navigation bar, Left Sidebar Navigation Menu you can see also these tutorials, etc.
these type of MenuBar used in almost every website, with the help of Navigation Bar we can Manage all category which I have used on the website.
you can create all navigation program according to your need on the website. therefore in this program have little difference as a comparison of shared previous Navigation Bar, it has a colorful UI and having easy to use, you can.
I hope you will notice that every website builds with a Navigation Bar. so, you can understand, How much Navigation Bar is Important for every website.
therefor, you can say that you will learn to create simple Navigation Bar with Submenu when you hover then you will see the submenus with an attractive color background design.
I have used Gradient colors for design on hover like #ff6600 and #ff0066. this Flat Navigation Bar is not responsive, this is created for the design purpose. if you want to design responsive Navigation with submenu see the given above link.
Basically, this design created with gradient colorful theme background, on mouseover you can see the hover effects, that’s an HTML list Based menu bar designed using CSS. this program will create used UI designed Concept.
Explanation of Source Code for HTML CSS Flat Navigation Bar | Flat Navbar With Sub Menu
let’s discuss here, about the source code which I have used to create the program, First I have used class=”navigationBar”, and used CSS properties for this class such as:
background-color, top, left, display, position, transform, border-radius
|
1 2 3 4 5 6 7 |
background-color: #0c0b0b; top: 10px; left: 50%; display: inline-block; position: absolute; transform: translateX(-50%); border-radius: 50px; |
therefore, for creating dropdown and link I have used HTML List <ul> ,<li> tags. this design is not responsive, it’s designed for the UI Interface purpose.
I have used div id=”logo” for creating the logo section. also I have used more CSS properties for Design UI Interface Such as margin, list-style-type, display, flex, padding, border, border-radius, color, margin, etc.
in CSS, I have used flex display in the CSS for design, after that I have taken different colors for elements like white for links and also white for sub-menus, and also taken background-color: #0c0b0b for the Navigation bar.
therefore on the mouse over the hover effect color gradient such as background: linear-gradient(to bottom, #ff6600 0%, #ff0066 100%);. For the sub-menu, I have used HTML list such as ul li ul li.
therefore, these are the whole concept which I have used to design Flat Navigation Bar, everything here we can not explain in writing, I hope you will understand the source Code after getting.
Enjoy these program and used it on your website, according to your need, definitely, you can use this source code after a few changes without any error.
furthermore, to create this design you need to create two files, such as first file HTML and second File CSS.
First Step: Create HTML File as Name “index.html” | Change FileName as you want
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Stylish Navigation Bar | Tutorialscan.com</title> <link href="https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/stylesheet.css"> </head> <body> <div class="navigationBar"> <div id="logo"> LOGO </div> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Branches</a> <ul> <li><a href="#">IBM Institue Delhi</a></li> <li><a href="#">CIA Institute Mumbai</a></li> <li><a href="#">SIS Globe Institure Pune</a></li> </ul> </li> <li> <a href="#">Course</a> <ul> <li><a href="#">Computer Science</a></li> <li><a href="#">Information Technology</a></li> <li><a href="#">Electrical Engineering</a></li> </ul> </li> <li><a href="#">Gallery</a></li> <li><a href="#">Blog</a></li> </ul> </div> </body> </html> |
Second Step: Create CSS File as Name “stylesheet.css” | Change FileName as you want
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
body { background: #f3f3f3; font-family: sans-serif; } .navigationBar { background-color: #0c0b0b; top: 10px; left: 50%; display: inline-block; position: absolute; transform: translateX(-50%); border-radius: 50px; } #logo { float: left; color: #ecf0f1; font-size: 17px; margin-top: 12px; margin-left: 42px; font-family: sans-serif; } ul { margin: 0; padding: 0 30px; list-style-type: none; position: relative; display: flex; flex: 1 1 auto; } ul li:not(:last-child) { margin-right: 45px; } ul li { padding:10px; border: 1px solid transparent; transition: background 0.2s; border-radius: 5px; } ul li a { color: #fff; text-transform: capitalize; text-decoration: none; transition: color 0.2s; } ul li ul { background: #5f5454; position: absolute; border-radius: 5px; display: block; margin: 12px -12px; padding: 0; visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0.2s; } ul li ul li { width: calc(100% - 20px); margin: -2px 0 0 -2px; line-height: 1.2; } ul li ul li a { color: #fff; } ul li:hover { background: linear-gradient(to bottom, #ff6600 0%, #ff0066 100%); } ul li:hover a { color: #fff; } ul li:hover ul { box-shadow: 0px 3px 5px 2px #EBECF1; visibility: visible; opacity: 1; } ul li:hover ul li a { color: #fff; } |
you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these post.
About Author
