jQuery Tutorial
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
jQuery Useful Resources
Selected Reading
- jQuery - AJAX
- jQuery - Attributes
- jQuery - Events
- jQuery - Selectors
- jQuery - Syntax
- jQuery - Basics
- jQuery - Overview
- jQuery - Home
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
- jQuery - Weather.js
- jQuery - Megadropdown.js
- jQuery - Producttour.js
- jQuery - Blockrain.js
- jQuery - Checkout.js
- jQuery - Whatsnearby.js
- jQuery - Filer.js
- jQuery - LogosDistort.js
- jQuery - Tagsort.js
- jQuery - Drawsvg.js
- jQuery - Slideshow.js
- jQuery - Progressbar.js
- jQuery - Alertify.js
- jQuery - Rowgrid.js
- jQuery - Slidebar.js
- jQuery - Multiscroll.js
- jQuery - Flickerplate.js
- jQuery - PagePiling.js
- jQuery - Plugins
jQuery Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
jQuery - Megadropdown.js
jQuery - Megadropdown.js
Megadropdown.js is a jQuery plugin for easy and quickly implementing of drop down menu.
Example of Drop down menu as shown below −
<!doctype html>
<html lang = "en" class = "no-js">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "css/reset.css">
<pnk rel = "stylesheet" href = "css/style.css">
<script src = "js/modernizr.js"></script>
</head>
<body>
<header>
<span class = "cd-dropdown-wrapper">
<a class = "cd-dropdown-trigger" href = "#0">Dropdown</a>
<nav class = "cd-dropdown">
<h2>Title</h2>
<a href = "#0" class = "cd-close">Close</a>
<ul class = "cd-dropdown-content">
<p>
<form class = "cd-search">
<input type = "search" placeholder = "Search...">
</form>
</p>
<p class = "has-children">
<a href = "">images</a>
<ul class = "cd-dropdown-gallery is-hidden">
<p class = "go-back"><a href = "#0">Menu<
/a></p>
<p class = "see-all"><a href = "">
Browse Gallery</a></p>
<p>
<a class = "cd-dropdown-item" href = "">
<img src = "img/img.png" alt = "Product Image">
<h3>Product #1</h3>
</a>
</p>
<p>
<a class = "cd-dropdown-item" href = "">
<img src = "img/img.png" alt = "Product Image">
<h3>Product #2</h3>
</a>
</p>
<p>
<a class = "cd-dropdown-item" href = "">
<img src = "img/img.png" alt = "Product Image">
<h3>Product #3</h3>
</a>
</p>
<p>
<a class = "cd-dropdown-item" href = "">
<img src = "img/img.png" alt = "Product Image">
<h3>Product #4</h3>
</a>
</p>
</ul>
</p>
<p class = "has-children">
<a href = "">Services</a>
<ul class = "cd-dropdown-icons is-hidden">
<p class = "go-back"><a href = "#0">Menu<
/a></p>
<p class = "see-all"><a href = "">
Browse Services</a></p>
<p>
<a class = "cd-dropdown-item item-1" href = "">
<h3>Service #1</h3>
<p>This is the item description</p>
</a>
</p>
<p>
<a class = "cd-dropdown-item item-2" href = "">
<h3>Service #2</h3>
<p>This is the item description</p>
</a>
</p>
<p>
<a class = "cd-dropdown-item item-3" href = "">
<h3>Service #3</h3>
<p>This is the item description</p>
</a>
</p>
<p>
<a class = "cd-dropdown-item item-4" href = "">
<h3>Service #4</h3>
<p>This is the item description</p>
</a>
</p>
<p>
<a class = "cd-dropdown-item item-5" href = "">
<h3>Service #5</h3>
<p>This is the item description</p>
</a>
</p>
<p>
<a class = "cd-dropdown-item item-6" href = "">
<h3>Service #6</h3>
<p>This is the item description</p>
</a>
</p>
<p>
<a class = "cd-dropdown-item item-7" href = "">
<h3>Service #7</h3>
<p>This is the item description</p>
</a>
</p>
<p>
<a class = "cd-dropdown-item item-8" href = "">
<h3>Service #8</h3>
<p>This is the item description</p>
</a>
</p>
<p>
<a class = "cd-dropdown-item item-9" href = "">
<h3>Service #9</h3>
<p>This is the item description</p>
</a>
</p>
<p>
<a class = "cd-dropdown-item item-10" href = "">
<h3>Service #10</h3>
<p>This is the item description</p>
</a>
</p>
<p>
<a class = "cd-dropdown-item item-11" href = "">
<h3>Service #11</h3>
<p>This is the item description</p>
</a>
</p>
<p>
<a class = "cd-dropdown-item item-12" href = "">
<h3>Service #12</h3>
<p>This is the item description</p>
</a>
</p>
</ul>
</p>
<p class = "cd-spanider">Divider</p>
<p><a href = "">Page 1</a></p>
<p><a href = "">Page 2</a></p>
<p><a href = "">Page 3</a></p>
</ul>
</nav>
</span>
</header>
<main class = "cd-main-content"></main>
<script src = "js/jquery-2.1.1.js"></script>
<script src = "js/jquery.menu-aim.js"></script>
<script src = "js/main.js"></script>
</body>
</html>
This should produce following result −
Advertisements