粘性侧边栏菜单与传统的水平导航菜单不同,它们占据了网站左侧或右侧的垂直空间。这种菜单始终存在于页面中,即使用户向下滚动页面,菜单也会固定在侧边位置,从而提供连续的导航选项。
通常,粘性侧边栏菜单默认是最小化状态,仅占用少量空间。用户可以点击一个图标来展开菜单,以显示更多的导航链接。这种设计特别适合桌面和平板电脑用户,但对于移动设备而言,传统的水平菜单可能仍然是更好的选择。
在开始创建粘性侧边栏菜单之前,你需要准备以下工具和功能:
首先,你需要确保现有的标题模板仅在移动设备上显示,而不在桌面和平板电脑上显示。为此,请按照以下步骤操作:
这样做可以确保桌面和平板电脑用户仅看到侧边栏菜单,而不会看到常规的水平标题。
接下来,我们将创建一个新模板,用于定义侧边栏菜单的最小化状态。这将是用户初次加载页面时看到的内容。
在“样式”选项卡中,你可以配置侧边栏的背景颜色或渐变,以与网站其他部分保持一致。
在部分模板中添加一些基本的小部件,如网站徽标、导航图标(用于展开完整菜单)以及社交媒体图标。
完成配置后,发布或更新部分模板。
4.创建包含侧边栏导航的新单页模板
接下来,需要使用Elementor主题构建器创建一个新的单页模板,其中包含您网站的内容和粘性侧边导航标题。
为此,请转到模板→主题构建器:
在Elementor编辑器中,创建一个包含两列的部分:
要将常规内容添加到右栏,请添加“帖子内容”小部件。
要将侧边栏导航标题添加到左侧菜单,请添加模板小部件。然后,选择您在上一步中创建的粘性侧边栏标题模板。
侧边栏占据了页面的50%。要解决这个问题,请选择左侧列(带有侧边栏),并在“布局”选项卡中将其列宽设置为5%。这会自动使右侧列等于95%。
设置z-index值可确保你在下一步中创建的完整导航弹出窗口在侧面导航下方滑动。
selector{width:60px;}复制此CSS通过将宽度设置为60像素来确保侧边导航始终保持较窄。可以根据自己的喜好随意调整此数字,但不要偏离60px太多。
现在我们要确保侧面导航始终固定在屏幕上。
为此,请单击右栏上的模板:
现在,发布你的单页模板并使用显示条件来控制其显示位置。如果你想在每个页面上使用粘性侧边导航,请将其设置为显示在所有页面上。
如果将其添加到已有一些现有页面模板的网站,请确保将所有现有模板更改为“草稿”状态以禁用它们并避免潜在的冲突。
为了让用户能够展开完整的导航菜单,我们需要创建一个弹出窗口。这个弹出窗口将在用户点击侧边栏的图标时显示。
发布弹出窗口后,返回到侧边栏模板,配置图标的动态标签为“弹出窗口”,并选择刚刚创建的弹出菜单。
至此,你的粘性侧边栏菜单已经基本完成。打开网站页面,测试侧边栏菜单的功能和外观,确保它按预期工作。
如果在测试中遇到任何问题,建议尝试使用Elementor的Hello主题,以确保与其他主题没有冲突。
粘性侧边栏菜单为WordPress网站带来了全新的设计和导航体验。通过利用Elementor和ElementorPro的强大功能,你可以轻松创建一个灵活且美观的垂直导航菜单,为访客提供更好的浏览体验。