plainblack.com
Username Password
search
Bookmark and Share

Bulleted List Navigations

One of the new navigation templates introduced in WebGUI 7.x was the Bulleted List. This template draws out your page tree in a standard unordered bulleted list using HTML tags.

 

Although the idea is simple, the use of the Bulleted List gives you greater control over your navigation systems. As you'll see, this can accomplish some terrific things with a basic layout.

 

Basic Bulleted List and XHTML

 

 

This is a great template to organize your pages into a nice nested layout, and it actually is the only template that puts links in a nested order. Even Indent Nav, which can give the illusion of nested code, doesn't actually generate it. The parent/child relationship that Bulleted List generates is surprisingly powerful.

 

It's important to note that the actual template code to generate Bulleted List is fairly complex compared to most of the other standard WebGUI navigation systems. However, you don't actually need to modify the template at all, which is part of its beauty.

 

To elaborate on nested code, the XHTML of the Bulleted List template will be analyzed.

 

Note: Although Bulleted List uses the standard XHTML tag <ul>, you could potentially accomplish much of the same thing by using almost ay type of nested tag setup.

 

XHTML

 

 

<ul class="bulletList">

<li class="level1"><a href="/home">Home</a>

<ul>

<li class="level2">

<a href="/getting_started">

Getting Started

</a>

</li>

<li class="level2">

<a href="/your_next_step">

Your Next Step</a>

</li>

<li class="level2">

<a href="/the_latest_news">

The Latest News

</a>

</li>

<li class="level2">

<a href="/tell_a_friend">

Tell A Friend

</a>

</li>

<li class="level2">

<a href="/site_map">

Site Map

</a>

</li>

<li class="level2">

<a href="/page_layout">

Page Layout

</a>

</li>

</ul>

</li>

</ul>

 

 

In this code you'll see that the HTML begins drawing the <ul> (unordered list) tag, the first <li> tag along with the very first link, Home. At the bottom is a closing </ul> and </li> tag. This is the first level in the navigation. The code beginning on the third line is nested within the first <li> tag, because all of these other pages are descendants of Home. For example, if the page Tell A Friend had a few subpages, a new <ul> tag, and subsequent <li> tags, would be nested within its own <li> tag.

 

The question is, why is this important? If a nested navigation can be simulated in WebGUI already, is it really necessary to actually nest them? What advantage can this give? If you've already read the chapter on Indent Nav, you know that you can significantly modify the look and feel of a navigation system just by using CSS. The degree to which you can modify a Bulleted List is even greater than Indent Nav, especially for DHTML style menu systems.

 

Take a look at a few possibilities.

 

First Example

 

 

 

Here is a new menu system created with CSS and the Bulleted List template. You'll notice that this navigation is extremely similar to one of the navigations created in the Indent Nav chapter. It's true that the navigations are similar, but there are some definite key differences between them.

 

A horizontal menu system works great with Indent Nav when you just have a single level of content, but what if you have more than that? What if you also have subpages you want to display? You'll find that Indent Nav starts to fall short in that area because it's lacking that nested quality in its code. To illustrate this, a couple of pages will be added to the Your Next Step section.

 

 

A Few Submenu Items

 

 

Two new pages have been added to the page tree, descendants of the Your Next Step section. As you can see, with the CSS they've become a small submenu underneath that section. To show how this was accomplished, take a look at the generated HTML now that there are a couple of submenu items.

 

A Few Submenu Items, XHTML

 

 

<ul class="bulletList">

<li class="level1">

<a href="/getting_started">Getting Started</a></li>

<li class="level1">

<a href="/your_next_step">Your Next Step</a>

<ul>

<li class="level2">

<a href="/your_next_step/example-1">

Example 1</a></li>

<li class="level2">

<a href="/your_next_step/example-2">

Example 2</a></li>

</ul>

</li>

<li class="level1">

<a href="/the_latest_news">The Latest News</a></li>

<li class="level1">

<a href="/tell_a_friend">Tell A Friend</a></li>

<li class="level1">

<a href="/site_map">Site Map</a></li>

</ul>

 

 

You'll see that the main difference from the original code is the absence of “Home,” because it would have added two submenu layers instead of just one. This example will focus on two layers.

 

If it was left with just Home and the immediate layers underneath it, it would look something more like this.

 

A Few Submenu Items, In Action

 

 

This would be fairly worthless, having just one top level menu item with all of its sublevels. Changing the WebGUI navigation setting to start pulling pages from one level deeper than the root gives the desired effect.

 

