fabriceunko Posted November 7, 2018 Share Posted November 7, 2018 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. Link to comment Share on other sites More sharing options...
Noodleman Posted November 7, 2018 Share Posted November 7, 2018 Sure, it's just a CSS trick. on hover, add a border to the bottom of the item. See: https://www.w3schools.com/cssref/sel_hover.asp and https://www.w3schools.com/css/css_border.asp Link to comment Share on other sites More sharing options...
fabriceunko Posted November 7, 2018 Author Share Posted November 7, 2018 yes but on the site the blue border scrolls to the right Link to comment Share on other sites More sharing options...
bsmither Posted November 8, 2018 Share Posted November 8, 2018 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 More sharing options...
fabriceunko Posted November 8, 2018 Author Share Posted November 8, 2018 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 Link to comment Share on other sites More sharing options...
bsmither Posted November 8, 2018 Share Posted November 8, 2018 Please let us have a web address where we can see your experiments. Link to comment Share on other sites More sharing options...
bsmither Posted November 8, 2018 Share Posted November 8, 2018 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 More sharing options...
fabriceunko Posted November 8, 2018 Author Share Posted November 8, 2018 the second code does not work I have a fixed line, below the link of the shop the link Link to comment Share on other sites More sharing options...
bsmither Posted November 8, 2018 Share Posted November 8, 2018 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. Link to comment Share on other sites More sharing options...
fabriceunko Posted November 8, 2018 Author Share Posted November 8, 2018 I did that but it does not change the result Link to comment Share on other sites More sharing options...
bsmither Posted November 8, 2018 Share Posted November 8, 2018 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 More sharing options...
fabriceunko Posted November 8, 2018 Author Share Posted November 8, 2018 thank you I would look at it tonight because I have to go to work. Thanks see you soon Link to comment Share on other sites More sharing options...
fabriceunko Posted November 9, 2018 Author Share Posted November 9, 2018 hello I just checked and the thread is well installed on my skin Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.