Web Export
  • Introduction
  • Getting Started
  • Install the Plugin
  • Create or open a project
  • Export the Artboard
  • Export Artboard Dialog
    • File Name
    • Subdirectory
    • Page Title
    • Web Page Template
    • Expected HTML Output
    • Stylesheet Name
    • Artboard Stylesheet template
    • Expected Stylesheet output
    • Script Page options
    • Images
    • Export Folder
    • Server
    • Alternative Fonts
    • Scale to fit
    • Centering the page
    • Styles Inline
    • Style via Classes
    • Markup Only
    • Outline Elements
    • Keyboard Navigation
    • Add Data Name
    • Add Image Compare
    • Auto Refresh
    • Export type
    • Reset Artboard
  • Addressing Export Issues
  • Messages Console
  • Export types
    • Export to a Single Page
    • Export to Multiple Pages
    • Export Artboards and show by size (media query)
    • Export to a Slideshow
  • Keyboard Shortcuts
  • Responsive Pages
  • Dynamical page that grows in height
  • Modifying Individual Elements
  • Elements and Sub Elements
  • Styling elements
  • Element Options
    • Id field
    • Tag Name
    • Styles
    • Classes
    • Attributes
    • Hyperlink
    • Width and Height Size
    • Background
    • Markup Inside
    • Markup Before and Markup After
    • Text Ids
    • Text Tokens
    • Row Layout
    • Column Layout
    • Overflow
    • Script Template
    • CSS Template
    • HTML Template
    • Layout Section
      • Layout Position types
      • Layout Position Location Types
      • Layout sizing options
    • Centered, Constraint and Anchored Positioning
    • Debug Element
    • Show Outline
    • Export as Image
    • Export as String
    • Export element
    • Displayed
    • Auto Export
    • Export (artboard)
    • Show Markup
    • Show CSS
    • Show Property Changes
    • Reset All Property changes
    • Navigation Buttons
  • Changed Properties
  • How to section
    • Creating a hover menu
    • Centering a page or element
    • Showing Overlays
    • Embedding an HTML page
    • Linking to pages or views
    • Creating a download link
    • Creating List items
    • Embedding Fonts
    • Adding Hover Effects
    • Styling Hyperlinks
    • Showing elements by size
    • Creating a Fixed Header
    • Make a Stretchable Line
    • Blend Modes
  • Creating Code Blocks
  • How Exporting Works
  • Single Page Application API
  • Element Tokens
  • Template Tokens
  • Setting up a server
  • Putting your site online
  • Code Block Snippets
    • Adding a cursor over on hover
    • Go to next or previous artboard with swipe gesture
  • Other Features
    • Gradients
    • Blend Modes
    • Form Elements
  • Learning by Videos
  • WordPress Integration
    • Summary
    • Export the main page
  • Example Packages
  • Web Developers
  • Non Web Developers
  • Debugging
  • Version
  • Support
    • Forums
    • Discord Channel
  • License
  • Feature and Bug Reports
  • Related Plugins
Powered by GitBook
On this page

Was this helpful?

  1. How to section

Creating a hover menu

Creating a hover menu

PreviousHow to sectionNextCentering a page or element

Last updated 4 years ago

Was this helpful?

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.

How to create an hover menu

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

Group the menu button and the menu

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

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:

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

Add your menu underneath it

image

Go into the layers panel and hide the menu (or the content you want hidden by default)

image
Logoxd-examples/web-export/examples/hover-menus at master · velara3/xd-examplesGitHub
image
image
image
image