Navigation Settings

 

 

First CSS Block

 

The generated code and navigation asset with the proper settings are in place, now it's time to dig into the real meat of this navigation system: the CSS. There is a lot to go over, so it will be broken up and analyzed piece by piece.

 

First Three Selectors

 

 

ul.bulletList {

list-style-type:none;

margin:0px;

padding:0px;

position:relative;

}

 

ul.bulletList * ul {

list-style-type:none;

margin:0px;

padding:0px;

position:relative;

display:inline;

}

 

ul.bulletList * li {

display:inline;

padding: 1px 1em;

list-style-type:none;

}

 

 

The first block controls some of the default properties of the main class, bulletList, as well as some of the tags that appear within it.

 

ul.bulletList

 

  • Line 1 : This is an important declaration as it removes the bullets from the menu system. You definitely don't want them showing up, so you have to explicitly remove them.

  • Line 2 - 4: These lines remove all of the spacing around the bulleted list, and position it within the flow of the document. You don't necessarily need the position:relative declaration, but it is put in for the sake of being complete.

 

ul.bulletList * ul

 

  • General : This is similar to the first selector, but it actually is making a declaration to all <ul> tags that are nested within the main one.

     

  • The “*” in that piece of code is saying that all <ul> tags within the main <ul> tag should take on these settings.

     

  • Line 1 : You'll notice this line is exactly the same as the first class, “list-style-type:none.” This is telling all submenus to remove their bullets as well.

  • Line 2 – 3 : The next two properties are relatively straightforward. Any space is being removed around menu items. This is an important step, because you need to be sure that the submenus line up properly underneath their parents, and having padding around them can make that trickier.

 

Note: Internet Explorer has a bad tendency to not remove bullets unless you completely remove the margins around <li> tags. They appear to be gone, but in reality, they are hidden in some unknown space. Be sure to remove the margins and padding whenever you are manipulating <li> elements.

 

  • Line 4 - 5 : The most important pieces in this are the last two lines, “position:relative” and “display:inline.”

  • In actuality, “position:relative” shouldn't be necessary, but oftentimes it's a very good idea to explicitly declare this when dealing with absolute positioning, which will be covered later. For now, just include it and know that it may not be critical to the functioning of this navigation, but it's a good idea to have it.

  • The last line is by far the most important: “display:inline.” This places all the submenus roughly in the right location based on their parents' locations.

 

ul.bulletList * li

 

  • Line 1 : The last selector controls all of the <li> tags within the navigation. The <li> tags are what hold each of the links, so it's pretty important to control them.

    You'll see again that “display:inline” is declared. This is what is turning the vertical bulleted list into a horizontal navigation. It is telling each of the <li> tags to appear side by side instead of giving them each their own line.

  • Line 2 : Each one of those <li> tags is given a little bit of padding with the next property, “padding: 1px 1em.” This gives a little bit of padding within the <li> tags so the links within them won't look bunched up.

  • In this case, it's giving one pixel of space above and below the content of the <li>, and it's giving a reasonable amount of padding to the left and right with the “1em” measurement.

  • Don't concern yourself too much with what exactly an EM is, just know that it is a dynamic unit of measurement, whereas “PX” is a very firm unit of measurement. You could specify anything you want here, a percentage or a pixel (PX) measurement.

  • Line 3 : Once again, “list-style-type:none” is declared just to be on the safe side. By now, you should be pretty certain no bullets will show up.

 

Submenu Appearing Beneath Its Parent

 

 

Remember how Example 1 and Example 2 appear right underneath their parent, “Your Next Step”? The display:inline property is a step in making that happen. If other pages were underneath different sections, like underneath Getting Started, this property would make it so that the positioning of that menu is reasonably close to it. You'll see a little later that its positioning still won't be perfect and you'll need to adjust it.

 

 

Second CSS Block

 

Next Set of Selectors

 

 

ul.bulletList .level1 ul {

position:absolute;

margin-left:-163px;

top:20px;

}

 

ul.bulletList .level1 ul li {

position:relative;

display:block;

height:19px;

border-bottom-width:none;

}

 

ul.bulletList * a {

width:150px;

background-color:red;

text-align:center;

border-bottom:solid white 1px;

border-right:solid white 1px;

color:white;

text-decoration:none;

float:left;

}

 

 

