jQuery Plugins › jQuery Menu Plugins › jQuery sina-nav

Bootstrap 4 Compatible Multi Purpose Menu - jQuery sina-nav

File Size: 1.45 MB
Views Total: 15941
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE9+, FireFox, Opera, Safari#Bootstrap#bootstrap 4#responsive menu#off canvas menu#mega menu
Bootstrap 4 Compatible Multi Purpose Menu - jQuery sina-nav

sina-nav is a multi-purpose menu plugin that helps you create responsive, user-friendly, multi-level, Bootstrap 4 compatible navigation system for your web application.

Features:

  • App style off-canvas menu.
  • Hamburger toggle button.
  • Supports unlimited level of submenus.
  • Mega menu is supported as well.
  • Smooth animations based on Animate.css.

How to use it:

1. Load the necessary jQuery, Bootstrap 4, Animate.css, and Font Awesome in the document.

<!-- Stylesheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

2. Load the jQuery sina-nav plugin's files in the document.

<link rel="stylesheet" href="sina-nav.css">
<script src="sina-nav.js"></script>

3. Create a navigation menu for your project.

<nav class="sina-nav mobile-sidebar navbar-fixed" data-top="0">
  <div class="container">

    <div class="search-box">
      <form role="search" method="get" action="#">
        <span class="search-addon close-search"><i class="fa fa-times"></i></span>
        <div class="search-input">
          <input type="search" class="form-control" placeholder="Search here" value="" name="">
        </div>
        <span class="search-addon search-icon"><i class="fa fa-search"></i></span>
      </form>
    </div><!-- .search-box -->

    <div class="extension-nav">
      <ul>
        <li class="search"><a href="#"><i class="fa fa-search"></i></a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
            <i class="fa fa-shopping-bag"></i>
            <span class="shop-badge">2</span>
          </a>
          <ul class="dropdown-menu shop-menu">
            <li>
              <a href="#" class="shop-item-photo">
                <img src="#" alt="" />
              </a>
              <a href="#" class="shop-item-link">Delica omtantur</a>
              <p class="shop-item-price">2 - $19</p>
            </li>
            <li>
              <a href="#" class="shop-item-photo">
                <img src="#" alt="" />
              </a>
              <a href="#" class="shop-item-link">Delica omtantur</a>
              <p class="shop-item-price">2 - $19</p>
            </li>
            <li class="shop-total-price">
              <a href="#" class="btn btn-secondary shop-btn">Cart</a>
              <span>Total: $0.00</span>
            </li>
          </ul>
        </li>
        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
        <li class="widget-bar-btn"><a href="#"><i class="fa fa-bars"></i></a></li>
      </ul>
    </div><!-- .extension-nav -->

    <div class="sina-nav-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
        <i class="fa fa-bars"></i>
      </button>
      <a class="sina-brand social-on" href="#">
        <h2>
          Sina-nav
        </h2>
        <p>Learn Something New</p>
      </a>
    </div><!-- .navbar-header -->

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-menu">
      <ul class="sina-menu" data-in="fadeInLeft" data-out="fadeInOut">
        <li class="scroll"><a href="#home">Home</a></li>
        <li class="active scroll"><a href="#about">About</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Dropdown</a>
          <ul class="dropdown-menu">
            <li><a href="#">Custom Menu</a></li>
            <li><a href="#">Custom Menu<p class="description">This is Description</p></a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Dropdown</a>
              <ul class="dropdown-menu">
                <li><a href="#">Custom Menu</a></li>
                <li><a href="#">Custom Menu</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Dropdown</a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Custom Menu</a></li>
                    <li><a href="#">Custom Menu</a></li>
                    <li><a href="#">Custom Menu</a></li>
                  </ul>
                </li>
                <li><a href="#">Custom Menu</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown menu-item-has-mega-menu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Megamenu</a>
          <div class="mega-menu dropdown-menu">
            <ul class="mega-menu-row" role="menu">
              <li class="mega-menu-col col-md-4">
                <h4 class="mega-menu-col-title">Menu Titlle</h4>
                <ul class="sub-menu">
                  <li><a href="#">Custom Menu</a></li>
                  <li><a href="#">Custom Menu</a></li>
                  <li><a href="#">Custom Menu</a></li>
                </ul>
              </li>
              <li class="mega-menu-col col-md-4">
                <h4 class="mega-menu-col-title">Menu Titlle</h4>
                <ul class="sub-menu">
                  <li><a href="#">Custom Menu</a></li>
                  <li><a href="#">Custom Menu</a></li>
                  <li><a href="#">Custom Menu</a></li>
                </ul>
              </li>
              <li class="mega-menu-col col-md-4">
                <h4 class="mega-menu-col-title">Menu Titlle</h4>
                <ul class="sub-menu">
                  <li><a href="#">Custom Menu</a></li>
                  <li><a href="#">Custom Menu</a></li>
                  <li><a href="#">Custom Menu</a></li>
                </ul>
              </li>
            </ul><!-- end row -->
          </div>
        </li>
        <li class="scroll"><a href="#blog">Blog</a></li>
        <li class="scroll"><a href="#contact">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- .container -->

  <!-- Start widget-bar -->
  <div class="widget-bar">
    <a href="#" class="close-widget-bar"><i class="fa fa-times"></i></a>
    <div class="widget">
      <h6 class="title">Custom Pages</h6>
      <ul class="link">
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="widget">
      <h6 class="title">Additional Links</h6>
      <ul class="link">
        <li><a href="#">Retina Homepage</a></li>
        <li><a href="#">New Page Examples</a></li>
        <li><a href="#">Parallax Sections</a></li>
        <li><a href="#">Shortcode Central</a></li>
        <li><a href="#">Ultimate Font Collection</a></li>
      </ul>
    </div>
  </div>
  <!-- End widget-bar -->
</nav>

Changelog:

2020-04-24

  • v2.2: Supports mega menu

2019-06-25

  • overlay animation changed

2019-06-13

  • z-index fixed

2019-01-02

  • Added overlay

2018-11-12

  • floating fixed.

2018-11-09

  • Improvement.

2018-11-08

2018-10-15

  • v1.2

This awesome jQuery plugin is developed by shaonsina. For more Advanced Usages, please check the demo page or visit the official website.