Welcome to Axure Community Site Sign in | Join | Help
in Search

Question on hover events

Last post 10-26-2006, 1:54 PM by victor. 4 replies.
Sort Posts: Previous Next
  •  10-20-2006, 10:24 AM 853

    Question on hover events

    I'm evaluating Axure RP and everything seems great so far but I have 1 question.

    I'm trying to create an effect like DHTML flyout menus that appear on hover of a menu and dissappear when you move off the menu... I have that part working BUT...

    I also want to be able to mouse over the flyout area of the menu as well and select a menu item. But since I have on mouse out set to make the flyout dissappear I can not scroll down the flyout menu to select a menu item...

     So really I need the flyout to stay visible while I am over the menu item OR over the flyout layer for that menu item.

    Any ideas?

    Thanks,

    Karl

  •  10-23-2006, 11:14 AM 854 in reply to 853

    Re: Question on hover events

    Short answer: the flyout menu must also display itself on mouseover.

    Victor (aka Mr. Axure) created a neat demo for menus that can be downloaded at http://axure.com/CS/forums/storage/4/756/DynamicMenuSample2.rp


    Everything I know, I learned from my cats -- thats the problem.
  •  10-23-2006, 1:33 PM 857 in reply to 854

    Re: Question on hover events

    Attachment: new-menu-sample.rp

    Actually, we thought of a simpler way of doing a drop-down menu.  I've attached the file.

    Basically, I created a dynamic panel with two states (open and closed) and placed an "Image Map Region" widget in the background of the open state.  On the mouse enter of the "File" rectangle of the first state, I switch the dynamic panel to the second state.  On the mouse enter of that Image Map Region, I switch the panel back to the collapsed state.  This way you avoid having to add interactions to close the menu on each of the other menus.

    Filed under: ,
  •  10-23-2006, 10:13 PM 859 in reply to 857

    Re: Question on hover events

    Attachment: new-menu-sample 2.rp

    OK... I couldn't let Martin top me here :)

    The sample he gives works well for most cases, but in Firefox the "empty" parts of the dynamic panel will prevent the events from firing on widgets underneath it. For example in the collapsed state on the dynamic panel in the above sample, if there is a button under the dynamic panel, clicking it will not work even though it appears as if there is nothing above it.

    The way to resolve this is the use the show and hide actions for the dynamic panel like in the attached sample. Mouse enter on a menu button shows the hidden dynamic panel containing the menu and mouse enter on the image map region surrounding the menu in the dynamic panel hides it.

    In this sample, a neighboring menu item was added and you can see that they will both work in the same way without any additional effort except to make sure the dynamic panels with the menus are on top of the menu items.

    This is going to need a walkthrough in a blog post...

  •  10-26-2006, 1:54 PM 877 in reply to 859

    Re: Question on hover events

View as RSS news feed in XML