Flyout Tabs

Version: 1.2.0 is now Joomla! 3.7.0 Ready. 100%!

Flyout Tabs © 2012-2017 by GraphicAholic is a GPL Joomla! J3.x module is a complete re-write from the original release. You can use Flyout Tabs to display a series of tabbed images on the left or right hand side of your browser that will 'flyout' when you hover your mouse over them. This module will display up to FIFTEEN (15) tabs in a very pleasing 'eye-candy' way and it's potential is endless only to your imagination. Flyout Tabs uses the jQuery Library script that Joomla 3.x pre-loads so there is no need to worry about this! This module has been tested and tested and tested again and found to be bug free, feature rich and crazy fun to use! Download it and take it out for a test-drive. I'm sure you'll find a need for it within your Joomla website.

Style Settings

  • Tabs position: Options are Left side of screen | Left side of screen with dropshadow | Right side of screen | Right side of screen with dropshadow
  • Inside Tab Color-Idel: Set as needed
  • Border Tab Color-Idel: Set as needed
  • Inside Tab Color-Hover: Set as needed
  • Border Tab Color-Hover: Set as needed
  • Flyout Tabs Top Position: This will adjust the distance between the top of your site to the first used tab. Default is 50px
  • Flyout Tabs Width: Adjust the Flyout Tabs width. Default is 100px
  • Flyout Tabs Height: Adjust the Flyout Tabs height. Default is 65px
  • Flyout Tabs Left Offset: Adjust the Flyout Tabs offset to show more or less of each tab. The higher the minus value, the less the entire tab will show on your screen. Default is -60px
  • Flyout Tabs Right Offset: Adjust the Flyout Tabs right offset to show more or less of each tab. The higher the minus value, the less the more the entire tab will show on your screen. The higher the value without the minus symbol, the less the entire tab will show on your screen. Default is -20px
  • Image Position: Adjust the position of your image icons. The greater the pixel value the more your image icon will to the right. Default is 20px.
  • Top Image Position: Adjust the 'Top' image position within the tabs. Default is 0px
  • Left margin on mouseover: Adjusts the left margin position on mouseover. Some professional templates require this setting to be adjusted as much as -20. Default is -2
  • Right margin on mouseover: Adjusts the right margin position on mouseover. Some professional templates require this setting to be adjusted as much as -80. Default is -60px
  • Spacing between tabs: Adjust the amount of spacing in-between the tabs. Default is 73px
  • Tab Behavior: Options are Fixed position | Scroll with template

Tab Settings

There is a total of 15 available Flyout Tabs you can use and customize. All offer the same options as each other.

  • Add text to this tab?: Yes|No.
  • Title for Tab X: If 'Add text' is set to Yes, type in your tab title here. Please... keep it brief!
  • Left-Right title position: If 'Add text' is set to Yes, use this option to move your title Left/Right position.
  • Top-Bottom title position: If 'Add text' is set to Yes, use this option to move your title Top/Bottom position
  • Title color: If 'Add text' is set to Yes, use this option to change the title's font color
  • Image path for Tab X: Select your tab icon. The default path is your Joomla 'images' base folder.
  • Hyperlink for Tab X: Type in the link path for this tab.
  • Link Behaviour: Options are Same Window | New Window | URL in Lightbox | Image in Lightbox
  • Width of URL: Set the width of the popup lightbox (if Lightbox is being used)
  • Height of URL: Set the height of the popup lightbox (if Lightbox is being used)

Pre-installed icons

On install, the installer package is designed to copy the pre-packaged icons from the module's image folder over to your Joomla! 'images/flyout' folder. If all goes as coded, this process is seemless. If you don't receive any install errors regarding the icons, you will access the pre-packaged icons in the 'images/flyout' folder moving forward. If you receive an install error with the icons you will want to manuall copy over the icons from the module package to the 'images/flyout' that you'll want to create via FTP.

Please note... the pre-packaged icons are 64x64 pixel sized. This size works quite well on most desktops, laptops and tablet displays. Once you venture to smartphone displays, these icon sizes do take-up a lot of screen real estate! If you plan to use Flyout Tabs on smartphones, you may want to use smaller sized icons. This will be totally up to you to resize the icons or find, download and use different sized icons available across the internet. It is strongly suggested to store any new icons you want to use in the 'images/flyout' folder of your Joomla! install.

Turning off a tab

If you wish not to use a tab or turn-off an inactive tab all you need to do is remove the icon image path from the media option setting. If at a later date you want to re-active this tab, just add an icon image to this media option setting.

Adding titles to tabs

Flyout Tab titles are created and managed within the 'Tab Settings' of the module settings. Each of the available 15 tabs can have their own title by clicking Yes of the 'Add text to this tab?' option. Please note, the tab text you add is rotated 90 degrees and since most tabs are small... keep your tab text brief! In addition, because we rotate the title text, managing it's actual position within the tab may require some extra setting adjustments. This is what the 'Left-Right title position' and 'Top-Bottom title position' are programmed to help push your title text around. Based on what template you are using, a fair amount of adjustments may be required for each title you create!