Creating a hover menu
Creating a hover menu
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)
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)
Add your menu underneath it
Group the menu button and the menu
image
Go into the layers panel and hide the menu (or the content you want hidden by default)
Select the menu group 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.
Example project:
Last modified 2yr ago