HD-DropDownDiv module for Joomla 2.5
Display Joomla articles in a drop down style. Create complex mega menus that break free of the usual "list of links" format to include images, additional text and other HTML content.
What is this?
HD-DropDownDIv allows you to display article contents in a "drop down menu" style, allowing you to create complex image laden menus that are not restricted to the standard Joomla menu format.
It was built primarily to make complex "mega-menus" easier to construct and even easier to edit. Amending the content of the drop down is as simple as editing an article via the article manager.
Usually a drop down menu displays a list of links generated by the Joomla menu manager and displayed in the "unordered list" style. However this module displays "divs" of HTML pulled from seperate articles, allowing you to break free of the standard menu format. Therefore the layout in one column could be of a completely different format to the rest.
This site uses the Drop Down Div module as it's main horizontal navigation. It can also be used to create...
- A list of links with different rollover effects.
- A list of links with accompanying icons
- A list of icon only links
- A list of links with short descriptions.
- A table based layout.
- An embedded Google Map.
- Drop downs of varying widths.
Install the zip file via the administration install manager as per any other module. Once it has installed go to the module manager and select Drop Down Div. Enable the module and allocate to the module position you require.
The module has seperate parameter tabs for each Drop Down Div menu item. In each case enter the top menu item title, the URL it should link to and select the drop down article that should be displayed.
If you do not wish that particular menu item to have a drop down article then set the Activate Drop Down selection to "No".
The width and background colour of each drop down area is also set via the parameters (by default the background colour is "transparent" and the width is set to "auto").
The final tab lets you control the "Top Level" CSS. For ease of use this is split into four editable sections...
Top Level Height
This sets the height in pixels of the main module area (not including the drop down areas). By default this is 30px.
This is the style added to the hyperlink. By default the CSS is...
display:block; text-align: center; height: 20px; padding: 5px; background-color: silver; margin-left: 3px; color:#fff; text-decoration: none;
This is the style applied to the hyperlink's hover state and selected state (the latter is used when the mouse hovers over the drop down rather than the title). By default the CSS is...
There is also space allocated for additional CSS. This is not applied to any specific CSS class or ID and can be used to over rule any prior CSS instructions. There are ten Titles / Drop Down Divs in total and each can be styled seperately. These are the classes & ID's used by this module (replace the number for each consecutive Title / Drop Down Div)...
|a.ddd1||The overall hyperlink style of the Title|
|a:hover.ddd1||The hover state of the Title|
|.ddd1.selected||The active state of the Title (when the mouse is over the drop down)|
|#ddd1||The drop down id|
|.dropmenudiv-one||The drop down class|