Hot Flashes Menu System
- Подробности
- Автор: Super User
On this page we are going to elaborate how this menu system works, what you can do with it, how to do it, and what you can't do with it. For your reference, until you read this text, please look at the home page of the Hot Flashes template. We are assuming you have fair knowledge of basic Joomla menu management. If you don't please learn more about it.
If you install template using HotStart method, all options that you see on our demo will be set automatically!
Menu module parameters
To activate the Flashes menu, you should edit parameters of your menu module in Extensions > Module Manager. Click on your menu module and enter "flashes" (without quotes) for Menu Tag ID parameter. Module should be published in position 'user3'.
Maximum 3 levels
As usually in Joomla, you create your menu items in menu manager. In this case you can have up to 3 levels of menu items. Please don't make fourth or deeper menu levels.
The first level
The first level is always visible. You can have as much menu items in the first menu as you need. The menu images will be divided in 3 parts if you have 3 first level menu items, or in 5 parts if you have 5 first level menu items, and so on. More first level menu items will bring more divisions of the menu images and more complex animation. When the mouse pointer is over any first level menu item, it will show the second menu items (if available).
You must prepare images for your first level menu items in the resolution that you need. On our demo, the images are 960 x 542 px. All images must have the same resolution and must be in format jpg, jpeg, gif or png. The number of the images must be equal as the number of the first level menu items.
The images must be named as bg1.jpg, bg2.jpg, bg3.jpg, and so on. Extension .jpg can also be .jpeg, .gif or .png, depending of the image format.
The images must be uploaded to the folder <your joomla root>/templates/hot_flashes/images/menu.
Position, height, font size and colors of the first level is determined in the template parameters (see below).
The second level
The second level is visible when mouse pointer is over any first level menu item (if this menu item has child menu items). As you can see, the second level has background colors. Actually, those background colors are from transparent png background images. Those background images should be named as sub1.png, sub2.png, sub3.png, and so on. They can also be in format jpg, jpeg or gif. They must be uploaded to the folder <your joomla root>/templates/hot_flashes/images/menu. The number of the second level background image must be equal as the number of the first level menu items. Therefore, the background image can be different as on our example. If you need them to be identical, you can multiply one image. Width of the background images must be 700px. Height of the background images is not important as they are repeated vertically.
Height, font size and colors of the second level is determined in the template parameters (see below).
The third level
The third level is visible when mouse pointer is over any second level menu item (if this menu item has child menu items). The third level menu items are shown in a balloon that lists all available menu items. The balloon disappears when mouse pointer is moved out.
Flashes menu options in template parameters
The first 2 options are used to set width and height of the menu. In our example, menu width is the same as template width (960). Make sure that you images for the first level menu items are in the same resolution as width and height of the menu set in template parameters.
Root items top offset is distance of the first level menu from the top. Root items height is the height of the first level menu.
In the next 4 fields you can select text colors and background colors from the color picker.
The last parameter for the first level menu determines the font size. Font family is defined and taken from the template's CSS file.
The last 4 fields define second/third level's height, text color and font size.
Flashes menu in the Interior Pages
In the template parameters you have 2 Flashes Menu height parameters, one for home page and another for interior pages. Like on our demo, the menu height on the interior pages can be reduced. In this case, you would see only a bottom part of the menu in the interior pages. In example, if full height of the menu (on home page) is 500 and you enter 200 for the interior pages, the top part of the menu will be cut off. In this case, the height that will be cut off is 500-200=300 pixels.