X-Cart forums

[mcanitano]

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]

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]

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

{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]

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]

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

.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

.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

/**
 * 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*/  
}