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">

      <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</a></li>

                                                                                                             

                        <li>

                           <a class = "cd-dropdown-item" href = "">

                              <img src = "img/img.png" alt = "Product Image">

                              <h3>Product #1</h3>

                           </a>

                        </li>

 

                        <li>

                           <a class = "cd-dropdown-item" href = "">

                              <img src = "img/img.png" alt = "Product Image">

                              <h3>Product #2</h3>

                           </a>

                        </li>

 

                        <li>

                           <a class = "cd-dropdown-item" href = "">

                              <img src = "img/img.png" alt = "Product Image">

                              <h3>Product #3</h3>

                           </a>

                        </li>

 

                        <li>

                           <a class = "cd-dropdown-item" href = "">

                              <img src = "img/img.png" alt = "Product Image">

                              <h3>Product #4</h3>

                           </a>

                        </li>

                                                                                                 

                     </ul>

                                                                                    

                  </li>

 

                  <li class = "has-children">

                     <a href = "">Services</a>

                                                                                    

                     <ul class = "cd-dropdown-icons is-hidden">

                                                                                    

                        <li class = "go-back"><a href = "#0">Menu<

                           /a></li>

                                                                                                             

                        <li class = "see-all"><a href = "">

                           Browse Services</a></li>

                                                                                                             

                        <li>

                           <a class = "cd-dropdown-item item-1" href = "">

                              <h3>Service #1</h3>

                              <p>This is the item description</p>

                           </a>

                        </li>

 

                        <li>

                           <a class = "cd-dropdown-item item-2" href = "">

                              <h3>Service #2</h3>

                              <p>This is the item description</p>

                           </a>

                        </li>

 

                        <li>

                           <a class = "cd-dropdown-item item-3" href = "">

                              <h3>Service #3</h3>

                              <p>This is the item description</p>

                           </a>

                        </li>

 

                        <li>

                           <a class = "cd-dropdown-item item-4" href = "">

                              <h3>Service #4</h3>

                              <p>This is the item description</p>

                           </a>

                        </li>

 

                        <li>

                           <a class = "cd-dropdown-item item-5" href = "">

                              <h3>Service #5</h3>

                              <p>This is the item description</p>

                           </a>

                        </li>

 

                        <li>

                           <a class = "cd-dropdown-item item-6" href = "">

                              <h3>Service #6</h3>

                              <p>This is the item description</p>

                           </a>

                        </li>

 

                        <li>

                           <a class = "cd-dropdown-item item-7" href = "">

                              <h3>Service #7</h3>

                              <p>This is the item description</p>

                           </a>

                        </li>

 

                        <li>

                           <a class = "cd-dropdown-item item-8" href = "">

                              <h3>Service #8</h3>

                              <p>This is the item description</p>

                           </a>

                        </li>

 

                        <li>

                           <a class = "cd-dropdown-item item-9" href = "">

                              <h3>Service #9</h3>

                              <p>This is the item description</p>

                           </a>

                        </li>

 

                        <li>

                           <a class = "cd-dropdown-item item-10" href = "">

                              <h3>Service #10</h3>

                              <p>This is the item description</p>

                           </a>

                        </li>

 

                        <li>

                           <a class = "cd-dropdown-item item-11" href = "">

                              <h3>Service #11</h3>

                              <p>This is the item description</p>

                           </a>

                        </li>

 

                        <li>

                           <a class = "cd-dropdown-item item-12" href = "">

                              <h3>Service #12</h3>

                              <p>This is the item description</p>

                           </a>

                        </li>

 

                     </ul>

                                                                                    

                  </li>

 

                  <li class = "cd-divider">Divider</li>

 

                  <li><a href = "">Page 1</a></li>

                  <li><a href = "">Page 2</a></li>

                  <li><a href = "">Page 3</a></li>

                                                                        

               </ul>

                                                            

            </nav>

         </div>

      </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>