{"id":65714,"date":"2016-03-04T07:11:42","date_gmt":"2016-03-04T12:11:42","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=65714"},"modified":"2016-04-12T03:46:22","modified_gmt":"2016-04-12T07:46:22","slug":"opencart-2-x-how-to-work-with-mega-menu-module","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/opencart-2-x-how-to-work-with-mega-menu-module.html","title":{"rendered":"OpenCart 2.x. How to work with “TM Mega Menu” module"},"content":{"rendered":"

Hello! This video tutorial shows how to manage TM Mega Menu<\/strong> module in OpenCart templates.<\/p>\r\n\r\nOpenCart 2.x. How to work with “Mega Menu” module<\/a>\r\n

There is another great module added to OpenCart templates – TM Mega Menu<\/strong>:<\/p>\r\n\r\n\"opencart_manage_megamenu_1\"<\/a>\r\n

Let’s learn how to work with it.<\/p>\r\n

The tutorial assumes you are already logged into your OpenCart admin panel.<\/p>\r\n

    \r\n\t
  1. \r\n\t\t

    Navigate to Extensions ->Modules<\/strong> tab:<\/p>\r\n\t\r\n\"opencart_manage_megamenu_2\"<\/a>\r\n\t<\/li>\r\n\t

  2. \r\n\t\t

    Then, use the CTRL+F\/CMND+F<\/strong> key (Windows OS\/Mac OS<\/strong>) to search for “megamenu”<\/strong> text to locate the module.<\/p>\r\n\t<\/li>\r\n\t

  3. \r\n\t\t

    Now, click the “Edit”<\/strong> icon next to the module name:<\/p>\r\n\t\r\n\"opencart_manage_megamenu_3\"<\/a>\r\n\t<\/li>\r\n<\/ol>\r\n

    The TM Mega Menu<\/strong> module editing interface is now opened in front of you.<\/p>\r\n

    You may find such options as “Module Name”<\/strong> and “Status”<\/strong> and menu items themselves:<\/p>\r\n\r\n\"opencart_manage_megamenu_4\"<\/a>\r\n

    You can see three menu items are already there in the menu – you may click on any item title to review its settings:<\/p>\r\n\"opencart_manage_megamenu_5\"<\/a>\r\n\r\n

    You may edit such options as: “Menu Item Type”<\/strong>, “Menu Item Submenu Type”<\/strong>, “Columns count”<\/strong>, “Columns per row”<\/strong> and “Background Image”<\/strong>.<\/p>\r\n

    If you set the menu to display more than one column, then a list of options for each column will appear lower on the menu item editing interface, such as: “Column width”<\/strong>, “Column content” <\/strong>and “Categories limit”<\/strong>:<\/p>\r\n\r\n\"opencart_manage_megamenu_6\"<\/a>\r\n

    Now that you know a little how TM Mega Menu<\/strong> module options look like, let’s try to add a new menu item to the menu.<\/p>\r\n

      \r\n\t
    1. \r\n\t\t

      Click on the “plus”<\/strong> icon at the lower right to have the new menu item options interface appear:<\/p>\r\n\t\r\n\"opencart_manage_megamenu_7\"<\/a>\r\n\t<\/li>\r\n\t

    2. \r\n\t\t

      Choose the “Menu Item Type”<\/strong> option as Category<\/strong> and “Menu Item Submenu Type”<\/strong> as Megamenu<\/strong>:<\/p>\r\n\r\n\"opencart_manage_megamenu_8\"<\/a>\r\n\t<\/li>\r\n\t

    3. \r\n\t\t

      Fill in the Columns count<\/strong>, Columns per row<\/strong> and Background Image<\/strong> (if needed) to make the menu matching your desire:<\/p>\r\n\r\n\"opencart_manage_megamenu_9\"<\/a>\r\n\t<\/li>\r\n<\/ol>\r\n

      As you can see setting the Columns count<\/strong> value higher than 1<\/strong> makes additional tabs for each column appear.<\/p>\r\n

      Fill in the Column width<\/strong>, Column content<\/strong> and Products limit<\/strong> options for each column to achieve the desired result:<\/p>\r\n\r\n\"opencart_manage_megamenu_10\"<\/a>\r\n

      Scroll up and click the “save”<\/strong> icon at the upper right of the screen:<\/p>\r\n\r\n\"opencart_manage_megamenu_11\"<\/a>\r\n

      Navigate to your store front-end and refresh the page to see the new menu item appeared in the categories menu:<\/p>\r\n\r\n\"opencart_manage_megamenu_12\"<\/a>\r\n

      You may also choose other options for each column as well as set the “Menu Item Type”<\/strong> option to Custom<\/strong> to include any<\/strong> external\/internal<\/strong> link with any<\/strong> desired label<\/strong> which we believe is a great option to have!<\/p>\r\n

      This is the end of the tutorial. You have learnt how to manage TM Mega Menu<\/strong> in your OpenCart template.<\/p>\r\n\r\n

      Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nOpenCart 2.x. How to work with “Mega Menu” module<\/a>","protected":false},"excerpt":{"rendered":"

      This video tutorial shows how to manage Tm Mega Menu<\/strong> module in OpenCart templates.<\/p>\n","protected":false},"author":68,"featured_media":65729,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1156],"tags":[1943,571,557,1157],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/65714"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=65714"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/65714\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/65729"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=65714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=65714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=65714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}