Multifunctional Responsive Dropdown Menu - jQuery Developer Nav
| File Size: | 14.2 KB |
|---|---|
| Views Total: | 5417 |
| 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.
