The Coding Paparazzi

Currently, we can get only one level of submenu with the standard templates for Blogger created with Artisteer, version 2.3;  Hopefully, the possibility of having second and third levels (sub-subMenu and sub-sub-subMenu) will be made in a future release of Artisteer but now, we are reduced to the obligation of doing the required modifications to the template ourselves if we want those. This is the object of this article and it can be made pretty well as you can see from the following figure illustrating an example of sub-menus expanding on three levels:

This article is divided into three parts. The first part shows how to modify the JavaScript code in the template for getting second and third levels of sub-menus. The second part deals with more advanced changes to the code for making our job easier when we have to create very long menus, having tens or even hundred of sub-options; something that is not easy to manage with the standard interface of Blogger for editing the menu. Finally, the third party shows how to style the submenus so that their width is related to their content in in order to have a more pleasing look to the eye.

Note that even if you're not interested in the menu interface for Blogger created by Artisteer; some of the techniques discussed in this three parts article could still be interesting for you to read.

Before we can make the changes seen in this article, we must first be able to know how to make modifications to the template once it has been installed (or published) on Blogger. To do this, you must use the "Edit HTML" tab of the "Layout" option that you'll find in the settings of your blog from your Blogger's Dashboard. Most of this has already been discussed many times on the various blogs about customizing Blogger so I won't repeat the process here but if you need to have some references, you can start with "Can I edit the HTML of my blog's layout? - Blogger Help" and "Layout Guide - Blogger Help".

When someone wants to change the Blogger template code to include several levels of submenus, the first thing to think would probably be to simply edit the template code in order to include the various submenus in ordinary (without any javascript) HTML code; like we must already do for the standard HTML templates produced by Artisteer. For a quick reference on this standard procedure, see Artisteer Add-ons - Cheat Sheet: Part 3 - Navigation. Unfortunately, it's not easy to do the same thing on Blogger because the required code to edit is included in a not easily editable widget; as you can see from the following extract (notice that in order to see this piece of code on your own template, you must check the option "Expand Widget Templates"; as it's also shown below in the upper right par of the figure) :

Also, writing and editing the long list of the required <ul> and <li> tags necessary to express the CSS menu of Artisteer is not an easy task and is very prone to errors; especially when the number of options reach many tens. In my opinion, the method that we'll see in this article is a better solution but of course, you must not forget about the possibility of simply adding your own custom HTML code; especially if you have it already ready at your hand.

From the code illustrated in the previous figure, we can see that once the list of options for the menu has been inserted into the dynamic array "menuitems", the function artDisplayTopMenu() is called. This is the function that will generates the HTML code required for displying the menu using the information provided in the passed array "menuitems" and evidently, is also the one that we must modify in order to allow for the display of second and third level of sub-menus.  You can find this function by searching for "artDisplayTopMenu" or simply for "artD" (use [Ctrl]+F to access the Find box) but for your convenience, I reproduce the original source code here :

function artDisplayTopMenu(menuitems){
    var i=0;
    var subList = false;
    var menu = new Array();
    for(i=0; i < menuitems.length; i++){
      var item = menuitems[i];
      var itemname = item[0];
      var itemlink = item[1];
      
      if ( (itemname.indexOf("-") == 0) && !subList) document.write("<ul>");
      else if ( (itemname.indexOf("-") != 0) && subList) { document.write("</ul></li>"); subList = false; }
      else if (i != 0) document.write("</li>");
      
      document.write("<li>");
      
      if (itemname.indexOf("-") != 0){
        if (window.location == itemlink) 
            document.write('<a href="'+itemlink+'" class="active"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');
        else if(itemlink == "http://./")
            document.write('<a href="#"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');
        else
            document.write('<a href="'+itemlink+'"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');
      } else {
        document.write('<a href="'+itemlink+'">'+itemname.substr(1,itemname.length)+'</a>');
        subList = true;
      }
      if (i==(menuitems.length-1)) document.write("</li>");
    }
}

The first thing we notice is that all the four characters "<> & have been escaped (translated) into their equivalent HTML entities; which makes reading or changing the JavaScript code more difficult. A Blogger template is stored as a XML document; which means that these four characters must be obligatory be escaped. However, instead of escaping them individually, we could also chose to use the global XML escape sequence <![CDATA[ ... ]]>. As this special sequence must be used in a piece of JavaScript code, it must itself be escaped from the view of the JavaScript parser by using either // or /* ... */; which at the final gives us:

By using this special sequence, we can rewrite the code of the function in a much cleaner and lisible way:

// <![CDATA[

