Ribbon Style Navigation Menu using HTML and CSS

Ribbon Style Navigation Menu using HTML and CSS

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. The above image showing the finished version of the menu bar we are going make.

Today, we will make an awesome-looking navbar with 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. which 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 have 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 mark up. 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 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 mark up, this time, we come to the nav mark up. 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 mark up that you can do very quickly.

You May also like:
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 in 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 mark up. 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 fonts 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 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 nav after pseudo-element. Instead of border-left, border-right will have a transparent background, and in place of the left value 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.



Hope you find this useful. Thanks for vising the blog.


Please do not enter any spam link in the comment box.

Post a comment

Please do not enter any spam link in the comment box.

Post a Comment

Previous Post Next Post