Jump to content

Add an animation to the bare menu?


fabriceunko

Recommended Posts

There are two CSS rules to do this:

.top-bar-section .dropdown li:not(.has-form):not(.active) > a::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #4F9AAF;
    transition: width .3s;
}



.top-bar-section .dropdown li:not(.has-form):not(.active) > a:hover::after {
    width: 100%;
}

The first sets up what the underline looks like when not hovering: 0 wide by 1 pixel high.

The second rule sets up what the underline looks like when hovering: 100% wide -- the only thing that changed.

The first rule creates a transition on what should be done regarding all the styling that will change between non-hover and hover. In this case, the only thing changed is the width, so the transition arguments list only what to do about the width. (More things could have changed between the two rules, and so there could be more arguments in the transition declaration.)

Link to comment
Share on other sites

hello, and again a big thank you it works well.

 

but when I have a menu with several simple category it works well the effect is pretty, but if in my menu I have a subcategory underlining this fact above with a passing on the left. see the pictures I voluntarily enlarged underlining to better see it.

 

Correct                                                                         not correct

1541658450-capture1.jpg    1541658455-capture2.jpg

Link to comment
Share on other sites

There are other things going on when a list item has the class has-dropdown.

So, consider not applying this effect to those items.

.top-bar-section .dropdown li:not(.has-form):not(.has-dropdown):not(.active) > a::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #4F9AAF;
    transition: width .3s;
}



.top-bar-section .dropdown li:not(.has-form):not(.has-dropdown):not(.active) > a:hover::after {
    width: 100%;
}

 

Link to comment
Share on other sites

I see that you are using a skin other than Foundation that is part of CubeCart 6.2.2.

If that skin has not implemented this fix:
https://github.com/cubecart/v6/issues/2037
then turning off the cache or enabling debug mode does not make developing a store's skin very easy.

Therefore, have CubeCart clear it's internal cache when ready to make another experiment to see changes made to the skin or page resources.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...