The above image is of top-links. I wanted to add a drop-down for My Account. When the user click or hover on it, My Account should show My account option For example orders.
Create phtml template file
<div class="customer-menu">
<span class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true">
<span class="title"><?= __("Customer Menu"); ?></span>
</span>
<ul class="dropdown">
<?= $block->getChildHtml() ?>
</ul>
</div>
Call block out in XML where you want
<block class="Magento\Framework\View\Element\Template" name="header-dropdown" template="Custom_Module::header-dropdown.phtml"/>
Add design into less file
.customer-menu {
.lib-dropdown();
}
Move your links into dropdown with xml (example: my account link)
<move element="my-account-link" destination="header-dropdown" />
-
This Works very well but there is a problem. The page should be completely loaded otherwise it give an error a javascript error. Uncaught TypeError: Cannot read property 'setAttribute' of undefined – Avesh Naik Jun 1 '18 at 7:56
-
Could you give more info about that error? I'm working on Blank theme and can't get that error. – K-s Jun 1 '18 at 8:44
-
Try to make a static block with the links in it that you want in them. Echo the static block using a .phtml or .xml file while assigning a class to it. Style the block to your wishes and set it to display: none in your CSS. Then, when a user hovers over your link, set it to display: block using Javascript (or use .show() in combination with jQuery).
Hopefully this may get you on the right tracks. The pro of using a static block is that you can easily edit the content in the drop down menu via the admin panel.