function artDisplayTopMenu(menuitems){
    var i=0;
    var subList = false;
    var menu = new Array();
    for(i=0; i < menuitems.length; i++){
      var item = menuitems[i];
      var itemname = item[0];
      var itemlink = item[1];
      
      if ( (itemname.indexOf("-") == 0) && !subList) document.write("<ul>");
      else if ( (itemname.indexOf("-") != 0) && subList) { document.write("</ul></li>"); subList = false; }
      else if (i != 0) document.write("</li>");
      
      document.write("<li>");
      
      if (itemname.indexOf("-") != 0){
        if (window.location == itemlink) 
            document.write('<a href="'+itemlink+'" class="active"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');
        else if(itemlink == "http://./")
            document.write('<a href="#"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');
        else
            document.write('<a href="'+itemlink+'"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');
      } else {
        document.write('<a href="'+itemlink+'">'+itemname.substr(1,itemname.length)+'</a>');
        subList = true;
      }
      if (i==(menuitems.length-1)) document.write("</li>");
    }
}
// ]]>

Note that the escaping sequence <![CDATA [ ... ]]> can be used for other purposes, such as for fast encoding of javascript ads (AdSense, AdBrite, Amazon, etc.., see the article "Simple and fast encoding of javascript ads (AdSense and others) for Blogger") or for inserting the XML statement <? IMPORT>, as discussed in another article on the use of MathML with Blogger.

To create a sub-menu in Blogger using this function, we must place an hyphen ("-" or dash) at the beginning of the name of each sub-item of the menu's "Link List" configu/ation window:

The new version that I made uses something similar: the second level requires a "-+" at the beginning of each option's name and the third level a "-+="; as you can see in the below figure.  I've chosen these labels because they were making the code and the hierarchy of the menu easier to read and understand but of course, you could use anything else; provided that you adapt the code of the function.

And now, without any further delay, here's the revised version of the function artDisplayTopMenu() :

// New version for artDisplayTopMenu(); allowing for
// second and third sub-menu levels.
// First level: option name must begin with a '-'
// Second level: begin with a '-+'
// Third level: begin with a '-+='

// Not HTML escaped so // <![CDATA[ ... // ]]> must be used:
// <![CDATA[

function artDisplayTopMenu(menuitems) {

    var i = 0;
    var subList = false;
    var subList2 = false;
    var subList3 = false;

    for (i=0; i < menuitems.length; i++) {
      var item = menuitems[i];
      var itemname = item[0];
      var itemlink = item[1];
      
      if ( ((itemname.indexOf("=") == 2) && !subList3)
        || ((itemname.indexOf("+") == 1) && !subList2)
        || ( (itemname.indexOf("-") == 0) && !subList) ) {
          document.write('<ul>');

      } else if ( ((itemname.indexOf("=") != 2) && subList3)
	|| ((itemname.indexOf("+") != 1) && subList2)
                || ((itemname.indexOf("-") != 0) && subList) ) {

        if ( (itemname.indexOf("=") != 2) && subList3) {
          document.write("</li></ul>");
          subList3 = false;
        }

        if ( (itemname.indexOf("+") != 1) && subList2) {
          document.write("</li></ul>");
          subList2 = false;
        }

        if ( (itemname.indexOf("-") != 0) && subList) {
          document.write("</li></ul>");
          subList = false;
        }

        document.write("</li>");

      } else if (i != 0) {
        document.write("</li>");
      }
      
      document.write("<li>");

      if (itemname.indexOf("-") != 0) {
        if (window.location == itemlink) {
          document.write('<a href="'+itemlink+'" class="active"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');

        } else if(itemlink == "http://./") {
          document.write('<a href="#"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');

        } else {
          document.write('<a href="'+itemlink+'"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');
        }

      } else {

        if (itemname.indexOf("=") == 2) {
          document.write('<a href="'+itemlink+'">'+itemname.substr(3,itemname.length)+'</a>'); 
          subList = true;
          subList2 = true;
          subList3 = true;

        } else if (itemname.indexOf("+") == 1) {
          document.write('<a href="'+itemlink+'">'+itemname.substr(2,itemname.length)+'</a>');
          subList = true;
          subList2 = true;

        } else {
          document.write('<a href="'+itemlink+'">'+itemname.substr(1,itemname.length)+'</a>');
          subList = true;
        }
      }

      if (i == (menuitems.length-1)) {
        if (subList3)
          document.write("</li></ul>");
           
        if (subList2)
          document.write("</li></ul>");

        if (subList)
          document.write("</li></ul>");

        document.write("</li>");
      }
    }
}
// ]]>

You can see and test the final result by going at the following blog that I've setup for testing purpose: Sub-SubMenu for Blogger with Artisteer.

This concludes Part 1 of this article. In parts 2 and 3, we will elaborate on this feature by first replacing the need to use the dialog window "Link List" in order to manage the menu's options menu (replacing this dialog window is very useful because it's far from beeing to be the best in the world to use when you have dozens of options to adjust) and second, we will see in the last part how to adjust the widths of the boxes in order to adapt them to their content.

A final word of caution: this is custom modification to the template, so if you republish your template from Artisteer, you'll have to remake this modification to your template again.