Educational

Megadropdown.js

Written by

Saim Khalid

in

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"><link rel ="stylesheet" href ="css/reset.css"><link rel ="stylesheet" href ="css/style.css"><script src ="js/modernizr.js"></script></head><body><header><div 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"><li><form class="cd-search"><input type ="search" placeholder ="Search..."></form></li><li class="has-children"><a href ="">images</a><ul class="cd-dropdown-gallery is-hidden"><li class="go-back"><a href ="#0">Menu</a></li><li class="see-all"><a href ="">

                       Browse Gallery&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item" href =""&gt;&lt;img src ="img/img.png" alt ="Product Image"&gt;&lt;h3&gt;Product #1&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item" href =""&gt;&lt;img src ="img/img.png" alt ="Product Image"&gt;&lt;h3&gt;Product #2&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item" href =""&gt;&lt;img src ="img/img.png" alt ="Product Image"&gt;&lt;h3&gt;Product #3&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item" href =""&gt;&lt;img src ="img/img.png" alt ="Product Image"&gt;&lt;h3&gt;Product #4&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class="has-children"&gt;&lt;a href =""&gt;Services&lt;/a&gt;&lt;ul class="cd-dropdown-icons is-hidden"&gt;&lt;li class="go-back"&gt;&lt;a href ="#0"&gt;Menu&lt;/a&gt;&lt;/li&gt;&lt;li class="see-all"&gt;&lt;a href =""&gt;
                       Browse Services&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-1" href =""&gt;&lt;h3&gt;Service #1&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-2" href =""&gt;&lt;h3&gt;Service #2&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-3" href =""&gt;&lt;h3&gt;Service #3&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-4" href =""&gt;&lt;h3&gt;Service #4&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-5" href =""&gt;&lt;h3&gt;Service #5&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-6" href =""&gt;&lt;h3&gt;Service #6&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-7" href =""&gt;&lt;h3&gt;Service #7&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-8" href =""&gt;&lt;h3&gt;Service #8&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-9" href =""&gt;&lt;h3&gt;Service #9&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-10" href =""&gt;&lt;h3&gt;Service #10&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-11" href =""&gt;&lt;h3&gt;Service #11&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-12" href =""&gt;&lt;h3&gt;Service #12&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class="cd-divider"&gt;Divider&lt;/li&gt;&lt;li&gt;&lt;a href =""&gt;Page 1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href =""&gt;Page 2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href =""&gt;Page 3&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/nav&gt;&lt;/div&gt;&lt;/header&gt;&lt;main class="cd-main-content"&gt;&lt;/main&gt;&lt;script src ="js/jquery-2.1.1.js"&gt;&lt;/script&gt;&lt;script src ="js/jquery.menu-aim.js"&gt;&lt;/script&gt;&lt;script src ="js/main.js"&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts