spot_img
HomeDTC品牌出海独立站教程如何在 WordPress 中为浮动导航添加粘性菜单

如何在 WordPress 中为浮动导航添加粘性菜单

JasperAI 10000字免费额度试用

“粘性菜单”确保您的网站导航始终可见。 当导航位于页面顶部时,一旦访问者向下滚动,它就会消失。

解决该问题的第一个尝试是引入框架。 幸运的是,我们已经超越了笨重的框架技术,我们现在可以实现停留在一个地方的优雅导航。

我们将在 Scroll 插件上使用 Sticky Menu(或任何东西!) 我们的导航。 这个名字很绕口,所以为了简单起见,我将该插件称为“Sticky Menu”。

什么是粘性或浮动菜单?

在我们开始之前,我们应该先谈谈术语。 “粘性”和“浮动”都用于描述页面滚动时不会移动的页面元素。

如果这些词看起来自相矛盾,那是因为它们确实如此。 很难想象周围漂浮着什么“粘性”东西。 但是可以对任何一个术语进行争论,并且两者都是常用的,因此我们将在此处互换使用它们。

WordPress divi主题

安装粘性菜单插件

登录到您的 WordPress 管理面板。

在左侧栏导航中,将鼠标悬停在“插件”链接上,然后单击“添加新”链接。

鼠标悬停在

在“搜索插件…”框中,输入“粘性菜单”。

搜索 WordPress Sticky Menu 插件

找到插件后,单击“立即安装”按钮。

点击安装 WordPress Sticky Menu 插件

单击“激活”按钮。

单击以激活 WordPress Sticky Menu 插件

粘性菜单的工作原理

该插件通过使用元素的 CSS 选择器使页面元素具有粘性。 它不能直接在菜单或小部件上工作(不过,对于任何插件开发人员来说,这会很酷)。 但是可以配置您自己的粘性导航栏、菜单或小部件。

谷歌SEO优化服务

我们必须进行一些挖掘才能找到 CSS 选择器 对于我们要粘贴的页面元素。 但是因为插件的工作方式,它比点击版本更灵活。

在页面上查找 CSS 选择器本身就是一个教程。 我不能在这里涵盖整个主题,所以我们将使用一种快速简便的方法来查找 CSS 选择器。

我们的示例使用 Google Chrome“DevTools”。 其他浏览器可能有所不同,但大多数都有类似的工具。

要访问特定元素的 DevTools,请在屏幕上右键单击它。 Mac 用户将使用 CMD 单击。

我想知道菜单的 CSS 选择器。 这就是我想要“坚持”的东西。 因此,我将右键单击菜单并单击“检查”链接。

H10的年终大促

点击

DevTools 窗口将在单独的窗口中打开,或者作为浏览器窗口侧面或底部的面板打开。

正如您在这里看到的,突出显示了许多不同的 CSS 类。 菜单由很多部分组成,DevTools 显示的内容取决于您单击的位置。

开发工具窗口

那么我们想要哪个 CSS 类?

当您将鼠标悬停在“Elements”窗​​口中的代码行上时,您会注意到相应的区域会在页面上突出显示。

因此,让我们将鼠标悬停在“Elements”窗​​口代码上,直到我们的菜单突出显示。

鼠标悬停在

好的,就是这样,但是有很多 CSS 选择器附加到它上面。 有一个 CSS ID 和三四个 CSS 类。

但 DevTools 的另一个领域将引导我们找到我们正在寻找的东西。

右侧的“样式”部分告诉我们,当我们将鼠标悬停在导航代码上时, .main-navigation 是类。

高质量外链购买

查找 CSS 类

这就是我们要使用的。

在粘贴使用多个 CSS 类或 ID 的复杂页面元素时,您可能需要反复试验。 但在这种情况下,我们可以非常确定 .main-navigation 会成功的。

配置粘性菜单

好的。 让我们添加 .main-navigation 选择器到插件配置,看看会发生什么。

在左栏导航中,将鼠标悬停在“设置”链接上,然后单击“粘性菜单(或任何东西!)”链接。

writesonic

点击

我们将使用“Sticky Element”字段来设置我们的粘性图像。 这就是我们输入 CSS 选择器的地方。

其他选项,“页面顶部和粘性元素之间的空间”,“检查管理工具栏”,“屏幕小于时不粘元素”,“屏幕大于时不粘元素”,应该是自选的解释性的。 我们不会在这个演示中使用任何这些。

我会进入 .main-navigation 进入“粘性元素”字段。 请确保选择器名称以点开头。

完成

向下滚动并单击“保存更改”按钮。

点击

现在我们可以看到,如果我们在网站上向下滚动页面,菜单仍然可见。

但它看起来不太好,是吗?

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline

让我们解决这个问题。

