X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)
-   -   Flyout Menus CSS Dropdown Delay (https://forum.x-cart.com/showthread.php?t=71590)

mcanitano 03-10-2015 11:28 AM
Flyout Menus CSS Dropdown Delay
 
We've been trying to implement a delay on our Horizontal Dropdown Menu (we're using the Flyout Menus module) and can't seem to get it to work.

We tried following: http://jsfiddle.net/pgqM2/229/ and we're lost.

Reason we're doing this, is because if a customer is floating over our dropdown menu and accidentally moves the mouse off the menu, it disappears, but we want to implement a 0.5-1.0s delay to counteract this.

totaltec 03-10-2015 12:40 PM
Re: Flyout Menus CSS Dropdown Delay
 
Looks pretty easy to implement. Have you found the hover element in your CSS?

Well I looked at your site, and I was able to get it to work. But there are problems.

The biggest problem is that your site is built with tables. The second problem is that your hover menu currently uses display block and display none to show/hide the sub elements. CSS transition effects do not work on display changes, just things like height and opacity. The work-around would usually be to set the opacity to 0 and the height to 0, but in your case you have tables with inline styles determining height. It is going to take a lot of work in order to get this to happen.

I might investigate a JavaScript solution if I were you.

mcanitano 03-11-2015 04:13 AM
Re: Flyout Menus CSS Dropdown Delay
 
Yeah that's what we were afraid of, we used the tables to make it easier to organize things from left to right.

We do have a javascript code that we used before, but it delays everything (delays on hover, and mouseout):

Code:
{literal}
<script>
              $(document).ready(function()
              {
                      $('li').hover(function(){
                        var timer = $(this).data('timer');
                      if(timer) clearTimeout(timer);
                        $(this).addClass('over');
                      },function(){
                        var li = $(this);
                        li.data('timer', setTimeout(function(){
                        li.removeClass('over');
                        }, 110)); //this is delay in ms
                      });
              });
</script>
{/literal} 

totaltec 03-11-2015 06:37 AM
Re: Flyout Menus CSS Dropdown Delay
 
Marcello,
My JavaScript powers are strong, but not strong enough for me to help without setting up a test environment. Just glancing at it, I would try moving the line:
$(this).addClass('over');

to above the line:
var timer = $(this).data('timer');

mcanitano 07-29-2015 10:28 AM
Re: Flyout Menus CSS Dropdown Delay
 
As a fix, we've gone away from the JQuery/JS solution and simply used CSS. In the Flyout Menu CSS file (skin/common_files/modules/Flyout_Menu/main.css)

We implemented the following CSS changes [shown is the stock CSS, we have custom CSS changes in ours if you are looking at our site :) ]:

(does not work in IE8 or older)

Around Line 40
Code:
.fancycat-icons-e li ul {
  /*display: none; Hide this if you want transition effect to work*/
  position: absolute;
  top: 4px;
  left: 126px;
  background: white none;
  border: 1px solid #b1c6d7;
  margin: 0;
  padding: 5px 6px 5px 5px;
/*Begin transition effect */
    -webkit-transition: 0s visibility;
    -moz-transition: 0s visibility;
    -ms-transition: 0s visibility;
    -o-transition: 0s visibility;   
        transition: 0s visibility;
    transition-delay:0.15s;
    -webkit-transition-delay: 0.15s; /* Safari/Chrome */
        -moz-transition-delay: 0.15s; /* Mozilla */
    -ms-transition-delay: 0.15s; /* Safari */
    -o-transition-delay: 0.15s; /* Opera */
        visibility: collapse;
/*End transition effect*/ 
}

Around Line 57
Code:
.fancycat-icons-e li:hover ul,
.fancycat-icons-e li.over ul
{
  display: block;
/*Begin transition effect */
  visibility: visible;
/*End transition effect*/
}

Around Line 77
Code:
/**
 * Multi-level support
 */
.fancycat-icons-e li:hover ul ul, .fancycat-icons-e li.over ul ul,
.fancycat-icons-e li:hover ul ul ul, .fancycat-icons-e li.over ul ul ul,
.fancycat-icons-e li:hover ul ul ul ul, .fancycat-icons-e li.over ul ul ul ul,
.fancycat-icons-e li:hover ul ul ul ul ul, .fancycat-icons-e li.over ul ul ul ul ul,
.fancycat-icons-e li:hover ul ul ul ul ul ul, .fancycat-icons-e li.over ul ul ul ul ul ul,
.fancycat-icons-e li:hover ul ul ul ul ul ul ul, .fancycat-icons-e li.over ul ul ul ul ul ul ul,
.fancycat-icons-e li:hover ul ul ul ul ul ul ul ul, .fancycat-icons-e li.over ul ul ul ul ul ul ul ul,
.fancycat-icons-e li:hover ul ul ul ul ul ul ul ul ul, .fancycat-icons-e li.over ul ul ul ul ul ul ul ul ul,
.fancycat-icons-e li:hover ul ul ul ul ul ul ul ul ul ul, .fancycat-icons-e li.over ul ul ul ul ul ul ul ul ul ul,
.fancycat-icons-e li:hover ul ul ul ul ul ul ul ul ul ul ul, .fancycat-icons-e li.over ul ul ul ul ul ul ul ul ul ul ul
{
  /*display: none; Hide this if you want transition effect to work*/

/*Begin transition effect */
    -webkit-transition: 0s visibility;
    -moz-transition: 0s visibility;
    -ms-transition: 0s visibility;
    -o-transition: 0s visibility;   
        transition: 0s visibility;
    transition-delay:0.15s;
    -webkit-transition-delay: 0.15s; /* Safari/Chrome */
        -moz-transition-delay: 0.15s; /* Mozilla */
    -ms-transition-delay: 0.15s; /* Safari */
    -o-transition-delay: 0.15s; /* Opera */
        visibility: collapse;
/*End transition effect*/
}

.fancycat-icons-e li li:hover ul, .fancycat-icons-e li li.over ul,
.fancycat-icons-e li li li:hover ul, .fancycat-icons-e li li li.over ul,
.fancycat-icons-e li li li li:hover ul, .fancycat-icons-e li li li li.over ul,
.fancycat-icons-e li li li li li:hover ul, .fancycat-icons-e li li li li li.over ul,
.fancycat-icons-e li li li li li li:hover ul, .fancycat-icons-e li li li li li li.over ul,
.fancycat-icons-e li li li li li li li:hover ul, .fancycat-icons-e li li li li li li li.over ul,
.fancycat-icons-e li li li li li li li li:hover ul, .fancycat-icons-e li li li li li li li li.over ul,
.fancycat-icons-e li li li li li li li li li:hover ul, .fancycat-icons-e li li li li li li li li li.over ul,
.fancycat-icons-e li li li li li li li li li li:hover ul, .fancycat-icons-e li li li li li li li li li li.over ul,
.fancycat-icons-e li li li li li li li li li li li:hover ul, .fancycat-icons-e li li li li li li li li li li li.over ul
{
  display: block;

/*Begin transition effect */
  visibility: visible;
/*End transition effect*/ 
}


All times are GMT -8. The time now is 02:08 PM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.