分类
foundation Web Tutorials 教程

下拉菜单

变数 您可以通过使用下表中列出的以下SASS变量来更改组件的样式。 序号 名称与说明 类型 默认值 1个 $ dropdownmenu-arrows 具有下拉菜单的项目启用了箭头。 布尔型 真正 2 $ dropdownmenu-min-width 设置下拉菜单的最小宽度 长度 200像素 3 $ dropdown菜单背景 设置下拉菜单的背景颜色。 颜色 $白色 4 $ dropdown菜单边框 设置下拉窗格的边框。 清单 1像素固体$中灰色

分类
foundation Web Tutorials 教程

下拉窗格

描述 单击按钮时,下拉窗格显示内容。 例 以下示例演示了Foundation 中下拉窗格的使用- <!doctype html> <head> <meta charset = “utf-8” /> <meta http-equiv = “x-ua-compatible” content = “ie = edge” /> <meta name = “viewport” content = “width = device-width, initial-sca […]

分类
foundation Web Tutorials 教程

下拉JavaScript参考

Foundation为下拉菜单提供了JavaScript组件,如下所示。 初始化中 您可以使用foundation.dropdownMenu.js和foundation.core.js插件在JavaScript中初始化下拉菜单。该插件需要以下库- foundation.util.keyboard.js foundation.util.box.js foundation.util.nest.js Foundation.DropdownMenu 它指定一个下拉菜单的实例,如下所示: var elem = new […]

分类
foundation Web Tutorials 教程

水平下拉

描述 通过将属性data-dropdown-menu和class dropdown包含在菜单容器中来设置下拉菜单。在<ul>的<li>标记内,您可以再创建一个新标记<ul>来创建许多级别的下拉菜单。 例 以下示例演示了在Foundation中使用Horizo​​ntal下拉菜单- <!DOCTYPE html> <html> <head> <title>Foundation Template</ […]

分类
foundation Web Tutorials 教程

下拉菜单

描述 向下钻取菜单是一种标准菜单语法,可将嵌套列表更改为垂直向下钻取菜单。 例 以下示例演示了Foundation中的向下钻取菜单的使用- <!doctype html> <head> <meta charset = “utf-8” /> <meta http-equiv = “x-ua-compatible” content = “ie = edge” /> <meta name = “viewport” content = “width = devi […]

分类
foundation Web Tutorials 教程

向下钻取JavaScript参考

Foundation为下拉菜单提供了JavaScript组件,如下所示。 初始化中 您可以使用foundation.drilldown.js和foundation.core.js插件在JavaScript中初始化钻取菜单。该插件需要以下库- foundation.util.keyboard.js foundation.util.motion.js foundation.util.nest.js 基础深化 它指定如下定义的钻取菜单的实例- var elem = new Foundation.Drilldown […]

分类
foundation Web Tutorials 教程

向下钻取基础

描述 下拉菜单使用标准菜单语法。属性数据向下钻取被包括到根<UL>和。菜单对每个嵌套菜单。 例 以下示例演示了Foundation中钻取下拉菜单的使用- <!DOCTYPE html> <html> <head> <title>Foundation Template</title> <meta name = “viewport” content = “width = device-width, initial-scale = 1” […]

分类
foundation Web Tutorials 教程

分隔线

描述 它用于使用<hr>标记在各部分之间进行分隔。 例 以下示例演示了在Foundation中使用基本版式分隔符 – <!doctype html> <head> <meta charset = “utf-8” /> <meta http-equiv = “x-ua-compatible” content = “ie = edge” /> <meta name = “viewport” content = “width = dev […]

分类
foundation Web Tutorials 教程

定义列表

描述 定义列表用于同时使用<dt>和<dd>元素来显示名称值对。元素<dt>代表定义term,这是正在定义的术语,元素<dd>是<dt>的定义。 例 以下示例演示了在Foundation 中定义列表的使用- <!doctype html> <head> <meta charset = “utf-8” /> <meta http-equiv = “x-ua-compatible” content = “ie […]