基础6：新菜单组件

>基础6的简化菜单系统：单个适应性的组件替换多个遗产选项。

密钥改进：

<li> >统一的菜单组件：基础6合并内联列表，侧面导航，图标栏和子范围，以单个高度可自定义的“菜单”组件。这简化了开发并降低了框架的大小。 <li> 响应式设计：创建菜单，使用单个代码库在不同的屏幕尺寸和设备上动态调整菜单。 这消除了对台式机和移动设备单独的菜单的需求。> <li>>> javascript插件：通过键盘导航访问下拉插件和手风琴菜单等插件的功能。 <li>轻量级框架：菜单结构的合并导致框架大小显着降低（删除了1000行的CSS超过1000行），从而导致更快的加载时间和更容易的维护。 顶级栏增强功能：<li>顶部栏组件现在支持菜单的左右部分，并在较小的屏幕上包含一个响应式切换。>

在基础6中建立菜单：

>

核心菜单结构很简单：A 带有类的元素，包含 项目和

标签的链接。 其他类控制菜单的外观和行为。

<ul></ul> menu <li>><a></a>简单菜单：

使用

>类删除默认样式并创建完全自定义的外观。<li>

.simple>水平/垂直菜单：默认值是水平的。添加

类以进行垂直方向。 <li>

>嵌套菜单（子菜单）：.vertical使用嵌套 elements intaltical菜单中的子菜单

类。 有关更复杂的交互，请使用下拉列表，钻取或手风琴插件。> <li>

>图标菜单：>使用<ul></ul>>元素（使用Foundation's Icon字体）或标签中的图像标签合并图标。 .nested类位置菜单上方的图标文本。

<li>

>下拉，钻取和手风琴菜单：这些JavaScript供电的插件提供动态的交互式菜单。 分别使用>，<i class="fi-..."></i>和属性来启用这些功能。 事件处理允许进行自定义操作（例如，<a></a>对手风琴的关闭）。

<li>

响应式导航：>使用data-responsive-menu>属性为各种屏幕尺寸定义不同的菜单类型（例如，，small-dropdown）。 medium-drilldown

<li>带左/右截面的顶部栏：使用

>和类，> .top-bar-left集装箱内的类别在两侧都创建带有部分的菜单。 响应式切换（.top-bar-right）在较小的屏幕上显示菜单按钮。 .top-bar data-responsive-toggle 过

结论：

> Foundation 6的重新设计菜单系统在功能和易用性方面都有显着提高。 统一的方法简化了开发，减少代码大小并增强响应能力，使其成为建立现代，灵活网站的强大工具。

以上是基础6：新菜单组件的详细内容。更多信息请关注PHP中文网其他相关文章！