Locking the Menu position to the extreme left of the browser

adricist
Topic Author
Offline
Junior Member

6 months 3 weeks ago #72826 by adricist

Replied by adricist on topic Locking the Menu position to the extreme left of the browser

I was too excited!!!

It does work, but upon expansion, the Top Level item do not display the Titles, see attached screenshot.

Is there a way to get the Titles of the top levels back?

Thanks,
Adri

Attachments:

Please Log in or Create an account to join the conversation.

ced1870
Offline
Administrator

6 months 3 weeks ago #72830 by ced1870

Replied by ced1870 on topic Locking the Menu position to the extreme left of the browser

yes I know I have already worked on that
please add this Javascript code to your page

Code:

(function() {
	var menu = document.getElementById('accordeonck110');
	menu.querySelectorAll('li[data-level="1"]').forEach(function(li) {
	
		var button = li.querySelector(':scope > .accordeonck_outer > .toggler_icon');
		if (button) {
			button.addEventListener('mousedown', function() {
				if (li.classList.contains('open')) {
					menu.classList.remove('customOpen');
				} else {
					menu.classList.add('customOpen');
				}
			});
		}
	});
})()

and this CSS

Code:

#accordeonck110.customOpen li.level1 > span a {
	width: auto;
	position: static;
}

it will add a css class on the menu that you can then manage in CSS

Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

adricist
Topic Author
Offline
Junior Member

6 months 3 weeks ago - 6 months 3 weeks ago #72832 by adricist

Replied by adricist on topic Locking the Menu position to the extreme left of the browser

Thank you for all your help Ced, I really appreciate it.

I have added the additional CSS code, see Attachment 3.

And I have tried adding the Javascript code to

either the index.php template file, see Attachment 1
or to the template.js file, see Attachment 2

but nothing seems to change!

Do I need to add the Javascript code somewhere else?

Ced, I have given you Super Admin access to the site, so you are welcome to try and set it up yourself, if this is easier.

Please let me know.

Regards,
Adri

P.S. Having issues with your forums, will retry attachments later

Last edit: 6 months 3 weeks ago by adricist.

Please Log in or Create an account to join the conversation.

adricist
Topic Author
Offline
Junior Member

6 months 3 weeks ago - 6 months 3 weeks ago #72833 by adricist

Replied by adricist on topic Locking the Menu position to the extreme left of the browser

Hi again Ced,

I have done a bit more work.

I have created a ac_menu_ck.js file and place it in the directory as per Attachment 6
I have then referenced the JS file as per Attachment 5
I have the edited the CSS code, as per Attachment 7

Unfortunately the JS code does not seem to work, as it returns some errors, see Attachments 8 and 9

It might be easier for you to edit directly these files from the website, with access I have provided. If you cannot do this until after next week, please let me know and I will just have to wait, I will understand.

Thanks again and please keep me posted,
Adri

P.S. Still having problems with the attachments, I have emailed them to you.

Last edit: 6 months 3 weeks ago by adricist.

Please Log in or Create an account to join the conversation.

ced1870
Offline
Administrator

6 months 3 weeks ago #72836 by ced1870

Replied by ced1870 on topic Locking the Menu position to the extreme left of the browser

I have received your email
I know what is the problem, I missed to put the script in a domcontent event, because I was testing on the DOM

please update it like that

Code:

document.addEventListener("DOMContentLoaded", function () {
	var menu = document.getElementById('accordeonck110');
	menu.querySelectorAll('li[data-level="1"]').forEach(function(li) {
	
		var button = li.querySelector(':scope > .accordeonck_outer > .toggler_icon');
		if (button) {
			button.addEventListener('mousedown', function() {
				if (li.classList.contains('open')) {
					menu.classList.remove('customOpen');
				} else {
					menu.classList.add('customOpen');
				}
			});
		}
	});
})

note that if you had put the script at the end of your page, it would have worked too

Joomlack Webmaster and Developer

The following user(s) said Thank You: adricist

Please Log in or Create an account to join the conversation.

adricist
Topic Author
Offline
Junior Member

6 months 3 weeks ago #72837 by adricist

Replied by adricist on topic Locking the Menu position to the extreme left of the browser

Thank you again Ced,

Yes, that fixed the js error and now the menu expands correctly when clicking on the + sign and shrinks back when collapsing the submenu with the - sign.

There are however the following minor inconsistencies:

If instead of clicking in the + sign, you click on the Icons, then the Top Level Titles do not appear, see Attachment 1
Once expanded correctly with the + sign and the Titles are correctly displayed, the Icons are no longer displayed in the correct position and if you hover on the Top Level items, the Icons are now being displayed way to the right, in the content area, see Attachment 2. I am wondering if this has to do with the highlighted values in the initial CSS code, see Attachment 3.

Please test it yourself here

adrianoc8.sg-host.com/

We are making good progress, and I really appreciate all your help, thank you.

Please let me know how we can fix the above.

Regards,
Adri

Attachments:

Please Log in or Create an account to join the conversation.

Time to create page: 0.247 seconds