Jump to content
fabriceunko

Add an animation to the bare menu?

Recommended Posts

 

Hello, when we come to the cubecart site in the drop-down menu there is a small animation (see red arrow on the photo) and I wonder if it was possible to add it to the menu of the store? because I find it pretty.

1541609348-anim.jpg

Edited by fabriceunko

Share this post


Link to post
Share on other sites

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.)

Edited by bsmither

Share this post


Link to post
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

Share this post


Link to post
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%;
}

 

Share this post


Link to post
Share on other sites

When developing a store, it helps to switch off the cache.

Also, have your browser to force reload the page resources. This is usually done with CTRL-F5.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...