basic menu 2 – with images
orientation: mainmenu horizontal
submenu vertical (see above)
submenu horizontal (see below)
- menues made with images - transparent .gifs for different normal and rollover state
- background colour for normal and over state set in the inspector of MenuMachine (and can be played around with or adjusted until the colours fulfill expectations)
- in the second sample the submenues open horizontally
though this if often asked for you can notice yourself that choosing a submenu item takes longer for the user as the mouse has to travel a longer way horizontally over all items than doing the same vertically
also: I left the above submenues that small that you can see for yourself: submenu height at horizontal menues should be larger to let the user's cursor travel safely and comfortably horizontally along and not accidentically hit another main menu item
- as you have realized using many links with images increases the page file size, so render speed test is recommended before building huge menues in every page
- to save file size even at image menues
- you could use the same image for normal and over state and just change the colour
- try to use gifs with only few colours
- keep in mind that antialiases text will increase each imagesize multiple times
- gradients, drop shadows, pictures do increase filesize also enormously
- make your decision before you start preparing a bunch of menuimages: either a small menu with wonderful jpg items or large menues with smart and small images
- ”slide“ was chosen as submenu block effect at the top menu sample
- in MenuMachine you can also define text for the image items to make it searchengine-/screenreaderfriendly (not applied in above example)
(for demonstration only - no pagelinks added to the items)
