Add the attribute data-dropdown-url="blogmain.html" to the nav-link, e.g. <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" data-dropdown-url="blogmain.html">
And then add the following script to your page or js file:
This will enable the dropdown submenu plus the main item to be clickable.
The thing for mobile devices would be that if the main item is clickable (touchable in this case), then you wouldn't be able to trigger the dropdown - that's why I added the '&& !window.utils.isMobile()' in the script (so mobile devices still work as usual).
Is there a way to setup a submenu so […]
e.g. in the sample configure the menu so that "Blogs" will work to dropdown the submenu, but if clicked will take you to a page like /blogmain.html
If I take out the data-toggle="dropdown" option it seems to work, but it does not dropdown the submenu for small screens like a mobile device.
Blogs (allow click to /blogMain.html)
|
------- Blog List (click to /blog.html)
|
------- Blog Columns (click to /blog-3-cols.html)
|
------- Etc
Add the attribute data-dropdown-url="blogmain.html" to the nav-link, e.g.
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" data-dropdown-url="blogmain.html">
And then add the following script to your page or js file:
<script type="text/javascript">
$(function () {
$('[data-toggle="dropdown"]').click(function () {
if ($(this).data('dropdown-url') && !window.utils.isMobile()) {
window.location = $(this).data('dropdown-url');
}
})
})
</script>
This will enable the dropdown submenu plus the main item to be clickable.
The thing for mobile devices would be that if the main item is clickable (touchable in this case), then you wouldn't be able to trigger the dropdown - that's why I added the '&& !window.utils.isMobile()' in the script (so mobile devices still work as usual).
Hope this helps!