Megadropdown.js — это плагин jQuery для простой и быстрой реализации выпадающего меню.
Пример выпадающего меню, как показано ниже —
<!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>
Это должно привести к следующему результату —