PrestaShop 1.6.x. 如何使用“TM Mega Menu”模块(v.1.7.0+)

本教程将向您展示如何进行配置 TM Mega Menu module (v.1.7.0+).

This module 是为了创建复杂的菜单而设计的. The module 提供显示一个项目的能力(没有子菜单), 具有子菜单的菜单项和具有多行和多列子菜单块的菜单项. The module 可以用在不同的位置，但会显示相同的内容吗.

可用位置:top(displayTop)， left(displayLeftColumn)， right(displayRightColumn)， footer(displayFooter). 您可以添加类别(带有子类别)， CMS 类别(带子类别), 制造商(一个或一个列表), suppliers (one or a list), 存储区(如果使用多存储区), links to any product, 关于产品的信息块, 自定义链接(数量不限), custom HTML 积木(数量不限), 此外，你可以添加YouTube视频(与链接)和谷歌地图位置, also not limited. 下面我们将详细回顾每个功能.

TM Mega Menu module 是分成哪些部分便于管理. 在第一行中，您将看到可以添加到菜单中的可用功能. 下面您将看到每行都包含条目. 您还可以编辑控件的样式 module. 它允许您创建顶层元素的自定义外观, Badges, 第一层和下一层元素以及它们的链接和 hover & active conditions.

1. Add an item element.

   • 这个项目表示出现在菜单中的基本菜单元素. 如果需要配置已有的配置，可单击 ‘Edit’ 按钮(也可以删除项)。 ‘Item List’, we are going to add one. To do it, click on the Add item button.
   • 在打开的窗口中，可以配置 New Item 这将出现在菜单中. Let’s review each field:

     • Enter item name Is required字段-这将显示菜单项的名称.

     • Active -它给你一个选项来显示菜单项或隐藏它.

     • Link:您可以选择外部链接, 哪个是URL还是现有的, 在第一种情况下，您需要粘贴下面的URL, 在第二，你需要从列表中选择链接，当你点击现有的URL.

     • Sort Order 会按照您输入的顺序显示项目吗. 例如，如果插入1，则菜单项将是列表中的第一个.

     • Specific class 如果您希望对菜单项实现任何自定义CSS更改，则设置.

     • Enter item badge 为菜单项提供了使用徽章的可能性. 例如，如果您有一个新的产品类别，您可以键入 New.

     • It is megamenu 为该菜单项提供了使用大菜单的可能性. It can be easily configured. 当你使项目成为Mega Menu时，你将得到一个选项来添加行，然后将其划分为列. 列的最大大小为12. 然后，您将看到用户友好的框，允许您从列表中添加或删除内容.

       

     • Use simple menu 选项将为您提供添加子菜单项的可能性. 从“可用项目”列表中选择您希望添加的项目, 然后点击下面的“添加”将它们移动到“选定项目”.

       

     配置完菜单项后，单击 Save or Save or Stay. 现在您已经看到了如何配置Menu Items元素. 将作为您添加的项目列表出现在第一行中.

   注意:为了添加任何项目到您的菜单-横幅, maps, videos etc, 您需要通过菜单项添加它们. So, for example, 如果您想将Map添加到菜单中, 将菜单项设置为Megamenu，然后将Map分配给它.

2. Add HTML element

   此项为您提供了多种可能性，可以在的帮助下创建自定义内容 HTML. 您将能够自定义添加元素 HTML 你可能更喜欢的代码. To add this click Add HTML. 您需要将配置设置为以下字段:

   

   Let’s review each:

   • Enter HTML item name -这是一个必填字段，它将显示一个新的 HTML item.

   • Specific Class -这个选项让你有可能分配一个 custom class to your menu item. 您可以进一步将其用于其他CSS规则实现.

   • HTML content – the following editor (列在上图' 3 '下)用于您的 HTML content. 你需要把它粘贴在这里. 此外，它有额外的选项卡，帮助您使它更容易使用. 如果要粘贴plain HTML you can use the Tools > Source tab to do so.

   Now you’ve seen how to add HTML items to your Mega Menu. 让我们转到下一个特性.

3. Add Link

   The Add Link 如果您需要，只需添加菜单项并设置到它的链接，而无需配置任何其他字段，功能非常方便. It is quite easy to use!

   • Enter Link name -这将是一个项目的名称.

   • Enter Link URL – the item URL.

   • Specific Class -这个选项让你有可能分配一个 custom class to your menu item. 您可以进一步将其用于其他CSS规则实现.

   • Open in new window -当这个选项被设置为是，项目在一个新的窗口打开，当否-在相同的.

