New Hover menus and Pop Ups Examples

There has been a lot of support for hover menus and pop ups in the last few releases.

Hover menus or hover objects are elements that show when the mouse is over an item and then are hidden when they the mouse is removed from that object.

Pop ups are objects that are shown when a user clicks on an object and is hidden by clicking a button in the pop up or clicking outside the pop up.

There are even some XD example projects showing how to do this with Web Export version 5.5.0 and newer:

Hover menus:

Pop ups:

Hover Menu Guide
Hover menus are used to show things like menus and more information when you hover over an element. These are similar to pop ups seen in other examples.

Use the CSS template to show a menu when hovering over an element.

Menus are typical but you can have show other content.

You can also review the pop up examples to see other ways to show pop ups.

Create some menu items (textfields with anchor tag name in a group)
image

If you are going to use it on more than one artboard consider making it a component

image

Create your menu “button” (it can be a text field too)
image

Add your menu underneath it
image

Group the menu button and the menu

image

Go into the layers panel and hide the menu
image

Select the menu and in the Element Options panel click on the CSS template field

image

Enter the following in the CSS template field

/* show all descendants and add pointer cursor on hover */
{SELECTOR}:hover * {
     display: block;
     cursor: pointer;
}

/* add background padding to create a highlight */
{SELECTOR} a {
   padding: 9px 16px;
}

/* change background color on hover */
{SELECTOR} a:hover {
   background-color: #ddd;
}

Export the page and test in the browser

Overlay Guide:
https://velara-3.gitbook.io/web-export/how-to-section/showing-overlays