Creating mega drop down menu on magento2, able to get the data from the database product categories and subcategories
Magento – How to create the magento2 Mega drop down menu
category-treemagento2topmenu
Related Solutions
You can roll your own or you can use Pronav that can do that and more. Visit the demo store to see it's possibilities.
We have very good experiences with several customers using this extension.
The "roll your own" version, aka magento topmenu-101:
- The default top menu is only capable of generating a menu tree using the store categories
- There's a large difference between the rwd top-menu and the other default design packages and that is that the rwd version only renders top-level categories.
- Many have gone before you, borrow code, but don't borrow code that calls
Mage::getModel('catalog/category)->load($id)
for each menu item ( why not? - how to fix - slide 10 ) - The top menu is inserted using a text_list (see page.xml in either
base/default/layout
orrwd/default/layout
). This means the easiest way to add something to the menu is to add another block to that text list, provided that this works with the generated HTML. - Since 1.8.2 the topmenu now has support for a "renderer". This is code that used to be in the TopMenu block that recursively loads the menu tree and is now moved to the template. No more rewrites for simple adjustments, allthough the default file isn't your typical Magento template and frankly a quick hack.
- Given 5, you can use your own renderer by extending
Mage_Page_Block_Html_Topmenu_Renderer
if needed and override the block type in a layout XML file. - Some people create empty categories in the catalog with URL keys that point to CMS pages or the home page, just so to make it appear in the top menu. This loads a bunch of overhead associated with categories that can be avoided using methods described in 4 to 6 and may need additional URL rewrites or layout updates to get working properly (/contact.html != /contact).
- Typically, JavaScript provided interactivity is out of scope for MageStack, unless made very specific and being lucky somebody has that lying around or when it deals with bugs / configuration issues in the default installation.
- Looking in
skin/rwd/default/css/styles.css
shows various class-based selectors with the keyword 'hide' and 'hidden' that aid in hiding an item by default. - See 8 on how to unhide something on the click event. Also see
js/lib/dropdown.js
for inspiration.
Hopefully this helps you get started and feel free to ask specific questions if you get stuck.
Have you tried position:fixed
in css file?
frontend/Magento/luma/en_US/css/styles-l.css
Best Answer
There are too many paid and free extension, here are some of the free ones: http://store.ibnab.com/magento-2-extensions/free-magento-2-easy-megamenu.html https://bsscommerce.com/magento-2-mega-menu-extension.html