• jQuery Video Tutorials

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>

This should produce following result −

Click here
Advertisements