ul.bulletList .level1 ul

 

  • In General : This is targeting any/all of the <ul> elements that are a child of a <li> element that has a class name of “level1.” Put in plain English, it's targeting the submenus. This piece is critical, because it is controlling where the menu will be positioned. Remember, it has already been specified that the submenus should be placed inline and relative to their parents. That made them display at least fairly close to where they should be.

  • Line 1 : Technically, this submenu should appear right after “Your Next Step”, so it is part of what is called the flow of the document. Essentially it has its proper place. However, you don't want it to be in that proper place, so you need to take it out of the flow. That's what absolute does. It takes something out of the flow of the document and places it where you want it to be.

     

    Take a look at what this would look like without absolute.

 

Without position:absolute

 

 

  • Line 2 : By default, the submenus are still off, so you need to tweak it. As you can see from the example below, without giving the submenu a fairly large negative margin, it's almost completely under the wrong item!

 

Without the negative margin...

 

 

With the negative margin...

 

 

  • Line 3 : The menu has been set to appear 20 pixels from the top of its parent to make it appear slightly beneath it.

ul.bulletList .level1 ul li

 

  • In General : The next selector, “ul.bulletList .level1 ul li”, is targeting the <li> elements in the submenus. These declarations aren't nearly as important as the others covered, but it still deserves some attention.

  • Line 1 : This menu is set to appear relative to other menus. This isn't required because by default it will be positioned relatively, but it's good to be explicit.

  • Line 2 : The most critical portion of this is “display:block.” Without this, the individual links in a submenu would be skewed out of place. Have a look.

 

 

  • Line 3 : The height property is what establishes just how tall the lines will be, which conversely will also determine how much space is between them. The red background actually is controlled by the next bit of CSS, so if you change the height property and don't see the red getting any bigger, that would be why.

     

    A picture says a thousand words, so the height value has been changed to 30px from 19px, and a black border has been placed around the individual <li> elements so you can see how the links sit inside of them.

 

 

ul.bulletList * a

 

  • In General : The last bit of CSS in this block is arguably the most important, because it controls the look and some of the function of the menu. This is the “ul.bulletList * a” selector, which controls all the links within the menu. Most of the CSS here is straightforward. It's just here to direct appearances.

  • Line 1– 5 : You could easily change the “background-color” property to blue or pink instead of red, and you could change the width of the menu items from 150px to 5% or 100px. These are all simple properties to customize the look of the navigation items.

  • Line 6 – 7 : The last two lines, “border-bottom:solid white 1px” and “border-right:solid white 1px”, serve very simple functions. It may look as if the menu has spaces between the lines, but in fact that isn't the case. These properties give each of the links a white border to their right and beneath them. Without these declarations, the navigation items would look like they all run together to form a giant red blob.

 

 

  • Line 8 : This is the final piece that makes all of the navigation items line up properly. Watch what happens if this is left out.

 

 

Floating all of the links to the left moved all of the navigation items to the same line for the top level navigation items, and they help align the submenus to some degree. Of all the important lines in the CSS for this menu, this by far takes the cake. It's important to remember the nature of cascading style sheets. All of the code preceding this property helped determine how it would behave. You couldn't just put in “float:left” for a menu system like this and have it work. It's the individual pieces of the puzzle fitting together that makes the magic happen.

 

Second Example



 

A horizontal navigation has been tackled, which is arguably a tricky affair considering the floating elements, inline styles and absolute positioning. What also bears mentioning is the more typical (and easier to code) left hand navigation. The above navigation is again using the Bulleted List template, but has an entirely different set of CSS properties that make it the clean blue nav that you see.

 

The same settings as before will be kept for the navigation, so all that's really different is the CSS applied. Plus, this still takes advantage of the nested code that the Bulleted List provides. Have a look at the submenus that show up in the Your Next Step section.

 

Submenu for Blue Nav

 

 

A little fancier than the horizontal navigation, this is something that you'd see on an actual site. This illustrates that even though you're dealing with pure CSS you can still make the bulleted list navigation look clean and professional. What's more, you can even build on this navigation with a little javascript and turn it into something very dynamic. Take a look at what was done to get this far.

 

First CSS Block

 

 

ul.bulletList {

display:block;

width:200px;

list-style-type:none;

margin:0px;

padding:0px;

}

 

ul.bulletList a {

font-height:10px;

line-height:12px;

display:block;

padding:2px 1em;

text-align:left;

text-decoration:none;

}

 

 

 

