如何创建GeneratePress滑出式导航菜单？

GeneratePress滑出式导航菜单的网页设计风格比较简单和简约，做个导航菜单很好用，也可以用在小工具中。魏艾斯笔记分享如何创建GeneratePress滑出式导航的详细步骤。

1、GeneratePress滑出式导航菜单是什么样子的？

如下图所示在页面右上角有三横线导航图标，点击后出现滑出式导航菜单，每个主菜单下面还可以有多个多级菜单。

2、安装Generatepress扩展

实现滑出式导航功能，需要使用 GP Premium插件。这个插件是 GeneratePress主题的高级版本，可以实现很多高级功能。请查阅GP Premium插件安装部署详细图文教程。

滑出式导航是 GP Premium插件提供一个高级功能，从下面购买安装GP Premium插件后，上传安装启用。

登录到 WordPress后台 > 外观 > GeneratePress，依次启用 Colors、Menu Plus、Typography模块。这三个模块分别负责滑出式导航功能、 滑出式导航背景颜色、 滑出式导航字体颜色。有了这三个模块能全面设计滑出式导航功能。

3、添加滑出式导航菜单

创建新的滑出式导航菜单，或选择使用已有菜单，但不要重复。不会添加菜单请移步如何设置WordPress导航菜单和自定义菜单。

在菜单设置勾选 Off Canvas Menu，这样就变成一个滑出式导航菜单了。

4、打开滑出导航菜单

以上的准备工作完成后，下面就可以开启滑出导航菜单了。

打开 WordPress后台 > 外观 > 自定义，依次进入 layout布局 > off canvas panel，第一项可选 on、off、mobile only、desktop only等，选择在开启、禁用、仅限移动端、 仅限桌面端 等四个状态。我们当然选择 on。

• style样式：slide滑动、overlay覆盖。滑动的意思是在左侧或右侧滑动出现导航菜单；而覆盖是全屏覆盖页面内容样式。
• slide滑动：如果上面选择了 slide，这里选择 left还是 right，滑动导航出现在左右哪一侧。
• Close Button：关闭按钮。就是X 这个关闭滑动式导航的按钮，出现在 inside导航内或outside导航外。
• Menu Item Height：导航菜单高度。调整导航菜单高度。

在以上调整设置的同时，在右侧页面可以实时看到结果，很方便。

5、滑出导航菜单的字体、颜色设置

你还可以更改默认的字体、颜色样式，包括字体大小、背景色、字体颜色等。

• 修改字体：Customize 自定义 > Typography 字体 > Off Canvas Panel 滑出导航
• 修改颜色：Customize 自定义 > Colors 颜色 > Off Canvas Panel 滑出导航

6、小工具为滑出式导航添加各种元素

如果你想在滑出导航中添加其他元素，可以在小工具中添加。

定位到 WordPress后台 > 外观 > 小工具，点击+并选择添加合适的元素到 Off Canvas Panel 滑出导航模块中。

老魏演示使用的是古腾堡编辑器，添加一张图片或其他合适的元素，比如段落、标题、按钮、视频、表格等等。

如果你使用的是经典编辑器，可以从左侧拖拽任何已有元素过来展示。

让我们来看一下实现的效果如下：

甚至你可以不做导航菜单，完全用小部件添加内容来实现。

GeneratePress滑出式导航很灵活，只要你花时间细细打磨，完全可以做出一个很漂亮的滑出式导航。