将背景颜色应用于粘性菜单

当下面有其他页面文本时,我们的粘性或浮动菜单看起来有点乱码。 菜单是有意透明的,因此如果您更改主题中的背景颜色,它会看起来不错。 但出于我们的目的,它需要背景颜色。

我们将使用“额外的 CSS”来做到这一点。 附加 CSS 的位置取决于您的主题。 但对于许多主题,它位于“主题定制器”中。

在左侧栏导航中,将鼠标悬停在“外观”链接上,然后单击“自定义”链接。

点击

单击以打开“其他 CSS”部分。

打开

为我们的班级定义背景颜色, .main-navigation.

.main-navigation {
  background-color: #ffffff;
}

在“Additional CSS”字段中输入背景颜色 CSS,然后单击“Publish”按钮。

输入CSS,点击

现在,如果我们向下滚动页面,我们将看不到菜单下的文本。

页面菜单背景

粘贴其他页面元素

我们用于粘贴菜单的相同方法可用于任何具有 CSS 选择器的页面元素。

例如,我们可以贴一张图片。 如果我们右键单击图像,图像标签 (

图片代码

图像的 CSS 类是 .wp-image-1692,如果我们像使用菜单选择器那样将其添加到插件中,当我们向下滚动页面时图像仍然可见。

页面上的粘性图像

所以我们使用插件来制作菜单和图像粘性。 但是您可以浮动或粘贴购物车图标、号召性用语按钮——任何具有 CSS 选择器的页面元素。

您可能已经注意到,该插件仅限于单个粘性元素。 开发人员表示,未来的版本将能够配置多个粘性元素。

如果卸载粘性菜单插件会发生什么

如果卸载该插件,使用该插件的元素将受到影响。 配置为粘性的元素将恢复为默认行为。

可用性应该永远是我们的首要任务

WordPress 网站上的浮动菜单通常是一件好事。 让访问者始终可以选择网站选项可以看作是一种可用性增强。

通常。

如果您的菜单或导航很大或很碍眼,那么不断将其浮动在其他站点内容的前面最终会变得烦人。 它甚至可以阻止访问者看到重要内容。

同样,在我们的演示中,浮动小图像可能不是该插件的最佳用途。 但是找到正确的图像 CSS 选择器比找到顶部导航选择器更简单。 这就是为什么使用图像作为示例的原因。

当我们发现可以做很酷的事情的网站技术时,很容易过度使用或滥用它。 制作很重要 可用性 优先考虑并努力使其成为我们网站上的积极力量。

tiktok siteground

你还记得帧吗(记忆是否让你有点畏缩)? 您在网站上使用粘性或浮动元素吗? 在评论中让我知道。

5分钟生成10篇英文软文article forge软件试用
跨境电商独立站代运营服务综合套餐项目合作请联系客服微信 13564054264
服务项目服务模块服务效果服务周期服务费用 RMB
海外市场调研
与品牌诊断
目标市场调研1份调研报告按次(5-7个工作日)5000
消费受众分析
市场准入条件
竞品发展轨迹
市场销售策略
品牌商业化诊断
TikTok
账号代运营
TikTok账号定位3个账号运营
500条视频内容发布
按季度(50-65个工作日)30000
TikTok内容策划
TikTok视频制作
TikTok账号涨粉
TikTok数据分析
TikTok
直播代运营
TikTok直播策划20-24场直播按月度(20-24个工作日)15000
TikTok网络搭建
TikTok选品分析
TikTok话术提炼
TikTok直播开展
TikTok直播数据分析
TikTok
KOL/KOC营销
TikTok行业达人匹配500-1000个达人邀约/天按月度(20-24个工作日)10000
TikTok行业达人邀约
TikTok行业达人签约
TikTok达人合作跟进
TikTok达人合作完成
海外社媒
代运营
海外社媒运营需求确认insgarm
Facebook
Pinterest
Linkedln
海外社媒运营(4选2)
按季度(50-65个工作日)30000
海外社媒运营方案制订
海外社媒代运营开展
海外社媒活动策划&开展
海外社媒账户涨粉&数据分析
海外线下
代理商拓展
渠道代理目标市场确认主要服务地区为欧美/东南亚
限定1-3个国家
按季度(50-65个工作日)35000
渠道代理商信息抓取
渠道代理商邮件邀约
渠道代理商洽谈准备
渠道代理商签约合作
渠道代理商完成合作
海外广告代投放海外广告账户开户TikTok
Google
Facebook
海外广告代投
(电商/游戏)
按季度(50-65个工作日)开户首充1000美金
10%广告投放佣金
海外广告产品分析
海外广告代投计划制订
海外广告代投内容制作
海外广告代投放开展
海外广告代投效果优化项目合作请联系客服微信 13564054264
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES