HAT wrote: ↑Wed 21 Feb 2024 9:54 am
Hello,
thanks first of all to Neil for the great new template.
This is exactly what I was looking for.
But I have a small problem:
I need a "divider" in the dropdown menus, i.e. a horizontal, thin line from the far left to the far right.
In the file "menu.js" the menus are defined.
Unfortunately, I have very, very little knowledge of Javascript.
In the CSS file "main.css" there is the class ".ow-divider".
But how do I call this class in Javascript?
Or is there another way for a "divider" or "separator"?
I hope someone can help me.
Thanks a lot!
Greetings to all
HAT
Hi
Right this can be done but it will require you to edit both the menu.js and the ws-extra.js files. First of all the menu which I assume is the default menu.js rather than the my-menu.js with I shipped with the website template. It won't matter which but do check line 16 of the ws-extra.js file to see which javascript to edit.
To add a divider to your menu simply add the following between the menu entries that need to be divided:
This adds a blank menu item.
Now for the ws-extra.js edits. (I would strongly recommend making a backup copy of the file before you start making changes so that if all goes pear shaped you can simply restore the backup). You need to edit the 'else' section of the 'if...else' block starting on line 131
Code: Select all
} else {
if (itm.url == "#") {
menu += '<div class="ow-divider"></div>';
} else {
menu += '<a href="' + itm.url + '"' + infill + ' class="' + (submenu ? classMainSub : classMain) + '">' + itm.title + '</a>\n';
}
}
You also need to change the code starting at line 182 as well so that the divider is usable on mobile menus.
Its the first bit starting 'if ( its.url=="#) {...' that checks to see if the url is a # symbol, if it is then it inserts the required html rather than a menu entry. This starts on line 139 on my system.
To make the divider go all the way across the menu panel you may want to add 'margin:0 -1.3em; to the style .ow-divider in the main.css stylesheet. You can experiment with the actual value.
Hope that makes sense. Let me know if you have any difficulties.
Neil.
