导航是任何网站的一个重要功能。您希望访问者轻松查找并与您的内容进行搞，同时保持与您的一致性网站设计。
粘性菜单可以提供无缝用户体验不损害你的品牌风格。
在本文中，您将学习：
在本文结束时，您将能够使用内置的sticky菜单选择完美的主题，或者从头构建自己的菜单。然后，您可以继续执行其他已证实的方法改善网站的用户体验。让我们开始吧。
什么是粘性菜单？
粘性菜单或固定菜单，是一个导航栏，即使访问者向上和向下滚动页面，也可以在网站上保持可见。它始终可以访问并帮助访客更快地导航您的网站。
这是Hubspot博客主页上的粘性菜单的示例。
为什么实现粘性菜单？
当访问者浏览您的网站时，您想要轻松访问您的内容。有些访客发现它担任滚动回页面顶部以导航网站。
粘性菜单为这个令人讨厌（耗时）问题提供了一个简单的解决方案。使用固定的导航栏，访问者可以快速找到您在网站上所需的内容。它增强了网站体验并诱使访问者消耗更多内容，从而导致较低的反弹率。
如何在WordPress中创建粘性标题菜单
现在，是时候在网站上设置粘性标题菜单了。如果您有技术技能，请从CSS代码方法开始。但是如果您不觉得更改代码舒适，则可以跳至插件方法。
CSS代码方法，用于创建一个粘性标题菜单
您需要手动将CSS代码添加到WordPress主题。按照以下步骤操作。
- 登录您的WordPress仪表板。
- 去外观>自定义。
- 点击额外的CSS。
- 添加此CSS代码：
#网页导航{
背景：#fff;
身高：60px;
Z-指数：170;
边缘：0自动;
边界底：1PX Solid #Dadada;
宽度：100％;
位置:固定;
顶部：0;
左:0;
右：0;
text-align:中心;
}
- 取代＃网站导航使用导航菜单的CSS类或Id。(学习如何在这里找到您的CSS类或ID。）
- 点击蓝色发布按钮。
- 刷新您的网站，查看您的粘性菜单。
创建粘性标题菜单的插件方法
WordPress插件可以让你很容易地添加sticky菜单。不需要编码经验。看看下面的三个插件就可以开始了。
1。myStickymenu
Mystickymenu是一种用于创建定制粘性菜单的流行插件。您的访客将到达导航菜单而不会随时浪费。
- 安装并激活插件。
- 去设置> Mystickymenu.。
- 在下面粘性类， 选择其他类或ID。
- 在旁边的框中，添加您的类或Id。(学习如何在这里找到您的CSS类或ID。）
- 更改任何所需的设置，如背景颜色或不透明度。
- 向下滚动并单击绿色保存按钮。
- 刷新您的网站，查看您的粘性菜单。
2。粘性菜单(或任何!)滚动
滚动上的粘性菜单（或任何内容！）允许您创建固定的导航栏，侧栏和呼叫动作框。还可以选择限制粘性菜单出现在特定屏幕大小上。
- 安装并激活插件。
- 去设置>粘性菜单（或任何东西）。
- 在下面基本设置，添加要成为您的粘性菜单的导航栏。
- 更改任何所需的设置，如页面顶部和粘性元素之间的空格。
- 点击保存设置。
- 刷新您的网站，查看您的粘性菜单。
3.英雄的菜单
英雄菜单是一个用于创建响应性粘性菜单的Premium WordPress插件。它的拖放构建器使其超级易于构建导航的每个方面。您还可以配置菜单的高度，颜色，透明度和字体以适合您的网站。了解有关插件和安装过程的更多信息这里。
粘性菜单最佳实践
遵循这些提示，使您的粘性菜单尽可能友好。
1.设计粘性菜单以反映您的品牌标识。
您希望选择鼓励您的访问者的排版，颜色和图标单击粘性菜单中的链接和其他元素。然而，这并不意味着使用完全不同的字体或来自您的站点的完全不同的字体或颜色。您希望导航菜单仍然反映您的品牌。
例如，例如，您可以从颜色方案中选择对比色的颜色而不是制作菜单的背景颜色。以下面的粘性菜单作为示例。它在页面上脱颖而出，没有从网站的最低纲领设计中脱离。
2.添加您的品牌标志。
在粘性菜单中添加您的徽标是一种简单的方式，可以让您的品牌顶级作为访问者浏览您的内容。这对于需要生成品牌意识并建立更大的业务特别有用。
3.只保留最相关的菜单项。
您不想过度使用粘性菜单过多。在缩小选择时，请考虑与您独特的访客最相关的项目。例如，在电子商务网站上，购物车图标将在导航菜单中包含比关于关于关于关于页面的链接更重要。
Parade的粘性标题菜单是一个很好的例子。它仅提供将为前瞻性或现有客户添加价值的主要链接。
4.为移动浏览器创建定制粘性菜单。
由于您可以在移动设备上使用较少的空间，因此您需要为较小的屏幕尺寸和桌面创建一个专门的菜单。在较小的屏幕上，您需要减少字体大小并隐藏更多菜单项。或者，当人们在移动设备上滚动页面时，您可能会考虑隐藏标题，并在人们向上滚动时显示出现。这些只是您在设计移动导航时可以制作的几种选择。
5.选择在搜索输入字段上放大玻璃图标。
无论你设计的是什么设备，最大化导航菜单的空间都是非常重要的。但这是一种平衡行为:你希望在不损害用户体验的情况下有效地利用空间。一个既能节省空间又能满足访问者期望的方法是用放大镜图标代替搜索输入框。这是一个双赢:喜欢搜索而不是浏览的用户仍然可以选择，现在你可以在菜单中添加另一个项目。
6.添加悬停或滚动动画。
虽然有些动画可能会分散注意力，但其他的可以帮助改善你的网站导航。例如，在维他命商店Anser中，当页面首次加载时，导航条是透明的。这样，它就不会分散功能滑块的注意力。但是如果访问者将鼠标悬停在菜单上，或者向下滚动页面，导航条就会从透明的背景变成纯白色，这样他们就可以很容易地看到并点击导航链接。
7.尝试不同的粘性菜单。
尝试各种不同的粘性菜单将帮助你找到适合你的访客的。你可能想要在确定最终版本前或在游戏开发过程中测试多个变体网站设计。
粘性导航例子
一个吸引人吸引人的粘性菜单将帮助访问者导航您的网站，并使他们与您的内容进行与之参与。使用以下示例作为创建粘性菜单的创意增强。
当我购物时
当我商店是一个旨在使消费者能够在一个方便的地方找到独特的时尚品牌的购物应用程序。粘性菜单清楚地设计了目的的目的。它提供主要导航链接有子类别，让游客可以找到品牌根据身体健康，起源，专业，风格，和更多。
图片来源:whenishop.com
AWD机构
AWD代理是一家专门从事数字创意解决方案的意大利通信公司。raybet电子竞技识别固定导航菜单的问题留下较少的空间用于其他内容，AWD机构选择透明水平标题。这意味着导航栏仍然可以轻松访问，而不会分散主页上的其他重要元素。
搜索引擎Journal.
搜索引擎期刊是SEO和营销人群社区内的主食。该网站的粘性菜单由渴望读者的主题整齐地组织，更容易找到特定内容。
茁壮成长的市场
电子商务零售商Thrive Market使用一个简单的粘性菜单，只显示该品牌的标识和行动号召。这个品牌不会让游客分心去尝试他们的有机产品。
n
耐克使用双排粘性菜单，具有各种重要的导航链接。访问者可以了解新版本，登录其帐户，甚至搜索整个网站。
多媒体
Multimedios是一家墨西哥媒体集团，在广播电视，收音机，出版和娱乐中占有。其网站具有粘性水平标题，在汉堡包按钮后面折叠，因为访问者卷轴。这样，访问者可以单击主页上的任何帖子，或者如果没有找到他们正在寻找的，返回导航菜单以单击其中一个主要导航链接。
乔纳森达福斯塔
与上面的示例不同，Jonathan da Costa的投资组合站点具有粘性垂直导航菜单。这种非传统格式是创意企业和投资组合的理想选择，如哥斯达。
用内置粘性菜单的Wordpress主题
一些WordPress主题用粘性菜单来准备。另一些则提供小工具，这样你只需点击一个按钮就可以让你的菜单变得更有粘性。无论哪种方式，您都不必担心添加代码或安装插件。
以下是您为您探索的最佳建议。
1。突出的主题
突出主题可以让你创建一个惊人的网站预构建布局。它对于新手设计师来说是直观的，但是对于专家来说却足够强大。
2。亲主题
Pro Theme正在重新定义网站开发的未来。主题的头部构建器使您能够创建简单到复杂的粘性菜单。
3.X主题
X主题被认为是其中一个最好的WordPress主题。有了这个主题，你可以安装一个独特的预制网站与sticky菜单-就像下面的演示-只需点击几下。然后，您可以配置您的粘性菜单的每个元素为完美的大小。
4.木星X.
Jupiter X为不同的商业利基提供350多个预构建的网站，包括公司，创意和非营利组织。您还可以从头开始创建自定义页面。无论您是选择预先设计的模板还是从头开始构建一个创建粘性标题很简单。
5。你好元素主题
您好是一个清洁，轻量级的主题专为Elementor，领先的WordPress页面构建器设计。粘性标题菜单列为其许多动态内容功能之一。你可以在几下点击添加一个到您的网站。
了解更多有关在Hubspot Academy的免费课程中使用COMPORALOR建立WordPress网站的信息。
创建自己的粘性导航菜单
通过保持固定和易于访问的访客，无论他们在页面上滚动，粘性菜单可以增强访客的体验WordPress网站。花一些时刻创建一个粘性菜单以改善您的网站主要导航。
最初发布于10月21日，2020年7:00:00，2010年2月17日更新
话题：
WordPress网站相关文章
