Part 3: Navigation

Unless you’re using CMS, Artisteer’s HTML template has default content and navigation that must edited or replaced. Though the navigation itself is simply an HTML unordered list, there are drop-down sub-menus that include child menus—and that means more nested lists. I’ll lay out the navigation structure and show you how to edit each type.

First, here’s a typical navigation/menu. I’ll show a ‘Home’ menu item, a drop-down sub-menu, ‘Solutions’, and its child menu.

So what’s going on here? A lot....

1. Set the navigation bar with all of its styles—size, background color and images.
2. Set the active, passive, hovered menu item tabs—size, background color, images, borders.
3. Set the active, passive, hovered sub-menu and child menu items—size, background color, images, borders.

Okay...it looks dense; we have a parent list, the ‘art-menu’, with two nested lists for the sub-menu and the sub-menu’s child menu, respectively.

Tip:
Just remember the following within the parent list, ‘art-menu’:

1. A menu item without a drop-down sub-menu is simply a list item of the parent, so close the list item immediately.
2. A menu item with a drop-down sub-menu is a nested unordered list contained within the parent list, the ‘art-menu’. Close the nested unordered list first, then the parent list item. For example, refer to the following structure:
   
   
   <ul class="art-menu"> <!-- Start About Menu Item--> <li><a href="#">About</span></a> <!-- Start About Sub-menu --> <ul> <li><a href="#">Photos</a></li> <li><a href="#">Press</a></li> </ul> <!-- Finish About Sub-menu --> <!-- Finish About Menu Item --> </li> </ul>
   
   
3. A menu item with a drop-down sub-menu and a child menu is a bit trickier, but not really a problem if you follow this rule:
   

   Just as a menu item with a drop-down sub-menu is a nested unordered list contained within the parent list, the ‘art-menu’, a child menu is a nested unordered list contained within the list item of the drop-down sub-menu. So, in this case, we will not close the list item of the drop-down sub-menu until after we close the unordered list for the child menu.

   That’s a mouthful, so let’s look at the structure:

   
   
   <ul class="art-menu"> <!-- Start Solutions Menu Item--> <li><a href="#">Solutions</span></a> <!-- Start Solutions Sub-menu --> <ul> <li><a href="#">Consulting</a> <!-- /** Start Consulting Child-menu **\ --> <ul> <li><a href="#">Child-menu 1</a> </li> <li><a href="#">Child-menu 2</a> </li> <li><a href="#">Child-menu 3</a> </li> </ul> <!-- /** Finish Consulting Child-menu **\ --> </li> <!-- Training --> <li><a href="#">Training</a></li> <!-- Analysis --> <li><a href="#">Analysis</a></li> <!-- Finish Solutions Sub-menu --> </ul> <!-- Finish Solutions Menu item --> </li> </ul>
   
   

We’ll now move into the main content, followed by the sidebar, footer, and page footer.

ShareClose