[SmartMenus 6 add-on]
This sample demonstrates a small add-on for SmartMenus 6 that adds scrolling ability to overlong menus (with many items) that do not fully fit in the height of the viewport.
The addon creates dynamically 2 scrolling images for overlong menus and places them at the top and bottom of the viewport. These images serve as both scrolling indicators and triggers (when hovered) and allow such menus to be scrolled up or down by the user so that all their items could be accessed with the mouse cursor. In recent versions of all major browsers scrolling the menus with the mouse wheel (if available) is also supported.
Open the "Test menu" above (the last main menu item).
Using the add-on is really simple - just link the small JS file on your page after the link to the SmartMenus script core (c_smartmenus.js) file.
The add-on can be customized through the following config array (found in the "c_addon_scrolling.js" file):
c_scrolling=[
'[scroll_top.gif]', // TopScrollingImageSource ('[image_source]')
'[scroll_bottom.gif]', // BottomScrollingImageSource
'Scroll up', // TopScrollingImageAlt
'Scroll down', // BottomScrollingImageAlt
28, // ScrollingImagesWidth
18, // ScrollingImagesHeight
3, // ScrollingImagesOffset (pixels) - offset from window's top and bottom edges
24, // ScrollingStep (pixels)
50 // ScrollingInterval (1000==1 second)
];
Just make sure you put the scrolling images in the folder where you keep all your menu images (i.e. the sub menu indicator arrow images etc.) because the global c_imagesPath variable from the main SmartMenus configuration file (c_config.js) is honored for this add-on too.
This add-on is supported in all browsers that are fully supported by the SmartMenus 6 script with the following exceptions: