somewebmedia / hc-offcanvas-nav

JavaScript library for creating toggled off-canvas multi-level navigations, allowing endless nesting of submenu elements, supporting swipe gestures, keyboard interactions and ARIA attributes.
https://somewebmedia.github.io/hc-offcanvas-nav/
MIT License
336 stars 82 forks source link

External links and rich text in menu items #85

Open gitarmartin opened 2 years ago

gitarmartin commented 2 years ago

Hi! We need tooltips and clickable links within the menu item headings, can this be achieved? Something like:

<li>This menu item will give a tutorial about <a href="https://www.youtube.com" class="special" title="Click link to visit Youtube">youtube</a></li>

There might be also rich text tooltips (generated by javascript something like tipped https://github.com/staaky/tipped) so there might be also class attributes involved.

Currently the problem is that the whole menu item is rendered as a link anchor <a...> is this necessary, maybe the list item could simply have a click listener instead and it would not bubble from link within the title itself?

somewebmedia commented 2 years ago

Do it like this:

<li class="data-nav-custom-content">
  <div>This menu item will give a tutorial about <a href="https://www.youtube.com" class="special" title="Click link to visit Youtube">youtube</a></div>
</li>

Don't forget that div wrapper, it won't work otherwise.