|
VTEM Fancy Menu (Configuration) |
Please see LEFT or RIGHT side of screen to view demo
- Introduction
- How Visual Studio docking functionality can be done with jQuery and unordered lists. Basically, the main goal was to implement multiple docking and undocking functionality.
An overview of VTEM FANCY MENU module key features:
• Joomla! 1.5, 1.6, 1.7, 2.5, 3.x Native.
• You can list Menu or inside a docking in a Joomla module.
• Reveal sub-menu when user Mouseover the main navigation.
• Easy text, background color for user configuration.
• When user move the mouse pointer outside the panel it should slide back
• If user clicks on "Dock" link, panel should fix in the current position
• If users "undock" the panel it should slide back
• Easy and friendly administration.
• SEF URLs.
• Used JavaScript Framework: Jquery
• Fully compatible: Firefox, IE6+, Opera 9.5+, Safari, Netscape, Google Chrome, Camino, Flock 0.7+.
- Getting Started
- Overview files
Start by downloading from our products section - vtem.net - the VTEM Fancy Menu module package.
After downloading the package, be sure to unpack locally the vtem_fancy_menu_pack.zip file. If all goes well, you should see the following files:
Here’s an overview of the available files:
Module:
mod_vtem_fancy_menu.zip
This is the module file to be installed on your joomla application. It will display all the content set on the selected website pages.
doc!!! - folder:
HelpFile.pdf
This help file that will help you to install, set and configurations your VTEM Fancy Menu module.
VTEM Fancy Menu Module Installation
The installation is very simple and should not pose any problem, if you follow the next instructions in properly way.
Using the Joomla! Administrator, navigate to the administrative panel on your site and from your administration top menu, select Extensions > Install/Uninstall.
Click the ‘browse’ button, select the module file (mod_vtem_fancy_menu.zip) and press ‘Upload File & Install.’
A message will appear saying ‘Module Installation - Success.’
The VTEM Fancy Menu module is now available on your Modules Manager.
- Module Configuration
- VTEM Fancy Menu Configuration
To configurations your VTEM Fancy Menu module, navigate to “Extensions > Module Manager” and find the VTEM Fancy Menu module on the available list.
Click on it to enter inside and to edit the module parameters configuration.
From left to right, set the module in your selected position and enable it.
Before saving the module, you must configurations the following parameters fields:
Module parameters:
Module Class Suffix:
A suffix can be applied from the CSS class of the module and this will allow individual module CSS style.
Module unique ID:
Unique ID for module (must be unique if you have two or more modules on one page) (i.e. vtemfancymenu1)
Menu Name:
The name of the menu (default is mainmenu).
Position:
Choose position to show the module.
Start level:
Level from which to show items.
End level:
Level until which to show items.
Only use image:
Use link image and hide text.
Image alignement:
Align image to the left or right.
Menu background:
Background color for the menu items as hex value (i.e. #000000).
Menu color:
Color for the menu items as hex value (i.e. #000000).
Hover text color:
Color of text when mouse over on menu items.
Main menu width(px):
Width of main menu items in px.
Sub-menu width(px):
Width of sub-menu items in px.
Jquery load:
Use this option only if you have a problem with scripts on your site. In other situations option YES is strongly recommended. If you want to run more than one copy of this module on same page then set this value for disabled. Also if you have an jquery framework included on your site, then disable this option also.
CSS:
Use to add your css.
- Screenshots
 - Customizable CSS
- CSS Classes for advanced customization
If you have some knowledge of how to set up style sheets, here are the main classes that you can format to create your own design.
If you do not have this knowledge, you can request support in our forum. Also, we recommend that regular visits to our official site – VTEM.NET - where you can find some examples in the future.
Here’s the list of classes and ID CSS style used on the VTEM Fancy Menu module:
.vt_menu_wapper
.vt_fancymenu
.vtem_link
.vt_title
In some cases, may have to impose the setting of class, to overcome already existing ones on the module, by placing the “!important” class in the style configuration.
|
