lock menu to image or text variations
menues appear on click, open from bottom or top
- often needed to e.g. combine centered tables and MenuMachine on a page or to have the menu always aligned with some (in)visible image no matter how the user stretches the window or zooms the fontsize
- resize your browser window to see the images and their appropiate menues move in relation
- in former MenuMachine versions you had to apply GoLive actions to achieve this, from version 2 on you can now simply put the menu into context or next to images
- example 1 - EYE (yes, my own eye - watch out! ;-)
- the eyepicture sits in a layer that has right and left margin set iva CSS to 49% each
- I could have also used a table that centered on the page with the image in the topmost row, e.g.
- the MenuMachine menu EYECARE is put beneath the eye
- example 2 - SKIN
- the skinlayer stays 10% from top and 230px from left (it only moves slightly depending on window height)
- the MenuMachine menu is put beneath the skinpicture
- example 3 - HAIR
- the hair image sits in a layer positioned 20px from right
- the MenuMachine menu is put right above the image
- the submenu of HAIRCARE has as first item an empty with 59px height (like the hair image)
-
example 4 - LIPS
- the layer with lips pic and menu is nested in this text layer, right above the example 2 line and positioned left minus 100px
- the menu is put above the lips
- the MenuMachine menu opens here from bottom to top
- depending on browser windows and fontsize the image is always at a different position in relation to the window edges, but the menu always is at the position where it is nested/put in the contentflow
- such you can e.g. always have a menu attached to pictures with submenu options like zoom, enlarge, open in new window, print, etc. see two examples here
(for demonstration only - no pagelinks added to the items)