Multifunctional Responsive Dropdown Menu - jQuery Developer Nav

Multifunctional Responsive Dropdown Menu - jQuery Developer Nav
File Size: 14.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Developer Nav is a jQuery based cross-platform, cross-browser, multi-level dropdown/off-canvas navigation system for content-heavy websites or web applications.

Fully responsive, mobile friendly and supports unlimited levels of sub menus. The dropdown navigation will be automatically collapsed into an off-canvas toggle menu on mobile/small screen devices.

Comes with 20+ predefined color schemes and fade/slide animations based on CSS3 transitions.

Also can be fixed to the top of the webpage while scrolling down.

How to use it:

1. Include the jQuery Developer Nav's stylesheet and Font Awesome Iconic Font in the head of the document.

<!--Font Awesome-->
<link href="/path/to/font-awesome.min.css" rel="stylesheet">
<!--Developer Nav CSS-->
<link href="/path/to/developer-nav.css" rel="stylesheet">

2. Include the the jQuery Developer Nav's JavaScript library after jQuery.

<!--jQuery-->
<script src="/path/to/jquery.min.js"></script>
<!--Developer Nav Script-->
<script src="/path/to/developer-nav.js"> </script>

3. The HTML to create a developer navigation.

<header class="dev-head endless-river sticky">
  <div class="menu-trigger">
    <div class="nav-icon">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
    </div>
  </div>
  <!--//menu-trigger-->
  <div class="logo"> 
    <a href="#">
    <img src="image/logo.png" title="Logo">
    </a>
  </div><nav>
       <ul class="navigation">
          <li class="has-sub">
             <span class="dropdown-heading"> <i class="fa fa-codepen"></i> My Projects </span>
             <ul>
                <li> <a href="#1"> sub item 1</a></li>
                <li> <a href="#1"> sub item 2 </a> </li>
                <li> <a href="#1"> sub item 3 </a> </li>
                <li> <a href="#1"> sub item 4 </a> </li>
                <li> <a href="#1"> sub item 5 </a> </li>
             </ul>
          </li>
          <li class="has-sub">
             <span class="dropdown-heading"> <i class="fa fa-desktop"></i>  Web Templates </span>
             <ul class="mega">
                <li> <a href="#1"> sub item 1</a></li>
                <li> <a href="#1"> sub item 2 </a> </li>
                <li> 
  <div class="slideshow-container">
       <div class="mySlides" style="display: block;">
          <div class="numbertext">1 / 4</div>
          <img src="image/image1.jpg" alt="this is caption">
          <div class="text">Caption Text</div>
       </div>
       <div class="mySlides" style="display: none;">
          <div class="numbertext">2 / 4</div>
          <img src="image/image2.jpg">
          <div class="text">Caption Two</div>
       </div>
       <div class="mySlides" style="display: none;">
          <div class="numbertext">3 / 4</div>
          <img src="image/image3.jpg">
          <div class="text">Caption Three</div>
       </div>
       <div class="mySlides" style="display: none;">
          <div class="numbertext">4 / 4</div>
          <img src="image/image4.jpg">
          <div class="text">Caption Three</div>
       </div>
       <span class="prev"></span>
       <span class="next"></span>
    </div>
  </li>
             </ul>
          </li>
          <li class="has-sub">
             <span class="dropdown-heading"> <i class="fa fa-code"></i> Coding  </span>
             <ul>
                <li> <a href="#1"> sub item 1</a></li>
                <li> <a href="#1"> sub item 2 </a> </li>
                <li> <a href="#1"> sub item 3 </a> </li>
             </ul>
          </li>
          <li class="has-sub">
             <span class="dropdown-heading"> <i class="fa fa-plug"></i> Plug ins </span> 
             <ul>
                <li> <a href="#1"> sub item 1</a></li>
                <li> <a href="#1"> sub item 2 </a> </li>
                <li> <a href="#1"> sub item 3 </a> </li>
                <li> <a href="#1"> sub item 4 </a> </li>
             </ul>
          </li>
       </ul>
    </nav>
  <!--//logo-->
  <div class="phone" style="display: none;">
    <a href="tel:123456789">
    <i class="fa fa-phone"></i>
    </a>
  </div>
  <!--//phone-->
  <div class="dev-nav">
    <ul class="trigger-board">
       <li class="about hvr-radial-out" title="About"><i class="fa fa-user"></i></li>
       <li class="work hvr-radial-out" title="Work"><i class="fa fa-industry"></i></li>
       <li class="contact hvr-radial-out" title="Contact"> <i class="fa fa-envelope"></i></li>
       <li class="address hvr-radial-out" title="Address"><i class="fa fa-map"></i></li>
    </ul>
    <div class="dev-profile active">
       <img src="image/asif.jpg" alt="developer dp">
       <h5>Asif Mughal </h5>
       <div class="social">
          <a href="#">
             <div class="hvr-float-shadow"> <i class="fa fa-facebook"></i></div>
          </a>
          <a href="#">
             <div class="hvr-float-shadow"> <i class="fa fa-twitter"></i> </div>
          </a>
          <a href="#">
             <div class="hvr-float-shadow"> <i class="fa fa-google-plus"></i></div>
          </a>
       </div>
       <!--//social-->
    </div>
    <!--//dev-profile-->
    <div class="dev-work">
       <h6> What I do </h6>
       <p><i> I do what I love to do. </i><br>
          I am a Freelancer Web Designer & Developer. I have completed various web projects, I always try to build something useful, attractive and unique that inspires you. 
       </p>
    </div>
    <!--//dev-work-->
    <div class="dev-contact-form">
       <h6> Contact Form</h6>
       <form method="get" action="#3">
          <input name="name" type="text" placeholder="Your Name">
          <input name="email" type="text" placeholder="Your Email">
          <textarea rows="3"> </textarea>
          <button class="dev-ctn-btn" type="submit"> Send Message</button>
       </form>
    </div><!--//dev-contact-form-->

    <div class="dev-address">
       <h6> Address & Place </h6>
       Place name, home town,  city etc.
       <br>
       Contact me on whatsapp: <br>
       +923012345678 (imaginary).
    </div> <!--//dev-address-->

  </div><!--//dev-nav-->

</header>

About Author:

Author: Asif Mughal

Website: https://github.com/CodeHimBlog/developer-nav


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