Learn how to set up a hover effect on a navigation menu that resizes to fit each menu item as it hovers underneath, by using [[This.width]] to resize the hover rectangle.
- [Instructor] One way we can use the width property,…is to dynamically resize things in our prototype…to match the width of some of our other widgets.…We're going to do that here in the exercise file…for the Cookie Butter Dessert Company.…Notice that each one of these menu items…is a slightly different size.…Some of the menu items have more text than others,…and this prototype is already set up…so that our hover effect moves between our menu items…as we hover our mouse.…I'll preview now, so you can see what it looks like now.…When I hover over the different menu items,…our hover effect moves, but it looks a little weird…because it's not resizing to fit our menu item.…
So that's what we'll be working on now,…we're going to use the width property…to dynamically resize this hover effect as it moves.…I've got this Ice Cream Menu selected here,…and I'll double-click to edit the case that's already there.…This is where we're moving our hover effect,…and now what we need to do is add a Set Size action…so that we can make it match the width of our menu.…
- Using variables in Axure
- String methods in Axure
- Truncating text strings
- Formatting dates and times
- Setting up a looping animation
- Setting up a responsive background image
- Positioning widgets in the browser
- Repeater and item properties
Skill Level Advanced
1. Widget Properties
3. Dates and Times
4. Window Properties
5. Repeater and Item Properties
6. Global Variables
Global variables2m 14s
Using plugins on Axure Share2m 49s
8. When Things Go Wrong
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.