JSFiddle - React, Tailwind, and code Playground

by itsanujraghuvanshi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="main-nav">
  <div class="container">
    <div class="row">
      <div class="col-xl-9">
        <ul>
          <li class="nav-btn">
            <a href="javascript:void(0)">Purchases</a></li>
          <div class="sub-menu">
            <div class="container">
              <div class="row">
                <div class="col-xl-3">
                  <strong class="sub-title">Books</strong>
                  <ul>
                    <li>
                      <a href="javascript:void(0)">
                        <div class="text">
                          <strong>Test</strong>
                          <span>Dummy text for testing</span>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          </li>
          <li class="nav-btn">
            <a href="javascript:void(0)">Studies</a>
          </li>
          <li class="nav-btn">
            <a href="javascript:void(0)">Writing</a>
          </li>
          <li class="nav-btn">
            <a href="javascript:void(0)">Education</a>
          </li>
          <li class="nav-btn">
            <a href="javascript:void(0)">Masons</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS

/*main nav*/
.main-nav{border-top:#D9D9D9;border-bottom:#D9D9D9;background: #F4F4F4;padding: 10px 0;position: relative;}
.close-menu{margin:5px;display:none}
.mobile-sidemenu{display:none}
.main-nav ul{padding: 0;list-style: none;margin: 0;display: inline-block;}
.main-nav ul li{display: inline-block;margin-right: 15px;position:relative}
.main-nav ul li a{display:block;font-size: 16px;font-weight: 600;padding: 8px;color: #3D3D3D;text-decoration:none}
.main-nav ul li .drop-ico{margin-left: 7px;}
.main-nav .right-menu-link{display: inline-block;float: right;color: #3D3D3D;text-decoration: none;font-weight: 600;padding:8px 12px;position:relative}
.main-nav .nav-btn:before,.main-nav .right-menu-link:before{content:'';position:absolute;left:0;right:0;margin:0 auto;bottom: -10px;width: 0;transition: .2s;height: 4px;background: #3D3D3D;}
.main-nav .nav-btn:hover:before,.main-nav .nav-btn.active:before,.main-nav .right-menu-link:hover:before{width:100%;transition:.2s;}
.main-nav .nav-btn:hover a,.main-nav .nav-btn.active a,.main-nav .right-menu-link:hover{color:#3D3D3D}

/*sub menu*/
.sub-menu{position: absolute;width: 100%;left: 0;top: 60px;padding: 40px 0;background: #fff;box-shadow: -1px 12px 8px rgb(0 0 0 / 25%);z-index: 9;display: none;border-top:1px solid #891C5B}
.main-nav .sub-menu a{padding:8px 0}
.sub-menu ul{list-style: none;margin: 0;padding: 0;}
.sub-menu ul li{padding: 10px 0;display: block;margin: 0;}
.sub-menu .sub-title{text-transform: uppercase;display: block;margin-bottom: 15px;position: relative;font-weight: 600;font-size: 13px;}
.sub-menu .sub-title:before{content: '';width: 60px;background: #C4C4C4;height: 2px;display: block;position: absolute;bottom: -6px;}
.sub-menu .menu-icon{display: inline-block;background: #EDECEE;width: 48px;height: 48px;border-radius: 2px;vertical-align: middle;position: relative;margin-right: 8px;}
.sub-menu a{text-decoration:none}
.sub-menu .menu-icon img{position: absolute;top:50%;transform: translateY(-50%);left:...

JavaScript

$(document).ready(function () {
    $('.nav-btn').on('click', function (e) {
        
        // Stop Document to be clicked when clicked in nav.
        e.stopPropagation()

        $('.nav-btn').removeClass('active');
        var subMenu = $(this).parent().find('.sub-menu')
        if (!$(".sub-menu").is(":visible")) {
            $(this).parent().find('.sub-menu').slideToggle();
        }
        $(this).toggleClass('active');
    });

    // Toggle Sub Menu and remove active when Any vacant place is clicked
    $(this).on('click', function (event) {
        $('.nav-btn').removeClass('active');
        $('.nav-btn').parent().find('.sub-menu').slideToggle();
    });

    // Prevent View close when Sub Items is clicked
    $('.sub-menu').on('click', function (e) {
        e.stopPropagation()
    })
});