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