Mega Menu > Sub Menu > Disappear on Mouse Movement

%3CLINGO-SUB%20id%3D%22lingo-sub-1076771%22%20slang%3D%22en-US%22%3EMega%20Menu%20%26gt%3B%20Sub%20Menu%20%26gt%3B%20Disappear%20on%20Mouse%20Movement%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1076771%22%20slang%3D%22en-US%22%3E%3CP%3EWe%20recently%20deployed%20(12.18.19)%20a%20SharePoint%20Communications%20Modern%20Site%20using%20the%20OOB%20Mega%20Menu.%20We%20are%20getting%20reports%20that%20on%20smaller%20desktop%2Flaptop%20screens%20the%20Mega%20Menu%20will%20partially%20collapse%20and%20be%20represented%20by%20ellipse%20when%20space%20is%20not%20available.%20Expected%20behavior%20once%20a%20screen%20width%20is%20below%201024px%20in%20width%20%3CEM%3E(img%201)%3C%2FEM%3E.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CEM%3E(img%201)%3C%2FEM%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20418px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F162722i9D51017BF7A1170F%2Fimage-dimensions%2F418x40%3Fv%3D1.0%22%20width%3D%22418%22%20height%3D%2240%22%20alt%3D%22clipboard_image_0.png%22%20title%3D%22clipboard_image_0.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EThe%20issue%20occurs%20when%20a%20user%20mouse%20clicks%20on%20the%20ellipse%20%26gt%3B%20the%20sub%20menu%20appears%20%3CEM%3E(img%202)%3C%2FEM%3E%3C%2FP%3E%3CP%3E%3CEM%3E(img%202)%20red%20circle%20indicates%20a%20mouse%20click%20%26gt%3B%20sub%20menu%20appears%3C%2FEM%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20434px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F162723i90BCEC0B18A8B35C%2Fimage-dimensions%2F434x90%3Fv%3D1.0%22%20width%3D%22434%22%20height%3D%2290%22%20alt%3D%22clipboard_image_1.png%22%20title%3D%22clipboard_image_1.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENext%2C%20when%20the%20user%20attempts%20to%20move%20the%20mouse%20into%20the%20sub%20menu%20area%20the%20sub%20menu%20disappears.%20I%20have%20been%20able%20to%20duplicate%20this%20behavior%20in%20Chrome%2C%20Edge%20and%20FireFox.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOccasionally%2C%20the%20user%20can%20get%20their%20mouse%20on%20the%20sub%20menu%20however%2C%20it%20usually%20takes%204-5%20attempts%20to%20%22catch%22%20the%20sub%20menu%20and%20moving%20in%20particular%20motion%2Fpath%20does%20not%20seem%20consistent.%20%3CEM%3E(img%203)%3C%2FEM%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CEM%3E(img%203)%20red%20depicts%20ellipse%20mouse%20click%20%26gt%3B%20blue%20depicts%20the%20mouse%20motion%2Fpath%3C%2FEM%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20510px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F162725i41739D80880DCB46%2Fimage-dimensions%2F510x125%3Fv%3D1.0%22%20width%3D%22510%22%20height%3D%22125%22%20alt%3D%22clipboard_image_3.png%22%20title%3D%22clipboard_image_3.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EAgain%20to%20get%20to%20the%20sub%20menu%20(%22Pay%20%26amp%3B%20Timekeeping%22)%20is%20near%20impossible.%20If%20the%20user%20can%20get%20to%20the%20sub%20menu%20the%20next%20level%20is%20available%20(%22Pay%20or%20Time%20Keeping%22)%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20for%20reading%20and%20please%20let%20me%20know%20if%20this%20is%20a%20know%20issue%2Ffix.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%2C%3C%2FP%3E%3CP%3EJCrowe%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1076771%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
New Contributor

We recently deployed (12.18.19) a SharePoint Communications Modern Site using the OOB Mega Menu. We are getting reports that on smaller desktop/laptop screens the Mega Menu will partially collapse and be represented by ellipse when space is not available. Expected behavior once a screen width is below 1024px in width (img 1).

 

(img 1)

clipboard_image_0.png

The issue occurs when a user mouse clicks on the ellipse > the sub menu appears (img 2)

(img 2) red circle indicates a mouse click > sub menu appears

clipboard_image_1.png

 

Next, when the user attempts to move the mouse into the sub menu area the sub menu disappears. I have been able to duplicate this behavior in Chrome, Edge and FireFox.

 

Occasionally, the user can get their mouse on the sub menu however, it usually takes 4-5 attempts to "catch" the sub menu and moving in particular motion/path does not seem consistent. (img 3)

 

(img 3) red depicts ellipse mouse click > blue depicts the mouse motion/path

clipboard_image_3.png

Again to get to the sub menu ("Pay & Timekeeping") is near impossible. If the user can get to the sub menu the next level is available ("Pay or Time Keeping")

 

Thanks for reading and please let me know if this is a know issue/fix.

 

Thanks,

JCrowe

0 Replies