Wix Forum Logo
  • Community Forum

  • Support

  • Members

  • Groups List

  • Blog

  • More

    Use tab to navigate through the menu items.
    To see this working, head to your live site.
    • Categories
    • All Posts
    • My Posts
    carinab
    Apr 23, 2020
    Edited: Apr 23, 2020

    Creating a custom dropdown menu with a button and a container

    in Forum Discussions

    I'd like to create a custom horizontal menu with submenus because the 'normal' WiX horizontal menu does not give me all the design options I'd like to have.

    For testing, I first created a button that should later act as a main menu button. In addition, I created a container respectively a vector art that should become the submenu (it is hidden on load). The vector art is snapped to the button so that there is no space between the two elements. A screenshot of my elements is shown below, labelled with the corresponding Ids.













    What I want now is that #submenuitem appears when my mouse enters (onmouseover) the area of #mainmenuitem. When the mouse leaves (onmouseout) #mainmenuitem the submenu #submenuitem should disappear, but only if the mouse does not enter the area of #submenuitem. If the mouse moves from #mainmenuitem to #submenuitem the submenu should still be shown, so that the user is able to select items of the submenu.

    The basic functionality already works (i.e. mouse entering and leaving #mainmenuitem area and then showing / hiding #submenuitem.

    However, when I start adding functionality for #submenuitem, the application does not behave how I want it to behave. When I enter the area of #submenuitem it seems that it is still disappearing every second time (see video below).











    Below I listed the Corvid code I used so far:


    var inmainmenu= false;
    var insubmenu= false;
    var subshown = false;
    
    export function mainmenuitem_mouseIn(event) {
        inmainmenu = true;
        toggle_submenu()
    }
    
    export function mainmenuitem_mouseOut(event) {
        inmainmenu = false;
        toggle_submenu()
    }
    
    export function submenuitem_mouseIn(event) {
        insubmenu = true;
        toggle_submenu()
    }
    
    export function unternehmensub_mouseOut(event) {
        insubmenu = false;
        toggle_submenu()
    }
    
    function toggle_submenu(){
        if(inmainmenu){
            $w('#submenuitem').show();
            subshown = true;
        }
        if(!inmainmenu){
            if(insubmenu){
                $w('#submenuitem').show();
                subshown = true;
            }
            else{
                $w('#submenuitem').hide();
                subshown = false;
            }
        } 
    }

    Maybe anyone has a suggestion what I am doing wrong here? I would appreciate any hint! 😊

    0 answers0 replies
    0
    Comments

    Share Your ThoughtsSign up to leave a comment.

    0 comments

    WIX FORUM

    Create an online community right on your site with Wix Forum. Your visitors can become members, join conversations, follow posts, leave comments and more. Plus, you can choose from beautiful layouts and customize to get the look you love. And it’s completely free! 

     

    © 2006 - 2020 Wix.com, Inc 

    COMPANY

    About Wix

    Terms of Use

    Privacy Policy

    SUPPORT

    Help Center

    Contact Us

    ​

    • Black Facebook Icon
    • Black Twitter Icon
    • Black YouTube Icon
    • Black Pinterest Icon
    • Black Instagram Icon
    • Black LinkedIn Icon