How to make curved active tab in navigation menu using HTML CSS & JavaScript ?

11 Sep, 2021
In this article, we will learn about the curved outside in the active tab used in the navigation menu using HTML, CSS & Javascript. One of the most beautiful and good-looking designs of a navigation menu is the ‘Curve outside in Active Tab’ design. With the help of the CSS border-radius property, it is very easy to make an inside curve. But while making an outside curve it becomes complex. So we are going to learn How to make a ‘Curved Outside in Active Tab’ in Navigation Menu Using Html CSS & JavaScript using the following approaches:
Method 1: Styling two pseudo-elements.
Method 2: Using the box-shadow of an above circle
Outside Curve: An outside curve is the rounded outward corner through which we connect our active element to any other element of the document. Let’s see an example:
We are going to make a ‘Curved Outside in Active Tab in Navigation Menu’ using the following steps: 
Make a Navigation Menu With an active tab:
Now before going to the ‘Outside Curve’ part we are going to create a simple navigation menu using HTML and CSS and make a default active item inside the navigation menu in the following steps : 
Create a div element of class navigation.
Create an unordered list inside the div.
Add the icons and links you want to as a list item of the unordered list.
Choose a list item for our default active item. Add a class active to this item.
Add custom CSS, background and font to make our navigation good-looking.
Add the JavaScript – Make the active tab movable on click:
We have successfully created a side navigation bar with an active tag. Now it is our task to make the link active which is clicked. With the help of JavaScript and jQuery we are going to do it in the following steps : 
Add the jQuery library into our HTML document.
Add a click event to all the list items of the navigation menu.
Prevent the default to prevent the restoration of the previous state.
Inside that function remove the ‘active’ class from the existing active list item.
Add the ‘active’ class to the clicked list item.
Method 1: Styling two pseudo-elements
Add two extra <b> tags at the top of the <a> tag inside the list element. These will perform as pseudo-elements.
Add a class of ‘left-curve’ to the first <b> tag and ‘bottom-curve’ to the second <b> tag.
Create a rectangle at the left using the <b> tag with class ‘left-curve’.
Add a border-radius to the elements of this class using css : : before selector.
Make the display of the left-curve as ‘none’.
Make the display a ‘block’ when the link is active.
Repeat the same process for the ‘right-curve’ (the second <b> tag).
Example :
HTML
<!DOCTYPE html><html lang="en">  <head>    <title>Curved Outside Active Tab | Geeksforgeeks</title>      <!--JQuery Library-->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </script>      <!--Font Awesome for the icons-->    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />      <!--Style for making the navigation menu-->    <style>        .navbar {            position: fixed;            left: 0px;            top: 0px;            height: auto;            width: 100%;            background: #308d46;        }          .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;        }          .navbar ul li.active a {            color: #308d46;        }    </style>      <!-- The Pseudo elements : Style       for the outside curve-->    <style>        .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: #308d46;        }          .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: #308d46;        }          .navbar ul li.active b.left-curve,        .navbar ul li.active b.right-curve {            display: block;        }    </style>      <script>        $(function () {            $("li").click(function (e) {                e.preventDefault();                $("li").removeClass("active");                $(this).addClass("active");            });        });    </script></head>  <body>    <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>                    My Courses                </a>            </li>            <li class="list-item">                <b class="left-curve"></b>                <b class="right-curve"></b>                <a>                    <i class="fa fa-user"></i>                    My Profile                </a>            </li>            <li class="list-item active">                <b class="left-curve"></b>                <b class="right-curve"></b>                <a>                    <i class="fa fa-star"></i>                    Go Premium                </a>            </li>        </ul>    </div></body>  </html>
Output :
Method 2: Using the box-shadow of an above circle
Create a circle at the top and at the bottom of the active link using ::before and ::after selectors.
Create a box-shadow of the circle with the same parameters.
Make the color of the circle the same as the background color of the navigation bar and the color of the box-shadow same as the color of the outside div. Now the active link is curved outside.
Example:
HTML
<!DOCTYPE html><html lang="en">  <head>    <title>Curved Outside Active Tab | Geeksforgeeks</title>      <!--Font Awesome for the icons-->    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />      <!--JQuery Library-->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </script>      <!--Style for making the navigation menu-->    <style>        .navbar {            position: fixed;            left: 0px;            top: 0px;            height: auto;            width: 100%;            background: #308d46;        }          .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;        }          .navbar ul li.active a {            color: #308d46;        }    </style>      <!-- The Circles with box-shadow-->    <style>        li.active a::before {            content: "";            left: -30px;            bottom: 0;            height: 30px;            width: 30px;            position: absolute;            background: #308d46;            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: #308d46;            border-radius: 50%;            box-shadow: -15px 15px 0 #fff;        }    </style>      <script>        $(function () {            $("li").click(function (e) {                e.preventDefault();                $("li").removeClass("active");                $(this).addClass("active");            });        });    </script></head>  <body>    <div class="navbar">        <ul>            <li class="list-item">                <a>                    <i class="fa fa-home"></i>                    Home                </a>            </li>            <li class="list-item">                <a>                    <i class="fa fa-book"></i>                    My Courses                </a>            </li>            <li class="list-item">                <a>                    <i class="fa fa-user"></i>                    My Profile                </a>            </li>            <li class="list-item active">                <a>                    <i class="fa fa-star"></i>                    Go Premium                </a>            </li>        </ul>    </div></body>  </html>
Output: 
Blogathon-2021
CSS-Properties
CSS-Questions
HTML-Questions
HTML-Tags
JavaScript-Questions
Picked
Blogathon
CSS
HTML
JavaScript
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Import JSON Data into SQL Server?
SQL Query to Convert Datetime to Date
Scrape LinkedIn Using Selenium And Beautiful Soup in Python
Python program to convert XML to Dictionary
Shared ViewModel in Android
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form