4. Add Banner

   The Banner 项目是非常方便的，当你需要添加菜单项与图像, 表示您的新类别或任何其他类别 event. 您需要有一个图像来上传和设置所需的字段. Click the Add Banner button. 让我们在需要填充的领域中冲浪:

   • Select a file 需要从计算机上浏览图像的字段是必需的吗. web的首选图像是 JPEG or PNG types.

   • Enter Banner name -它将是…的名字 banner，不可见的客户，最好应该是相同的 Public Title field beneath.

   • Specific Class -这个选项让你有可能分配一个 custom class to your menu item.

   • Public Title this is the Banner 客户可以看到的标题.

   • Description this is the same editor as in the HTML feature. 它使您可以将自定义内容添加到 banner, including the HTML.

   • Open in new window -当这个选项被设置为是，项目在一个新的窗口打开，当否-在相同的.

5. Add Video

   The Add Video 是一个功能，让您及时添加您的自定义视频形式YouTube或Vimeo的链接. 这个特性只有两个字段需要填写. The first one is Enter Video name 商品的名称是什么. The field beneath is called Enter Video URL，你需要粘贴你的YouTube/Vimeo视频的URL在这里. 您还可以查看该字段下方的链接示例.

6. Add Map

   下面的特性使您可以将地图插入到菜单中. Let’s check how to do it. Click on the Add Map button. 您将看到以下内容(必须使用红色字段):

   

   • Enter Map item name 这将显示您使用的地图的名称.

   • 输入地图纬度，然后输入地图经度 -这些字段应该填充的值表明你的地图位置, 请查看下面的图片. 1下面的红色表示纬度，2下面的蓝色表示经度.

     

   • Marker 该字段需要图标(小图像)，最好是PNG或ICO类型，尺寸为64×64 px. 单击上传并浏览图标，因此它表示地图上的位置.

   • Scale is the map zoom. 取值范围为1 ~ 21. 21是最大的变焦，而1是最小的-将显示整个地球.

   • Map description 是您可以插入自定义地图描述的字段. The editor is easy. 您不妨使用您的定制 HTML formatting in Tools > Source Code.

注意:为了使您的谷歌地图正常工作，您可能需要有谷歌 API key set. Please, see the following link for more info.

的所有项目和功能，您可以使用 TM Mega Menu module. 现在，您可以管理所有菜单项并将不同的自定义块插入其中. 我们最后要复习的是 Edit Styles 工具，您可以在TM Mega Menu编辑页面的右上角看到.

此功能使您可以对所有项应用不同的样式, subitems, 字体和菜单的其他块. 让我们回顾一下所有可用的工具. Click on Edit Styles. 这个打开的窗口显示了不同级别的项目，这些项目可以展开，然后让你可以编辑样式. Also it has Hover & 项目的活动状态. Hover 当你把鼠标放在元素上时，效果就会出现，当你点击项目时，效果就会出现. 让我们看看你可以编辑哪些样式:

• Color -选择的级别项目字体的主要颜色. 如果你选择绿色，字体就会变成这个颜色.

• Background color – the color of the background of current level items.

• Background image – alternative to the background 颜色-给你设置的可能性 background image.

• Background settings has two fields, the Repeat one allows you to repeat the background-image vertically(repeat-y), horizontally(repeat-x), do not repeat the image, 在垂直和水平方向重复.

• Border color 更改每个边框的颜色.

• Border type 允许您设置虚线，虚线，实线或双边框.

• Border width (px, em) 这个选项用px值或em值设置边框的宽度.

• Border radius (px, em) 是环绕着田地角落的特征吗.

• Box shadow 使阴影达到选定的水平. 您应该粘贴以下参数: rgba(0,0,0,0,0.75) 第一个和第二个参数定义阴影的偏移量，即阴影落下的位置. 第三个参数是阴影的模糊度，值越小 less blur you get. 第四个参数是扩散-阴影的数量(定义其大小). 最后一个参数是带有RGBA代码的阴影颜色，它给了你设置透明度的可能性.

每个关卡和每个关卡都有相同的选项 Hover & 主菜单中可用的活动元素. 您可以随意更改它们以满足您的需求.

在本教程中，您已经了解了如何配置、设置和使用 TM Mega Menu module.

请随时查看下面的详细视频教程:

另外，别忘了复习收藏 PrestaShop themes.