ul.bulletList

 

  • Line 1 : The first order of business is to set a width for the navigation. To begin, the first property for the “ul.bulletList” selector is “display:block.” This makes it so that the <ul> element that's holding all of the links fills up a certain amount of space.

     

    Some elements, by default, are considered block-level, but it's always a good idea to define the ones you're sure you want to give a set width or height.

  • Line 2 : It makes sense that the next line would be a width, in this case “width:200px.” That gives just enough room to have a nice compact navigation without it being too small.

  • Line 3 – 5 : The next few lines should look pretty familiar by now. All of the space has been removed from around the navigation by setting the padding and margin to zero, and the bullets have been removed by using “list-style-type:none.”

 

ul.bulletList a

 

  • Line 1 – 2 : The next selector, “ul.bulletList a”, is going to give the links in the navigation a few default settings. All are given a font size of 10px, and a line height of 12px. This is basically setting up the general height of each of the navigation bars and the text within them.

  • Line 3 : You'll see that “display:block” is also specified here. Links are not considered block-level elements, so you have to turn them into one. By making them block level, a user can roll over the entire blue bar for a link and not just the text itself.

  • Line 4-6 : The last three lines are merely for appearance. Each link has been given a little bit of padding, the text has been aligned to the left and the standard underline that appears underneath a link has been removed.

     

Take a look at the Bulleted List with this first bit of CSS.

 

 

Second CSS Block

 

 

ul.bulletList .level1 a {

background-color:#254368;

margin-bottom:3px;

border-right:ridge #3A6AA5;

border-left:solid silver 2px;

color:#FFFFFF;

font-weight:bold;

font-size:11px;

letter-spacing:1px;

line-height:13px;

}

 

ul.bulletList .level1 a:hover {

background-color: #36649C;

border-right-color: #BFFFFF;

}

 

ul.bulletList .level1 a

 

