Ribbon Style Navigation Menu

Hello Friends, in this blog, I am going to share another CSS snippet based on How to create a Ribbon style Navigation Bar using HTML & CSS. I have shared many snippets based on CSS animation examples, bootstrap, and JavaScript. Make sure to check those snippets as well. For better understanding, please follow the below tutorial from start to finish.

I hope you watched the entire video and got the idea of the coding behind this project. It is a basic navbar created with basic HTML and CSS. for the ribbon edge effect, I have used CSS pseudo-class before and after. Without further explanation, I am providing the code below so that you can have it.

You may like this:

Ribbon Style Navigation menu [ Source Code ]:

for creating the project, make one HTML file with a .html extension and one CSS file with a .css extension. Make sure to link the CSS file in the HTML file, otherwise the HTML elements will not get the style it requires. Copy the code from the code box below and paste it to corresponding files and save it.

ADD HTML

<!DOCTYPE html>
<!--divinectorweb.com-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ribbon Style Navigation menu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="custom-padding">
      <nav>
        <div class="logo">Logo</div>

        <ul class="menu-area">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
</body>
</html>

ADD CSS:

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}
body {
  background-image: url(https://i.postimg.cc/DftcpyvG/1.jpg);
  -webkit-background-size:cover;
  background-size:cover;
  background-position: center center;
  height: 100vh;
}
.menu-area li a {
  text-decoration: none;
}

.menu-area li {
  list-style-type: none;
}

.custom-padding{
  padding-top: 25px;
}

nav {
  position: relative;
  width: calc(100% - 60px);
  margin: 0 auto;
  padding: 10px 0;
  background: #333;
  z-index: 1;
  text-align: right;
  padding-right: 2%;
}

.logo {
  width: 15%;
  float: left;
  text-transform: uppercase;
  color: #fff;
  font-size: 25px;
  text-align: left;
  padding-left: 2%;
}

.menu-area li {
  display: inline-block;
}

.menu-area a {
  color: #fff;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  padding: 0 25px;
  font-size: 14px;
  line-height: 30px;
  position: relative;
  z-index: 1;
}
.menu-area a:hover {
  background: tomato;
  color: #fff;
}

.menu-area a:hover:after {
  transform: translateY(-50%) rotate(-35deg);
}

nav:before {
  position: absolute;
  content: '';
  border-top: 10px solid #333;
  border-right: 10px solid #333;
  border-left: 10px solid transparent;
  border-bottom: 10px solid transparent;
  top: 100%;
  left: 0;
}

nav:after {
  position: absolute;
  content: '';
  border-top: 10px solid #333;
  border-left: 10px solid #333;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  top: 100%;
  right: 0;
}

That's all. I hope you successfully created your own version of the snippet. For more snippets like this, please follow our social media profiles in order to stay connected with the blog. Thank you for visiting the blog.

Post a Comment

Post a Comment

About Us

Contact Form

Ribbon Style Navigation Menu

You might like

Post a Comment

Post a Comment

Contact Form