1

enter image description here

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.

2

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
  • See my answer... – Avesh Naik Jun 1 '18 at 8:52
0

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.

  • Can't we do it using magento way? – Avesh Naik May 31 '18 at 13:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.