A navbar makes it easier for your site visitors to move to specific places within your website. A nice-looking navigation bar always grabs the visitor's attention. This project is about ribbon style navigation menu HTML CSS. The above image shows the finished version of the menu bar we are going to make.
Today, we will learn how to create a ribbon navigation menu. This awesome-looking navbar will create a ribbon effect on the left and right edges of the menu. Designers always want to enhance the website's look so that the visitor gets interested in their website and navigates from one page to another. This is why I made a small effect of creating a navbar snippet, which is unusual than the navbar typically sees in many websites. Earlier I shared a snippet on How to Make a Drop Down Menu using HTML and CSS, where I have shown the basic implementation of a navigation menu with HTML and CSS.
Let's first come to the HTML markup. First of all, we will take a div whose name will be navbar. Inside this class, we will have two main elements: the name Logo and the other will be an unordered list with the name menu-area. Now inside the logo div, we will give the name of the company in text form. You can also use the PNG logo here if you want. After the logo markup, this time, we come to the nav markup. We will take five nav items inside the menu area unordered list. The five menu items are Home, About, Portfolio, Services, and another are Contact. You can use more than one nav item here. We have made a straightforward navbar HTML markup that you can do very quickly.
You May also like:
Now we come directly to the CSS markup. First, we will give a background image to the body and give it a body height of 100Vh. We have used Poppins font for this snippet, and if you want, you can use any Google font as per your need. If you do not have the font on your computer, you need to download the font from Google or use it directly by linking it to your project. I downloaded the font previously on my computer, so I didn't have to link it to my project. We will give 25px padding from the top for the navbar. Then we will provide the nav element a position relative because, based on this element, we will give the effect of ribbon on both sides. Then we will offer a width for Nav Element using CSS calc() function. CSS calc() function is an attribute of CSS used for performing calculations specifying CSS property values. Then we will give the logo 25% width and provide the left float value so that it moves to the left. Then I will do the styling of the menu-area unordered list nav items so that they remain on the right side of the navbar and inline.
What coding we have done so far is the typical styling of any normal navbar. We will use CSS before and after pseudo-element to give a ribbon effect on both sides on the navbar. First, I will provide the nav before pseudo-element, an absolute position value for the left side ribbon effect. Then we will give 10px width of solid and black border-top and border-right value. The width will remain the same for border-left and border-bottom, but the background color will be transparent. After that, we will give it a top 100% and left 0 value to create a folding effect behind the nav. For the right-side ribbon effect, we have to change only two values in the nav after the pseudo-element. Instead of border-left, border-right will have a transparent background, and in place of the left value, the right value will be 0.
Ribbon Style Navigation Menu using HTML and CSS (Source Code):
Copy the code and paste the following codes into your project. After receiving the code, you should not subdue. You have to re-code this code and see what you have learned from it.
HTML:
CSS:
You May also like:
- Bootstrap slider with Text Animation
- Navigation Bar with Slider using HTML CSS & Bootstrap 4
- Simple Preloader Animation using HTML and CSS
You Need two separate files for this. First, you need to make an HTML file for HTML mark up and then you need to make a CSS file to style the elements that you have written in the HTML file. you need to properly link the CSS file to the HTML file in order to get the result. The Source code for this project is given below. what you have to do is to paste the code in the respective file.
Now we come directly to the CSS markup. First, we will give a background image to the body and give it a body height of 100Vh. We have used Poppins font for this snippet, and if you want, you can use any Google font as per your need. If you do not have the font on your computer, you need to download the font from Google or use it directly by linking it to your project. I downloaded the font previously on my computer, so I didn't have to link it to my project. We will give 25px padding from the top for the navbar. Then we will provide the nav element a position relative because, based on this element, we will give the effect of ribbon on both sides. Then we will offer a width for Nav Element using CSS calc() function. CSS calc() function is an attribute of CSS used for performing calculations specifying CSS property values. Then we will give the logo 25% width and provide the left float value so that it moves to the left. Then I will do the styling of the menu-area unordered list nav items so that they remain on the right side of the navbar and inline.
What coding we have done so far is the typical styling of any normal navbar. We will use CSS before and after pseudo-element to give a ribbon effect on both sides on the navbar. First, I will provide the nav before pseudo-element, an absolute position value for the left side ribbon effect. Then we will give 10px width of solid and black border-top and border-right value. The width will remain the same for border-left and border-bottom, but the background color will be transparent. After that, we will give it a top 100% and left 0 value to create a folding effect behind the nav. For the right-side ribbon effect, we have to change only two values in the nav after the pseudo-element. Instead of border-left, border-right will have a transparent background, and in place of the left value, the right value will be 0.
Ribbon Style Navigation Menu using HTML and CSS (Source Code):
Copy the code and paste the following codes into your project. After receiving the code, you should not subdue. You have to re-code this code and see what you have learned from it.
HTML:
CSS:
We hope you find this ribbon navigation menu code useful. There are many source codes available in our site. Make sure to click the load more below our homepage. Thanks for vising the blog.
HOW DO I CHANGE THE COMPANY LOGO TEXT FOR AN IMAGE?
ReplyDeletePost a Comment
Please do not enter any spam link in the comment box.