Now, letís break down the code, to understand the properties and methods assigned to the class. I begin by defining the "menu()" constructor method, which accepts two parameters: "menuTexts" and "menuLinks". The first parameter refers to the texts displayed for the links. The second references the URLs corresponding to each link.
Until now itís simple. The constructor takes these parameters and assigns them as class properties. Next, I assign a new property named "loc", which contains the URL corresponding to the current page. The following line does so:
The next step consists of creating the general <div> menu container element, and ties a style to it:
The rest of the code for the constructor defines the methods "createLeftCorner", "createLinks" and "createRightCorner", for generating the three main sections of the menu. Finally, the constructor invokes the "buildMenu" method to create the whole menu structure.
As the name implies, the "createLeftCorner" method builds the left corner of the menu, creating a <span> tag, attaching the "leftcorner" CSS class to it and assigning a ' ' as a value of its "innerHTML" property. Although this property is not really standard, it is fully supported by most browsers, so it becomes handy for implementing in cross-browser projects. In a similar fashion the "createRightCorner" method generates the right corner section. Once the two corners have been created, theyíre appended as child nodes in the <div> menu container. Are you still with me? Fine, because weíre almost done.
To generate the menu links, the "createLinks" method loops through the arrays "menuTexts" and "menuLinks" to assign the texts and the URLs for each link. Here an explanation is needed. In order to determine whether the link corresponds to the active page, the method simply compares the pageís current location with the value of each element of the "menuLinks" array. If there is a match, the corresponding link is displayed differently. This location resolving process is done with the line:
Finally, once all of the links have been appended to the menu container element, the menu is ready to be inserted into the Web document. As usual, once the page is loaded, a "menu" object is instantiated and the proper parameters, menu links and texts are passed to the constructor. Iíve inserted the menu as the first child of the body element, but you might chose another insertion point within the document. The following lines do that:
Iíve defined some links to be displayed in the menu, in conjunction with their texts. This is completely customizable. Because the class is generating the necessary HTML markup via the DOM methods, the source HTML might be reduced to something like this:
And, if you name the (.js) file something like "menu.js", the code to be placed in all of the pages would be the following:
After some hard work, thatís your dynamic menu! Donít you feel a bit happier? I bet you do.
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.