Locking the Menu position to the extreme left of the browser

adricist
Topic Author
Offline
Junior Member

1 week 4 days ago #72846 by adricist

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

Hi again Ced,

I have made some good progress and the Menu is almost completed and perfect, there is only one outstanding item needed to be fixed. Here is what I have done.

I have edited the JS file as below:

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');
                    menu.classList.add('customClose');
                } else {
                    menu.classList.remove('customClose');
                    menu.classList.add('customOpen');
                }
            });
        }
    });
})

And the CSS code as below:

Code:

#accordeonck110.customClose li.level1 > span a {
    position: relative;
    left: -300px;
  height: 60px;
  width: 60px;
}

#accordeonck110.customClose li.level1 > span a [class*="icon"] {
    position: relative;
    left: +300px;
}

#accordeonck110.customClose li.level1 > span a [class*="fa-"] {
    position: relative;
    left: +300px;
}

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

I like the fact that the Menu starts with the Titles displayed and it can be shrunk by clicking the - Signs, this works well.

The only outstanding issue that I need to resolve is the fact that when the Menu is shrunk, if the user clicks the + Sign, everything works as expected. However, if the user clicks on the Icons for any of the Menu Items with + Signs, then the Menu does not display the Titles for the top level items, as it does when the + Signs are clicked! See Attachment 1.

Can you please help me address this very last issue?

It is ok if you get back to me after this week, as I understand you will not be around.

I look forward to hearing from you once you are back.

Thanks again, this is looking really good!

Regards,
Adri

Attachments:

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

ced1870
Offline
Administrator

3 days 7 hours ago #72902 by ced1870

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

Hi
you can try to add this code

Code:

#accordeonck110.customClose li.level1 > span a [class*="icon"], #accordeonck110.customClose li.level1 > span a [class*="fa"] {
    position: relative;
    left: +300px;
    transition: left 0.5s;
    transition-delay: 2s;
}

#accordeonck110.customClose li.level1 > span a {
    position: relative;
    left: -300px;
    height: 60px;
    width: 60px !important;
    transition: width,left 0.5s;
    transition-delay: 2s;
}

#accordeonck110 li.level1 > span a {
    padding-top: 8px;
    padding-right: 6px;
    padding-bottom: 8px;
    padding-left: 6px;
    color: #FFFFFF;
    font-size: 22px;
    font-weight: bold;
    left: 0;
    position: relative;
    width: 100% !important;
}

#accordeonck110 li.level1 > span a [class*="icon"], #accordeonck110 li.level1 > span a [class*="fa"] {
    position: relative;
    left: 0;
    transition-delay: 0;
}

you will need to clean it because it's a copy of existing rules, but you can try it and then adapt to your needs
this is the best I can do here in these conditions, hope it helps

Joomlack Webmaster and Developer

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

adricist
Topic Author
Offline
Junior Member

3 days 3 hours ago #72903 by adricist

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

Thank you so much Ced,

I really appreciate all your help.

I will try this over the next few days and let you know.

Thanks again,
Adri

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

adricist
Topic Author
Offline
Junior Member

23 hours 53 minutes ago #72932 by adricist

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

Hi Ced,

I tried your CSS code and basically it achieves exactly the same result as what I had already been able to achieve, without requiring the additional JS changes I had made. The main difference is that your code achieves it without the need to further adjust your original JS code.

Unfortunately both solutions still present that really small bug that causes the Titles to disappear when expanding the menus without using the + signs, by clicking on the actual icons.

Basically everything works as expected in the full width Menu. But when you are in the Icons only narrower version, everything works well if you click the + signs, but if you click on the icons, the Menu expands and goes correctly to full width, but the Titles of the top level do not display. See attachments.

This is exactly the same issue I already had and your code did not resolve this.

I think we are happy to go to production with this version of the menu, however it would be great if when you have some time you could have a look at the actual test website and see if you can get this resolved. It would be hugely appreciated and it would make this work 100%. I don't think it should be to difficult for you to get this resolved, if you actually get to test it directly in the test website, rather than trying as we have till now.

Thank you for all your help getting the Menu to this point, it does look great and it is a really good result.

Thanks again,
Adri

Attachments:

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

Time to create page: 0.519 seconds