Pages

Saturday, June 2, 2012

ElcomCMS: Place arrow on panalbar menu item with sub items


The default ElcomCMS panalbar menu does not have functionality to place an indicator on menu items that have sub items. This is very important for usability.

You can implement this by inserting the following code in your PostCustomJavaScript.js file.


// Place arrows on each panalbar menu item that has sub-items
$(document).ready(function() {
    $('.slide').each(function(){
        if($(this).css('display') == "none"){
            $(this).prev().children('span').addClass('menuArrowRight');      
        }else{
            $(this).prev().children('span').addClass('menuArrowDown');
        }
    })  
})

You will also need to add something like the following to your site CSS file.
Obviously this will depend on how your menu is styled and where the indicator images are located :

.menuArrowRight{
    background: url("/images/UserUploadedImages/arrow_blue_side.gif") no-repeat scroll 160px center;
}
.menuArrowDown{
    background: url("/images/UserUploadedImages/arrow_blue_down.gif") no-repeat scroll 160px center;
}


2 comments:

  1. I actually liked reading your writing content. It was a quality material. I recommend you to submit blogposts even more frequently. This way,with this kind of a blog I think you might rank higher in the search engines. I also subscribed to your RSS feed. Continue this great work!
    java web applications

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete