- jQuery 教程
- jQuery - 主页
- jQuery - 概述
- jQuery - 基础知识
- jQuery - 语法
- jQuery - 选择器
- jQuery - 事件
- jQuery - 属性
- jQuery-AJAX
- jQuery DOM 操作
- jQuery-DOM
- jQuery - 添加元素
- jQuery - 删除元素
- jQuery - 替换元素
- jQuery CSS 操作
- jQuery - CSS 类
- jQuery - 尺寸
- jQuery - CSS 属性
- jQuery 效果
- jQuery - 效果
- jQuery - 动画
- jQuery - 链接
- jQuery - 回调函数
- jQuery 遍历
- jQuery - 遍历
- jQuery - 遍历祖先
- jQuery - 遍历后代
- jQuery用户界面
- jQuery - 交互
- jQuery - 小部件
- jQuery - 主题
- jQuery 参考
- jQuery - 实用程序
- jQuery 插件
- jQuery - 插件
- jQuery - PagePiling.js
- jQuery-Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery 有用资源
- jQuery - 问题与解答
- jQuery - 快速指南
- jQuery - 有用的资源
- jQuery - 讨论
jQuery - Megadropdown.js
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>
这应该产生以下结果 -
点击这里