CSS Drop-Down Menu

The CSS Drop-Down menu is another Plugin of the I-Metrics CMS used for navigation purposes on the web-front. The plugin deploys a CSS stylesheet and it is binded to the template in use. During installation is important to select the right template as the menu typically is located at the end of the HTML but visually is relocated to the top.

The CSS Menu plugin attaches a CSS file to the front end and presents a CSS menu based on a mixed collection that is configurable from the administration end. The basic steps of configuration are you create a mixed collection you assign the collections you want to display with this plugin and you activate this plugin. A CSS menu container is included with the css_menu.css stylesheet that needs to be adjusted or customized according to the template in use. By default the menu is injected from the html_menu hook.

The functionality of the CSS Drop-Down Menu is straight forward. It uses the mixed, image and text types of the abstract zones to generate the HTML. The default stylesheet contains just few DIV tags to separate the top menu entries from the hidden sections. The css_menu.tpl contains a couple of lines of HTML code to create the container where the menu is positioned. Finally the html_menu function is called and the plugin creates the necessary HTML code.

The html_start entry is also hooked to inject the the stylesheet into the g_media global array. There are also a number of options for the maximum number of drop-down entries to be displayed and  the maximum width each entry may take. The code retrieves each menu title of the drop-down entries and approximates the maximum width. It then sets up the CSS properties so the menu is ergonomic with text titles not expanding outside the containers.

There are dedicated functions for each type of collection handled returning the menu strings with pre-defined tags. Eventually the top-leve routine substitutes these tags with the minimum width for each drop-down.

There is also a dedicated configuration switch on the administrator end to assign a mixed collection to the menu. Therefore a menu may contain mixed collections, text collections or image collections. The total width of the menu bar is not calculated dynamically based on the entries assigned therefore is up to the developer to match the total width of the menu bar to the template/layout in use.