jQuery Multifunction Responsive Dropdown Menu - developer-nav.js

- September 13, 2018
Developer Nav Preview

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

Main Features

  1. +20 built in skins, attractive plain colors & gradients colors.
  2. Fully responsive - will adapt to any device.
  3. Fixed on top (optional).
  4. Unlimited sub item can be added to a drop down.
  5. CSS transitions with jQuery fallback.
  6. Chrome, Safari, Firefox, Opera, IE7+, IOS, Android and windows phone supported.
  7. Slide and Fade Effects.
  8. Clean and simple HTML structure.
  9. Auto width, Vertical Slide, Adaptiveheight.
  10. Font Awesome icons installed.
  11. SEO and user friendly.
  12. Easy to navigate, simple to implement and customize.

Step by Step Implement Guide:

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-<a href='https://www.jqueryscript.net/tags.php?/map/'>map</a>"></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-<a href='https://www.jqueryscript.net/tags.php?/twitter/'>twitter</a>"></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>
 

Start typing and press Enter to search