Dropline Menu Tag Library

• Download source code for Dropline Menu Bar tag library - 1.12 MB

Introduction

This article presents a JSP tag library for a Drop Line Flyout Menu. This menu currently supports only two levels, however with the addition of new CSS rules it can support multiple levels. The HTML markup of this control is highly influenced by samples found on Stu Nicholl's CSS Play and the Dynamic Drive website. I have rewritten the CSS and added jQuery based mouse hover effect. As shown on Stu Nicholl's website, this can even be achieved using pure CSS, however that solution requires a steady hand, otherwise the menu disappears as soon as the mouse moves out of the menu item. This is the primary reason for using jQuery.

Using the Code

Using this tag library is as simple as declaring the tab library and using the tag itself as shown in the following code snippet. Please remember that the jar file for this tag must be present in the "WEB-INF/lib" folder of your application.

<%@ taglib uri="http://bizsutra.blogspot.com/jsp/tags/ui" prefix="uitags" %>
<uitags:dlmenubar menuData="${sessionScope.MENUDATA}" id="sitemenu"  cssOnly="false"/>

Tag Attributes

The following table summarizes the various attributes of the Drop Line Menu Tag Library.

Menu Data Structure

The menu uses JSON data structure as its input. The menudata is itself a JSONObject with a single property named menu whose value is of the JSONArray data type. The menu data does not contain entries for top level menu bar items. Instead the top level menu bar is derived using the distinct values of the group_id attribute. This scheme is generally useful for multi module business applications where each module has a set of menus and submenus.

{
    "menu" : [
        {
            "description" : "viewall.frm",
            "group_id" : "Mobile",
            "isGroup" : false,
            "name" : "View All",
            "serial" : 1,
        },
        {
            "description" : "",
            "group_id" : "Mobile",
            "isGroup" : true,
            "name" : "Mobile Phones",
            "serial" : 2,
            "submenus" : [
                {
                    "description" : "loanCenter.form",
                    "group_id" : "Mobile",
                    "isGroup" : false,
                    "name" : "Android Phones",
                    "serial" : 3,
                },
                ...
            ]
        },
        ...
    ]
}

The following table summarizes the various attributes in the JSON data structure:

ID Naming Conventions

The id for the top level menu bar item is constructed by prefixing the value of the group_id attribute with the text mbar_. The ID for the menu item is constructed by prefixing the value of the serial attribute with the group_id attribute followed by an underscore _ and the value of the serial attribute of all the parents separated by an underscore "_".

Theme Support

The theming is done entirely using CSS. In total there are four CSS files as summarized below.

• cssdlm.css - The base CSS for CSSOnly menu implementation.
• cssdlm-skin.css - The CSS for theming the CSSOnly menu.
• jsdlm.css - The base CSS for jQuery based menu implementation.
• jsdlm-skin.css - The CSS for theming the jQuery based menu.

Localization

The tag library is locale aware and can render the menu in the localized language. Localization is achieved using resource bundles. The resource bundle is a Java properties file containing key value pairs where the key is formed by prefixing either the itemLabelprefix or groupLabelPrefix followed by a dot "." to the menu serial number. The value represents the localized text to be displayed.

(itemLabelPrefix | groupLabelPrefix).serial

Dependencies

This tag library makes use of the following third party libraries:

Limitations

Currently the tag does not work in non-spring projects. This is due to the use of classes used for localization.

History

1. Feb. 28 2013 - Version 1.0 release.