Foundation 中文手册 /Foundation 下拉菜单 Foundation 下拉菜单 Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值： 实例 Foundation 实例 下拉菜单按钮 Dropdown Button Link 1 Link 2 Link 3 运行实例 » 点击 "运行实例" 按钮查看在线实例 实例解析 .dropdown类为按钮添加一个向下的箭头符号"图标。 使用按钮或链接的data-dropdown="id"属性来打开下拉菜单。 id值需要与下拉菜单的内容 (id01) 匹配。 在 , ,中添加.f-dropdown类和data-dropdown-content属性来创建下拉菜单的内容。 最后初始化 Foundation JS。 注意:在小屏幕上，所有的下拉菜单的宽度是100%。 下拉菜单尺寸 使用.tiny,.small,.medium,.large或.mega来修改下拉菜单的宽度。 注意:在小屏幕上，所有的下拉菜单的宽度是100%。 实例 Foundation 实例 Tiny Link 1 Link 2 Link 3 Small Link 1 Link 2 Link 3 Medium Link 1 Link 2 Link 3 Large Link 1 Link 2 Link 3 Mega Link 1 Link 2 Link 3 运行实例 » 点击 "运行实例" 按钮查看在线实例 下拉菜单边距 可以使用.content类为下拉菜单添加内边距： 实例 Foundation 实例 下拉菜单内容项 没有内边距 Link 1 Link 2 Link 3 有内边距 Link 1 Link 2 Link 3 运行实例 » 点击 "运行实例" 按钮查看在线实例 其他实例 下拉菜单中添加多媒体元素： 实例 Foundation 实例 下拉菜单内容 下拉按钮 Paris Title Some text.. some text.. Paris, je t'aime. 运行实例 » 点击 "运行实例" 按钮查看在线实例 下拉菜单方向 默认情况下下拉菜单在底部，可以通过添加data-options="align:left|right|top"来修改其方向： 实例 Foundation 实例 下拉菜单方向 右边 Link 1 Link 2 Link 3 顶部 Link 1 Link 2 Link 3 底部 Link 1 Link 2 Link 3 左边 Link 1 Link 2 Link 3 运行实例 » 点击 "运行实例" 按钮查看在线实例 下拉菜单触发条件 默认情况下，下拉菜单在点击按钮后显示。如果你需要在鼠标移动上去后显示，可以在按钮上使用data-options="is_hover:true"属性: 实例 Foundation 实例 下拉菜单触发条件 鼠标移动到我这 Link 1 Link 2 Link 3 运行实例 » 点击 "运行实例" 按钮查看在线实例 分割按钮 我们可以在按钮上添加.split类来设置一个分割效果的按钮，分割后会在 元素上生成一个方向向下的图标按钮: 实例 Foundation 实例 分割按钮 Split Button Link 1 Link 2 Link 3 运行实例 » 点击 "运行实例" 按钮查看在线实例 ← Foundation 图片 Foundation 折叠列表→ 教程导航 大前端 超文本标记语言 CSS HTML5 CSS3 JavaScript jQuery Vue.js 反应 AngularJS Node.js 阿贾克斯 引导程序 基础 JavaScript 高图表 地图应用程序接口 后端开发 PHP ThinkPHP 拉维尔 Python 去 爪哇 C C++ C＃ 联合应用程序 姜戈 网络平台 ASP XML 红宝石 Python3 珀尔 服务程序 卢阿 斯卡拉 应用机器学习 VB脚本 数据库 MySQL 雷迪斯 甲骨文 MongoDB 内存缓存 SQL服务器 移动端 小程序 统一应用程序 扑 安卓 iOS系统 迅速 其它 运维开发 Linux 码头工人 Php学习 git 其它工具 UI设计 阿胡尔 多维控制 网页表格 聚苯乙烯 计算机基础 设计模式 正则表达式 HTTP协议 网站建设指南 浏览器信息 网站主机 TCP/IP 万维网联盟 基本代码 XML DTD XML文档对象模型 XSLT X路径 X查询 星联 X指针 XML模式 XSL-FO 静止无功发生器 网页服务 网页服务 WSDL 肥皂 RSS RDF 提交