The first selector, “ul.bulletList .level1 a”, gives the first level of links more properties. These are all simple properties and don't require an in-depth explanation, but the highlights will be covered.

     

  • Line 1 - 2 : The background color is set to the dusky blue, and a bit of space is given to the bottom of each link.

  • Line 3 - 4 : The right edge has been given a thick border and the type of border has been set to ridge. There are many different styles of borders that you can apply using CSS, and ridge is good to set two different colors. In this case, the color schemes were experimented with to make it look like there was a lighter blue vertical line near the right edge and a dark blue line at the far right. The other border is just a very thin gray line to the left.

  • Line 5 – 9 : The last five lines all affect the font: set the color (#ffffff or white), made it bold, set its font size to 11 pixels, put one pixel of spacing between each letter, and finally set the line height to 13 pixels. Any of this can be modified without fear of breaking the navigation.

 

ul.bulletList .level1 a:hover

 

  • Line 1 – 2: The second selector, “ul.bulletList level1 a:hover”, gives the navigation items a nice little rollover effect by changing their background color and the color of the border at the right.

 

Take a look at the navigation with these blocks of CSS added.

 



Third CSS Block

 

 

ul.bulletList .level1 ul {

list-style-type:none;

margin:0px;

padding:0px;

}

 

ul.bulletList .level2 a {

margin-left:20px;

background-color: #520000;

border-right: ridge maroon 17px;

color: #F5EA9D;

border-left: solid 2px #BF7F7F;

}

 

ul.bulletList li {

border: solid white 1px;

}

 

 

This last block of CSS primarily controls the submenus. You could just leave the menu system the way it is, but wouldn't it be nice to set the submenus just a little bit apart from the other menus?

 

ul.bulletList .level1 ul

     

  • Line 1 -3 : The first selector, “ul.bulletList .level1 ul”, is targeting the <ul> tags that hold the submenus. All it does is strip the bullets away from the <li> tags and removes all of the padding from them. It's a good place to start to make the links within them have their own look.

ul.bulletList .level2 a

     

  • Line 1 : The second selector is targeting the links only within a <li> tag that has the “.level2” class name, so basically all of the submenus. The first property assigned is important, because since all the padding, margins from the <ul> elements, and the bullets were removed, the submenus will have no indentation at all. It'd be nice to have that little bit of visual separation, so a new property will be added, “margin-left:20px.” This will add just a bit of an indent to the submenu items to make them stand apart.

  • Line 2 – 5 : The rest of the properties in this selector control the basic look of the submenu links: background color, border colors, and font color. Any of these can be modified without affecting how the menu system works.

 

ul.bulletList li

     

  • Line 1 : The last selector, “ul.bulletList li”, is targeting all of the <li> tags in the Bulleted List. It gives a thin white border to all of the elements. This gives the navigation the appropriate amount of space between elements. It is also necessary for Internet Explorer, otherwise it will put extremely large margins around the top and bottom of each of the <li> tags.

 

So that was the last piece! To refresh your memory, here's what the final product looks like.

 

Final Product

 



Adding in DHTML

 

Earlier it was stated that one of the greatest advantages to using the Bulleted List navigation is that it opens up a lot of possibilities when it comes to dynamic navigation. This is because of the nested nature of the XHTML, which was covered in the beginning of the chapter.

 

 

Because submenus are descendants, or children, of another tag in the navigation, they can all be accessed at the same time. This is made possible with Javascript, and the Document Object Model (DOM) that is the standard for dynamically accessing content in XHTML.

 

What is going to be accomplished with DHTML in this case is to take the second example and make it so that when someone clicks on one of the main levels of navigation it opens up the submenus. If they click on it again, it closes it.

 

Here's an example.

 

 


Click on the first item in the menu, Getting Started, to see what happens.

 

 

Just like that, without the page reloading, the submenu appears. Not only that, did you realize that clicking on “Getting Started” didn't actually take you anywhere? It just acted as a button to open the expanded menu. Through Javascript, a new menu item was added to the top of the submenu list, “Go to Getting Started »” that acts as a link to go to that page. All of the other links act normally because they don't have any subpages, but if they did the Javascript would do the same thing for them.

 

The great thing about this is that, just like the CSS, the XHTML and template has not been altered in any way. The default template gives enough information for the Javascript to transform the static navigation into a dynamic one.

 

A Look at the Code - initList

 

There is surprisingly very little code that makes this all happen, but if you aren't familiar with Javascript or the DOM, it can be a little confusing. The code will be covered line by line and explained as simply as possible. First, a Javascript function needs to be created.

 

initList

 

 

function initList() {

 

}

 

 

Inside the curly braces will be all of the basic code to initially get started. This function will need to be called later to actually have it do anything, but for now things are just getting set up. How to call this function will be covered at the very end of this section.

 

The function, initList, is empty, so put in the first line of code.

 

temp Variable

 

 

function initList() {

var temp = document.getElementByTagName(“UL”);

}

 

 

The very first line examines the entire XHTML document, and looks for any instances of the <ul> tag being used. Bulleted List uses a <ul> tag to hold the navigation, so this piece of code will be sure to make a note of it. Once it grabs all of the <ul>'s in the document, it puts the into the variable called “temp.” But what does that do? And, if there are other <ul>'s on the page, how does the script know which ones it should do something to? The next line takes care of that.

 

for Loop

 

 

function initList() {

var temp = document.getElementByTagName(“UL”);

 

for(i=0;i<temp.length;i++) {

 

}

}

 

 

This next piece of code gives the ability to cycle through all of the <ul> tags stored in the “temp” variable. In plain English, it is saying the following:

 

For every <ul> stored in the temp variable, perform the following action.

 

For the time being, there isn't actually any action for the script to perform. The next line of code will fix that.

 

First if Statement

 

 

function initList() {

var temp = document.getElementByTagName(“UL”);

 

for(i=0;i<temp.length;i++) {

if(temp[i].childNodes[1].className == "level2") {

 

}

}

}

 

 

An if statement has been added here that is now going to help distinguish between <ul> tags on the page that the script should ignore, and <ul> tags that are specific to the navigation. Here's the English translation of what this if statement is saying:

 

If the <ul> tab has any <li> tags within it with the class name of "level2," perform the following actions.

 

The conditional statements are in place: all the <ul> tags are being grabbed on the page, each one of them is being cycled through, and then tested to see if any of the <li> tags within them have a class name of level2. Now something has to be done with this information.

 

Note: Before going on, it's a good idea to talk about the concept of child nodes in Javascript. A child node in this context is anything that is nested within something else.

For example, the <a> tag that appears between the <li> tags is a child of that tag. Similarly, the <li> tag is a child of the <ul> tag. this is an important concept to understand as the rest of the script depends on the parent-child relationship.

 

holdMe Variable

 

 

function initList() {

var temp = document.getElementByTagName(“UL”);

 

for(i=0;i<temp.length;i++) {

if(temp[i].childNodes[1].className == "level2") {

var holdMe = "<a href='" +

temp[i].parentNode.firstChild.href +

"'>Go to " +

temp[i].parentNode.firstChild.innerHTML +

" &raquo; </a>";

}

}

}

 

 

This piece probably seems a little daunting compared to the other simple statements, but it only looks complicated. If you recall, using this script changes a top level link to no longer take you to its page, but instead to open one of the submenus. Hang onto this URL, and a little extra XHTML needs to be added to use later. Here's the translation:

 

Create a variable called holdMe. Next, grab the URL of the section that has the submenu, then get the text for that link. In both cases, that would be the link to the Getting Started section, and the actual words "Getting Started." Then, pop in some extra words to make this stand out. Makethe link say, "Go to Getting Started>>."

 

Nothing has actually been done with this information yet, it is just being stored in a variable, but in just a little bit it will be used.

 

Wiping Out the Old Link

 

 

function initList() {

var temp = document.getElementByTagName(“UL”);

 

for(i=0;i<temp.length;i++) {

if(temp[i].childNodes[1].className == "level2") {

var holdMe = "<a href='" +

temp[i].parentNode.firstChild.href +

"'>Go to " +

temp[i].parentNode.firstChild.innerHTML +

" &raquo; </a>";

 

temp[i].parentNode.firstChild.href = "#";

}

}

}

 

 

This is probably one of the simplest lines in the script, and it directly relates to the line preceding it. The URL of the level1 link that opens the subnav has been successfully stored, but now you need to get rid of that link. To do this, get rid of the URL it had before, and replace it with the character #.

 

The next line in the script will be covered briefly. There is quite a bit more to it, but for now it will just be introduced, and covered in more detail later.

 

Brief Introduction of swapVis

 

 

function initList() {

var temp = document.getElementByTagName(“UL”);

 

for(i=0;i<temp.length;i++) {

if(temp[i].childNodes[1].className == "level2") {

var holdMe = "<a href='" +

temp[i].parentNode.firstChild.href +

"'>Go to " +

temp[i].parentNode.firstChild.innerHTML +

" &raquo; </a>";

 

temp[i].parentNode.firstChild.href = "#";

temp[i].parentNode.firstChild.removed = swapVis;

}

}

}

 

 

The URL from the first line was copied, and the link from that URL was removed in the second line. Now an action needs to be assigned to that link. At the moment, if someone clicked on that level1 link, nothing would happen. This line gives it an action. Here's the translation:

 

When someone clicks on this link, run the Javascript function called, "swapVis."

 

This function hasn't actually been created yet, so for now it's enough to know that this line is what will give the menu the ability to hide and show submenus.

 

All the points that deal with the actual link have been covered, now actually putting a new menu item into the page will be covered. Now that you know how some of this works, it bears repeating the earlier screenshot so that some of this starts to come together in your mind.

 

Notice the “Go to Getting Started” link?



 

A page called “Go to Getting Started” was never actually created. A whole new <li> element is being inserted into the navigation via this javascript. The next part of the code is the first piece to that puzzle.

 

createElement(“LI”);

 

 

function initList() {

var temp = document.getElementByTagName(“UL”);

 

for(i=0;i<temp.length;i++) {

if(temp[i].childNodes[1].className == "level2") {

var holdMe = "<a href='" +

temp[i].parentNode.firstChild.href +

"'>Go to " +

temp[i].parentNode.firstChild.innerHTML +

" &raquo; </a>";

 

temp[i].parentNode.firstChild.href = "#";

temp[i].parentNode.firstChild.removed = swapVis;

 

var createLi = document.createElement("LI");

}

}

}

 

 

A variable called createLi has been created. This variable is actually going to contain a brand new <li> tag that was just created. The tricky part is, it hasn't actually been put anywhere on the page: it has no parent, and no child. For now, it's completely empty! The best way to think of this little guy is as a hungry orphan, all alone with nothing inside its growling stomach. He needs to be given a good meal.

 

InnerHTML

 

 

function initList() {

var temp = document.getElementByTagName(“UL”);

 

for(i=0;i<temp.length;i++) {

if(temp[i].childNodes[1].className == "level2") {

var holdMe = "<a href='" +

temp[i].parentNode.firstChild.href +

"'>Go to " +

temp[i].parentNode.firstChild.innerHTML +

" &raquo; </a>";

 

temp[i].parentNode.firstChild.href = "#";

temp[i].parentNode.firstChild.removed = swapVis;

 

var createLi = document.createElement("LI");

createLi.innerHTML = holdMe;

}

}

}

 

 

With this next line, the “holdMe” variable is being put inside the “createLi” variable that contains the orphan. “holdMe” has the entire link for the new menu item, the <a> tag, the URL and the text the user will click on.

 

“createLi.innerHTML” is telling the script to put all of that between the <li></li> tags of the poor little orphan created in the previous step. So, the orphan is fed, but the poor little guy still doesn't have a parent, and he doesn't have a name!

 

className

 

 

function initList() {

var temp = document.getElementByTagName(“UL”);

 

for(i=0;i<temp.length;i++) {

if(temp[i].childNodes[1].className == "level2") {

var holdMe = "<a href='" +

temp[i].parentNode.firstChild.href +

"'>Go to " +

temp[i].parentNode.firstChild.innerHTML +

" &raquo; </a>";

 

temp[i].parentNode.firstChild.href = "#";

temp[i].parentNode.firstChild.removed = swapVis;

 

var createLi = document.createElement("LI");

createLi.innerHTML = holdMe;

createLi.className = "level2"

}

}

}

 

 

This is a very simple step. The “level2” class is being assigned that was created for all of the submenu items to this <li> tag. If it wasn't, it would look like a top level menu item (blue instead of maroon). The little orphan has a full stomach and name now...it's about time he had a parent.

 

Note: Although an orphan is being metaphorically spoken of, the term orphan is actually a valid term in the DOM. It refers to any element that does not belong to a "parent."

 

Giving the Orphan a Parent

 

function initList() {

var temp = document.getElementByTagName(“UL”);

 

for(i=0;i<temp.length;i++) {

if(temp[i].childNodes[1].className == "level2") {

var holdMe = "<a href='" +

temp[i].parentNode.firstChild.href +

"'>Go to " +

temp[i].parentNode.firstChild.innerHTML +

" &raquo; </a>";

 

temp[i].parentNode.firstChild.href = "#";

temp[i].parentNode.firstChild.removed = swapVis;

 

var createLi = document.createElement("LI");

createLi.innerHTML = holdMe;

createLi.className = "level2"

 

temp[i].insertBefore(createLi,temp[i].firstChild);

}

}

}

 

 

This line is a little more complex than the last couple, and it really requires you to understand the parent/child relationship. A built-in function in Javascript called “insertBefore” is being used. This function takes an object that you've created and inserts it before a specified item in the DOM. Basically, what is being said here is:

 

Take the new <li> element that was created and put it at the top of the submenu list.

 

You'll see that “createLi” is the first variable passed to the insertBefore function. This is telling the script what needs to be inserted. The next piece, temp[i].firstChild, is where this new <li> should be inserted, and, more specifically, right before it. “temp[i].firstChild” is actually referring to the very first <li> item in the submenu, and since you obviously want this new <li> to be the first child, or more specifically the first navigation item in the list, it makes sense to insert it here.

 

There's only one line left in the first function, and although simple, without it none of this would make any difference.

 

Hiding the Submenus

 

 

function initList() {

var temp = document.getElementByTagName(“UL”);

 

for(i=0;i<temp.length;i++) {

if(temp[i].childNodes[1].className == "level2") {

var holdMe = "<a href='" +

temp[i].parentNode.firstChild.href +

"'>Go to " +

temp[i].parentNode.firstChild.innerHTML +

" &raquo; </a>";

 

temp[i].parentNode.firstChild.href = "#";

temp[i].parentNode.firstChild.removed = swapVis;

 

var createLi = document.createElement("LI");

createLi.innerHTML = holdMe;

createLi.className = "level2"

 

temp[i].insertBefore(createLi,temp[i].firstChild);

temp[i].style.display = "none";

}

}

}

 

 

This last line hides the <ul> submenu. You can actually set this in your CSS, which isn't a bad idea. The reason it is being done here is to illustrate that you can completely control this menu via Javascript.

 

A Look at the Code – swapVis

 

Remember earlier that there was a line to come back to?

 

Remember swapVis?

 

 

function initList() {

var temp = document.getElementByTagName(“UL”);

 

for(i=0;i<temp.length;i++) {

if(temp[i].childNodes[1].className == "level2") {

var holdMe = "<a href='" +

temp[i].parentNode.firstChild.href +

"'>Go to " +

temp[i].parentNode.firstChild.innerHTML +

" &raquo; </a>";

 

temp[i].parentNode.firstChild.href = "#";

temp[i].parentNode.firstChild.removed = swapVis;

 

var createLi = document.createElement("LI");

createLi.innerHTML = holdMe;

createLi.className = "level2"

 

temp[i].insertBefore(createLi,temp[i].firstChild);

temp[i].style.display = "none";

}

}

}

 

 

Now it's time to tackle it. This piece of the Javascript is assigning a whole different function to the level1 navigation item so that when someone clicks on the link it opens the submenu. Just like initVis, start by creating a new function.

 

Note: Although you call function in Javascript like this - swapVis() - it's important not to use parentheses when assigning this function to removed.

 

Creating swapVis

 

 

function swapVis() {

 

}

 

Simple enough, you'll see it's just like initVis, only it has a different name. You can name these functions whatever you want, but remember that each function has to have a unique name.

 

Temp2

 

 

function swapVis() {

var temp2 = this.parentNode.lastChild.style.display;

}

 

 

Here, the ever important object name “this” is being used. “this” is a catch-all object that refers to whatever you are currently manipulating. In this case, the <a> tag that was used earlier is being referred to; however, you don't want to manipulate that tag. You want to manipulate the <ul> that is the submenu of the <li> that the link belongs to.

 

Take the <a> tag, find its parent, which is the <li> level1 object, then get its last child, which is the <ul> submenu.

 

The parent/child relationships in a document can be both straightforward and at the same time confusing. It can be even worse when you're trying to make a script work between Internet Explorer and more standard-compliant browsers.

 

Note: If you ever want to play around with these scripts, remember to use the alert(); Javascript function. It can return values to you so you can more easily figure out what's happening.

 

Completed swapVis Function

 

 

function swapVis() {

var temp2 = this.parentNode.lastChild.style.display;

 

if (temp2 == "none")
this.parentNode.lastChild.style.display = "block";
else
this.parentNode.lastChild.style.display = "none";

}

 

 

This skips ahead because these four lines are directly related to each other. There is a simple if statement here that is checking to see if the submenu is currently set to be hidden, or rather its display property is set to “none.” If it is, then it changes its display property to “block”, which makes it visible in the navigation, but if it is visible, then it does the opposite and changes its display to “none”, thus hiding it.

 

The simplest way to think about it is a toggle. If the submenu is visible, hide it. If it's hidden, show it. This small function is what controls whether or not a submenu is displayed.

 

After going over everything line by line and analyzing two Javascript functions, you're finally ready to use this script. There's one final step you need to take for this to happen, because although you've created these functions, they won't do anything unless you run them. Be sure that you put your script in the head of your document, open up the WebGUI Style Template that you plan to use this script on, and edit the body tag like so:

 

Running initList

 

 

<html>

<head>

<tmpl_var head.tags>

<title>^c; - ^Page(title);</title>

</head>

<body removed="initList()">

 

...

 

</body>

</html>

 

 

Once the content of the page is fully loaded, the “removed” Javascript function will kick in and it will run “initList.” Once that happens, you should see any submenus briefly pop up on the screen and then be hidden because of the script.

 

Remember, you may want to edit “level2” in your CSS to “display:none” right away. That way, the menus won't pop up at all. Ultimately, it's your decision to make, but it will definitely look more professional that way.

 

Complete Javascript

 

 

function initList() {

var temp = document.getElementByTagName(“UL”);

 

for(i=0;i<temp.length;i++) {

if(temp[i].childNodes[1].className == "level2") {

var holdMe = "<a href='" +

temp[i].parentNode.firstChild.href +

"'>Go to " +

temp[i].parentNode.firstChild.innerHTML +

" &raquo; </a>";

 

temp[i].parentNode.firstChild.href = "#";

temp[i].parentNode.firstChild.removed = swapVis;

 

var createLi = document.createElement("LI");

createLi.innerHTML = holdMe;

createLi.className = "level2"

 

temp[i].insertBefore(createLi,temp[i].firstChild);

temp[i].style.display = "none";

}

}

}

 

 

function swapVis() {

var temp2 = this.parentNode.lastChild.style.display;

 

if (temp2 == "none")
this.parentNode.lastChild.style.display = "block";
else
this.parentNode.lastChild.style.display = "none";

}

 

 

Conclusion

 

As you can see, the options with Bulleted List can be staggering. It all just depends how far you want to take it. Aside from the examples shown here, there are many more you can follow. Some are far more complex, especially when you start to work in more DHTML. Hopefully, this puts you on the path to see just how far you can go with what WebGUI offers, and what a little CSS and Javascript can do with it.

Keywords: bullet list bullet nav CSS javascript navigation Templates XHTML

Search | Most Popular | Recent Changes | Wiki Home
© 2018 Plain Black Corporation | All Rights Reserved