wordpress导航下拉切换多个内容-区块模板的使用

导航下拉切换多个内容，展示更多的产品、服务等分类内容在导航上

下面是下拉切换的功能截图预览，我们在很多的多产品站点中都可以看到这样的样式：

展开之后是这样的：

在 超级区块WordPress主题-标准版 2.03版本中，我们推出这个功能，其中以我们的区块模板挂载为核心的操作，下拉切换菜单可以放入单个导航项目中，并且固定下拉项目显示，也可以挂载到多个导航项目中，实现多个下拉切换的功能。

这一项功能对于想要在导航上展示较多内容的企业来说，是非常实用的。

以下为操作教程：

视频教程请进入网盘播放

腾讯微云：https://share.weiyun.com/atwE9hSC

百度云下载：https://pan.baidu.com/s/162VIqcbu5QQgsNamZ4K-_w    提取码：dbe3

制作区块模板，显示切换区域的内容

切换菜单所切换展示的内容，是使用区块模板制作的（红框内的内容），因此我们需要创建区块模板制作他们：

进入外观-区块模板–创建区块模板：

按照上图所示填写好标题，这里我设置的是导航产品分类1 你可以以你的具体内容命名，记得加入导航下拉等词进行区分，右侧切换到初始化外观，按照上图设置好。

现在开始制作，我们这次更新准备了一些样板，你可以直接插入样板进行修改：

插入之后

编辑模板，修改成你自己的内容

小贴士：这个样板类在之后的更新中继续增加更多

如果你还不知道如何使用样板快速插入已经制作了的内容，请参考：wordpress主题区块样板功能说明

你也可以插入其他的样板，这里的编辑是没有任何限制的，任意制作均可。

导航菜单挂载到第三层级的区块模板

现在进入外观-菜单-切换到你的 导航菜单

可见上面的菜单结构，第一层为全部产品分类，这个层级是显示在导航默认第一层

五金工具和测量仪器这两个二级菜单是挂在了区块模板的，对应我们上面制作的2个区块模板，可见下图和上图的对照，这样就轻松的将区块模板挂载到了第三层级。

下图示例是指放了一个这样的切换，并且进行了强制显示，如果你不需要强制显示，导航中的其余的一级菜单也可以如此编辑设置，这样你就获得了多个可切换的菜单。

单个固定的下拉切换导航菜单的设置

见下图为单个固定的下拉切换导航菜单，可以看到导航的第一个菜单的下拉子项目是自动展开的，鼠标经过之后，会展开他的下级内容。

想要这样的结构，我们需要使用区块模板挂载到头部进行编辑，默认的自定义下的网站头部是无法编辑到如此复杂的结构的。

区块模板挂载到头部请参考：网站头部模板-使用区块设置网站头部-wordpress古藤堡区块

编辑已经挂载好了的区块模板，注意这个默认展开的结构需要选择模式为双层叠加结构

选择好了双层叠加之后，我们可以对下拉菜单以及导航进行设置

可见上图的设置：

下拉子菜单的宽度：这个宽度取决于你的下拉菜单的文字数量，文字数量较多，菜单宽度可以适当调大

下拉子菜单的高度：一般来说，这个结构下面会有一个幻灯片，或者是其他的图片等内容，下拉菜单和他们的高度保持一致会比较好看、整洁对齐。

下拉子菜单的数量：这个数量是用于预览的，你可以设置对应的数量来查看具体的样式是否美观，注意，这个数量不代表实际的菜单数据。

第一个下拉菜单显示：默认为全部缩起，这样我们就可以放入多个切换菜单，而强制展开第一个，第一个项目下拉直接显示，这种模式下不建议放入多个切换菜单。

高亮第一个元素：可以让第一个菜单下拉项目显示时，高亮这个项目的背景颜色，这样可以和其他菜单项目区分

其他页面会出现的问题

这样配置好了之后，我们如果挂载这个设置了强制显示下拉菜单头部区块模板到公共选项，全局显示，那么其他的页面，如分类目录、文章页会出现这样的状态：

这样的话就影响了其他的内容，所以我们可以利用页面单独挂载头部区块的功能，让需要展开的地方，如：首页页面挂载这个强制的区块模板，而公共的头部（自定义-网站头部设置）则挂载非强制的区块模板，这样就避免了影响其他页面了。