This tutorial will demonstrate the process of creating a curved outer design for an active tab within a navigation menu by utilizing HTML, CSS, and JavaScript. The navigation menu is constructed using the HTML list element, CSS pseudo-elements are applied to introduce an outer curve to the menu, and JavaScript is implemented to include an active class within the menu.
Following are the various examples of making curved outside inactive tab in navigation menu using HTML, CSS & JavaScript.
Example 1:
Example
<! DOCTYPE html>
<html lang = "en">
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1,
shrink-to-fit = no">
<head>
<title> how to make curved active tab in navigation menu using HTML, CSS & JavaScript </title>
<script src =
"https://placehold.co/400x300/3498db/ffffff?text=Sample+Image">
</script>
<link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<style>
body {
color: #fff;
font-family: 'Raleway';
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 1px;
height: 100vh;
margin: 0;
text-transform: uppercase;
}
.gradient-background {
background: linear-gradient(100deg,#200c32,#e74d89,#febaa6);
background-size: 180% 180%;
animation: gradient-animation 9s ease infinite;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.navbar {
position: fixed;
left: 0px;
top: 160px;
height: auto;
width: 100%;
background: #338773;
}
.navbar ul {
display: flex;
list-style-type: none;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
margin-bottom: 0px;
padding-left: 40px;
}
.navbar ul li {
display: inline;
list-style: none;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 1rem;
border-radius: 20px 20px 0px 0px;
position: relative;
}
.navbar ul li.active {
background: #fff;
}
.navbar ul li a {
text-decoration: none;
font-family: 'Bangers', cursive;
color: #22201f;
}
.navbar ul li.active a {
color: #22201f;
}
.navbar ul li b.left-curve {
position: absolute;
bottom: 0px;
left: -20px;
height: 100%;
width: 20px;
background: #fff;
display: none;
}
.navbar ul li b.left-curve::before {
content: " ";
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
border-bottom-right-radius: 20px;
background: #338773;
}
h3 {
text-align: center;
font-weight: bold;
color: #fff;
text-transform: uppercase;
font-size: 1em;
white-space: nowrap;
font-size: 1vw;
z-index: 1000;
font-family: 'Bangers', cursive;
text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
@include skew(0, -6.7deg, false);
@include transition-property(font-size);
@include transition-duration(0.5s);
}
h2 {
text-align: center;
font-weight: bold;
color: #fff;
text-transform: uppercase;
font-size: 1.2em;
white-space: nowrap;
font-size: 3vw;
z-index: 1000;
font-family: 'Bangers', cursive;
text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
@include skew(0, -6.7deg, false);
@include transition-property(font-size);
@include transition-duration(0.5s);
}
.navbar ul li b.right-curve {
position: absolute;
right: -20px;
top: 0px;
height: 100%;
width: 20px;
background: #fff;
display: none;
}
.navbar ul li b.right-curve::before {
content: " ";
right: 0;
position: absolute;
width: 100%;
top: 0;
height: 100%;
border-bottom-left-radius: 20px;
background: #338773;
}
.navbar ul li.active b.left-curve {
display: block;
}
.navbar ul li.active b.right-curve {
display: block;
}
</style>
</head>
<body class = "gradient-background">
<h2> Example </h2>
<h3> How to make curved active tab in navigation menu using HTML CSS & JavaScript? </h3>
<br />
<br />
<div class = "navbar">
<ul>
<li class = "list-item">
<b class = "left-curve"> </b>
<b class = "right-curve"> </b>
<a>
<i class = "fa fa-home"> </i>
Home
</a>
</li>
<li class = "list-item">
<b class = "left-curve"> </b>
<b class = "right-curve"> </b>
<a>
<i class = "fa fa-book"> </i>
Courses
</a>
</li>
<li class = "list-item">
<b class = "left-curve"> </b>
<b class = "right-curve"> </b>
<a>
<i class = "fa fa-image"> </i>
Gallery
</a>
</li>
<li class = "list-item">
<b class = "left-curve"> </b>
<b class = "right-curve"> </b>
<a>
<i class = "fa fa-user"> </i>
Profile
</a>
</li>
<li class = "list-item active">
<b class = "left-curve"> </b>
<b class = "right-curve"> </b>
<a>
<i class = "fa fa-envelope"> </i>
Subscribe
</a>
</li>
<li class = "list-item active">
<b class = "left-curve"> </b>
<b class = "right-curve"> </b>
<a>
<i class = "fa fa-phone"> </i>
Contact
</a>
</li>
</ul>
</div>
</body>
<script>
$(function () {
$("li").click(function (e) {
e.preventDefault();
$("li").removeClass("active");
$(this).addClass("active");
});
});
</script>
</html>
Explanation:
In the demonstration provided earlier, we illustrated the process of generating an external curved active tag by utilizing HTML, CSS, and JavaScript. The external curve was achieved by leveraging CSS pseudo-elements within this implementation.
Output:
Following is the output of this example.
Example 2:
Example
<! DOCTYPE html>
<html lang = "en">
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1,
shrink-to-fit = no">
<head>
<title> how to make curved active tab in navigation menu using HTML, CSS & JavaScript </title>
<script src =
"https://placehold.co/400x300/3498db/ffffff?text=Sample+Image">
</script>
<link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<style>
body {
color: #fff;
font-family: 'Raleway';
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 1px;
height: 100vh;
margin: 0;
text-transform: uppercase;
}
.gradient-background {
background: linear-gradient(100deg,#200c32,#e74d89,#febaa6);
background-size: 180% 180%;
animation: gradient-animation 9s ease infinite;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.navbar {
position: fixed;
left: 0px;
top: 160px;
height: auto;
width: 100%;
background: #338773;
}
.navbar ul {
display: flex;
list-style-type: none;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
margin-bottom: 0px;
padding-left: 40px;
}
.navbar ul li {
display: inline;
list-style: none;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 1rem;
border-radius: 20px 20px 0px 0px;
position: relative;
}
.navbar ul li.active {
background: #fff;
}
.navbar ul li a {
text-decoration: none;
color: #fff;
font-family: 'Bangers', cursive;
}
.navbar ul li.active a {
color: #308d46;
}
li.active a::before {
content: " ";
left: -30px;
bottom: 0;
height: 30px;
width: 30px;
position: absolute;
background: #338773;
border-radius: 50%;
box-shadow: 15px 15px 0 #fff;
}
li.active a::after {
content: " ";
right: -30px;
bottom: 0;
height: 30px;
width: 30px;
position: absolute;
background: #338773;
border-radius: 50%;
box-shadow: -15px 15px 0 #fff;
}
h3 {
text-align: center;
font-weight: bold;
color: #fff;
text-transform: uppercase;
font-size: 0.8em;
white-space: nowrap;
z-index: 1000;
font-family: 'Bangers', cursive;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
@include skew(0, -6.7deg, false);
@include transition-property(font-size);
@include transition-duration(0.5s);
}
h2 {
text-align: center;
font-weight: bold;
color: #fff;
text-transform: uppercase;
font-size: 1.2em;
white-space: nowrap;
font-size: 3vw;
z-index: 1000;
font-family: 'Bangers', cursive;
text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
@include skew(0, -6.7deg, false);
@include transition-property(font-size);
@include transition-duration(0.5s);
}
</style>
</head>
<body class = "gradient-background">
<h2> Example </h2>
<h3> How to make curved active tab in navigation menu using HTML CSS & JavaScript? </h3>
<br />
<br />
<div class = "navbar">
<ul>
<li class = "list-item">
<b class = "left-curve"> </b>
<b class = "right-curve"> </b>
<a>
<i class = "fa fa-home"> </i>
Home
</a>
</li>
<li class = "list-item">
<b class = "left-curve"> </b>
<b class = "right-curve"> </b>
<a>
<i class = "fa fa-book"> </i>
Courses
</a>
</li>
<li class = "list-item">
<b class = "left-curve"> </b>
<b class = "right-curve"> </b>
<a>
<i class = "fa fa-image"> </i>
Gallery
</a>
</li>
<li class = "list-item">
<b class = "left-curve"> </b>
<b class = "right-curve"> </b>
<a>
<i class = "fa fa-user"> </i>
Profile
</a>
</li>
<li class = "list-item active">
<b class = "left-curve"> </b>
<b class = "right-curve"> </b>
<a>
<i class = "fa fa-envelope"> </i>
Subscribe
</a>
</li>
<li class = "list-item active">
<b class = "left-curve"> </b>
<b class = "right-curve"> </b>
<a>
<i class = "fa fa-phone"> </i>
Contact
</a>
</li>
</ul>
</div>
</body>
<script>
$(function () {
$("li").click(function (e) {
e.preventDefault();
$("li").removeClass("active");
$(this).addClass("active");
});
});
</script>
</html>
Explanation:
In the instance shown above, we have demonstrated the process of generating a curved active tag by utilizing HTML, CSS, and JavaScript.
Output:
Following is the output of this example.
Example 3:
Example
<! DOCTYPE html>
<html lang = "en">
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1,
shrink-to-fit = no">
<head>
<title> how to make curved active tab in navigation menu using HTML, CSS & JavaScript </title>
<script src =
"https://placehold.co/400x300/3498db/ffffff?text=Sample+Image">
</script>
<link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<style>
body {
color: #fff;
font-family: 'Raleway';
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 1px;
height: 100vh;
margin: 10;
text-transform: uppercase;
}
h3 {
text-align: center;
font-weight: bold;
color: #fff;
text-transform: uppercase;
font-size: 0.8em;
white-space: nowrap;
z-index: 1000;
font-family: 'Bangers', cursive;
text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
@include skew(0, -6.7deg, false);
@include transition-property(font-size);
@include transition-duration(0.5s);
}
.gradient-background {
background: linear-gradient(100deg,#200c32,#e74d89,#febaa6);
background-size: 180% 180%;
animation: gradient-animation 9s ease infinite;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
h2 {
text-align: center;
font-weight: normal;
color: #fff;
text-transform: uppercase;
font-size: 1.2em;
white-space: nowrap;
font-size: 3vw;
z-index: 1000;
font-family: 'Bangers', cursive;
text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
@include skew(0, -6.7deg, false);
@include transition-property(font-size);
@include transition-duration(0.5s);
}
.button {
background-color: #000;
color: #fff;
position: relative;
width: auto;
display: block;
padding: 14px 30px;
box-sizing: border-box;
float: left;
left: 20%;
transform: translateX(-50%);
font-family: sans-serif;
border-radius: 0 0 12px 12px;
cursor: pointer;
margin-right: 24px;
-webkit-filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, .7));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .7));
z-index: 1;
}
.button {
-webkit-transition: 0s;
transition: 0s;
}
.button:before {
-webkit-transition: 0s;
transition: 0s;
}
.button:after {
-webkit-transition: 0s;
transition: 0s;
}
.button:before, .button:after {
content: " ";
width: 24px;
height: 24px;
position: absolute;
border-radius: 50%;
z-index: -10;
pointer-events: none;
}
.button:before {
left: -36px;
top: -12px;
border-top: 12px solid #000;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
border-bottom: 12px solid transparent;
border-radius: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.button:after {
right: -36px;
top: -12px;
border-top: 12px solid #000;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
border-bottom: 12px solid transparent;
border-radius: 50%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.button:hover {
background-color: pink;
color: #000;
}
.button:hover:before {
border-top: 12px solid pink;
}
.button:hover:after {
border-top: 12px solid pink;
}
</style>
</head>
<body class = "gradient-background">
<h2> Example </h2>
<h3> How to make curved active tab in navigation menu using HTML CSS & JavaScript? </h3>
<br />
<br />
<div class = "button"> <i class = "fa fa-home"> </i> Home </div>
<div class = "button"> <i class = "fa fa-user"> </i> About </div>
<div class = "button"> <i class = "fa fa-image"> </i> Gallery </div>
<div class = "button"> <i class = "fa fa-star"> </i> Services </div>
<div class = "button"> <i class = "fa fa-phone"> </i> Contact </div>
</body>
</html>
Explanation:
In the scenario provided, we've demonstrated the process of crafting a curved interactive tag through the utilization of HTML and CSS. By leveraging HTML buttons, we established an interactive tag menu.
Output:
Following is the output of this example.