plainblack.com
Username Password
search
Bookmark and Share

Customizing Indent Nav

WebGUI comes with a number of pre-installed navigation templates. All of them are configurable to suit your own purposes by modifying their templates. Indent Nav, in particular, gives you a great amount of freedom.

 

By using only CSS, you don't have to deal with modifying template variables, but you can still radically change the way the navigation system looks.

 

Indent Nav's Default Look & XHTML

 

 

Before examining some of the creative things you can do with Indent Nav, you need to take a look at what it looks like naked, so to speak. Don't worry, it's not shy.

 

As you can see, by itself it doesn't appear to be anything special. That's because WebGUI just provides you with the tools to let your creative impulses go free. With the basic CSS included with the template, all that happens is descendant pages are slightly indented. However, that's only its default function. As you'll see, you can really have quite a bit of fun using those tools.

 

It's important to take a look at the actual code that's being drawn for this example, just so that you can see the action behind the scenes.

 

Note: It is important to remember that Indent Nav is not a nested navigation. It may look like one, but it actually just uses creative CSS to give it that appearance. If you absolutely need a nested navigation, refer to the chapter on Bulleted Lists.

 

XHTML

 

 

<div class="mainNav">
<div class="level1">
<a href="/getting_started">Getting Started</a>
</div>

<div class="level1">
<a href="/your_next_step">Your Next Step</a>
</div>

<div class="level2">
<a href="/docs">Get Documentation</a>

</div>

<div class="level2">
<a href="/features">Get Features</a>
</div>

<div class="level1">
<a href="/the_latest_news">The Latest News</a>
</div>

<div class="level1">

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

<div class="level1">
<a href="/site_map">Site Map</a>
</div>
</div>

 

 

 

When looking at the end result, and the XHTML that creates it, it's very straightforward. A <div> holds the entire navigation system and has a class associated with it, “mainNav.” This helps target and control the overall look of the navigation, and separates it from the rest of the page.

 

Each link in the navigation has its own div wrapped around it, and just like the div that wraps around the entire navigation each one has a class associated with it. The template dynamically draws these classes based on its relative depth in the asset manager. For example, if you've set your navigation to start pulling pages three levels deep in the asset manager, this template will interpret the first set of pages as only being one level deep, because you've told it where to start: its relative.

 

As you can see here, there are two classes, level1 and level2. This is because in this example the navigation is set to show pages two levels deep. If the navigation was set to display pages up to 5 levels deep, the template would dynamically draw classes based on their depths. So theoretically, you could have a navigation with classes ranging from level1 up to level5 or even beyond.

 

Default CSS

 

 

.mainNav {
}

.mainNav a {
}

a.navOn {
}

a.anAncestor {
}

div.level1 a {
margin-left:15px;
display:block;
}
div.level2 a {
margin-left:30px;
display:block;
}
div.level3 a {
margin-left:45px;
display:block;
}
div.level4 a {
margin-left:60px;
display:block;
}

 

 

The CSS is very simple. As a matter of fact, the first several classes are empty. This is by design. The class declarations are there strictly so that you can go in later and add in your own CSS properties. The only selectors that are actually used in this instance are the following lines:

 

 

...

div.level1 a {
margin-left:15px;
display:block;
}
div.level2 a {
margin-left:30px;
display:block;
}

...

 

 

Very simply, these two classes are what “indents” the nav, so links that have the class level1 are moved over from the left by 15 pixels, and links that have the class level2 are moved 30 pixels from the left.

 

Now, take a look at what is possible with Indent Nav using a little more robust CSS.

 

Indent Nav with Fancier CSS – Example 1

 

 

As you can see, the navigation is the same in principle, sub-levels are indented, but this time around it actually has more of a “look” to it. All of that is accomplished with just CSS, so no alterations needed to be made to the html portion of the template. How is this accomplished? Examine the CSS used for this example.

 

Fancy Indent Nav CSS

 

 

.mainNav {
width:200px;
margin:30px 0px 300px 30px;
}

.mainNav a {
font-family:arial;
font-size:11px;
text-decoration:none;
}

div.level1 a {
display:block;
background-color:black;
margin-bottom:5px;
color:white;
font-weight:bold;
padding:2px 0px 2px 15px;
border-bottom:solid orange 2px;
-moz-border-radius-topRight:8px;
}

div.level2 a {
margin-left:15px;
display:block;
margin-bottom:5px;
background-color:gray;
padding:2px 2px 2px 13px;
color:white;
border-left:solid black 2px;
}

 

 

There are some pretty substantial changes to two of the CSS classes, div.level1 a and div.level2 a. The new properties here are what give the two different levels their new looks. The properties for both declarations are straightforward. Each has a little extra padding around them, background colors (black and gray respectively) and a slight border.

 

One property you may not have seen before is -moz-border-radius-topRight. This is a property that isn't supported by all browsers, particularly Internet Explorer, but it gives the slight curve to the top-right edge of the link.

 

Look at a navigation that is quite a bit different than the vertical layouts worked on so far.

 

Note:-moz-border-radius-topRight is actually a more specific property. You could also specify -moz-border-radius and it will automatically give rounded edges to all four corners.

 

Horizontal Indent Nav

 

 

That's right, just by using some CSS the menu is turned into a horizontal layout instead!

 

There is a caveat to using the indent nav template in this manner. You can really only effectively display one level. However, the point here is to give you some ideas as to ways that you can creatively implement a single template.

 

Horizontal Indent Nav CSS

 

 

.mainNav a {
font-family:verdana;
font-size:10px;
text-decoration:none;
letter-spacing:1px;
}

div.level1 {
float:left;
display:inline;
border-bottom:solid black 1px;
margin-right:1px;
}

div.level1 a {
display:block;
width:150px;
background: #003377 url(^FileUrl(indentnav2_bg.jpg);) repeat-y;
color:white;
text-align:center;
border:solid black 1px;
border-bottom:groove navy 3px;
padding:1px 0px;
}

 

 

 

Yes, believe it or not, only the selectors are needed to turn the vertical navigation into a horizontal one.

 

  • Selector 1 - “mainNav a” : Gives all the links their general look, the font size, the font face and it removes the underlines from them. It also gives a slight amount of space between each letter.

  • Selector 2 – div.level1 : This is what makes the navigation horizontal as opposed to vertical. The “float:left” and “display:inline” comments make each of the <div> tags that hold the links sit next to one another. They have also been given a slight underline.

  • Selector 3 – div.level1 a : The last selector gives most of the look and feel to the navigation.

     

  • The display and the width properties allow you to set a standard width for each of the links, and allow the user to click on the blue space and not just the word for the link to work.

  • The background property gives the very slight gradient visible in the background of each link.

  • The color and text-align properties make the links white, and centers the text within them.

  • Finally, there are some border properties. There are actually two here, one that establishes a border on all 4 sides of the link, and then another property that has a different border for the bottom.

 

Indent Nav – anAncestor, navOn

 

In the last example, two of the other pre-installed classes in Indent Nav, anAncestor and navOn, will be covered. These two classes are only drawn in two cases. anAncestor appears if a page in the page tree is an ancestor of whatever page you're currently viewing. navOn only appears for the page that you are currently viewing. Take a look at the HTML that is generated in this example.

 

 

XHTML

 

 

<div class="mainNav">
<div class="level1">
<a href="/getting_started">Getting Started</a>
</div>

<div class="level1">
<a class="anAncestor"
href="/your_next_step">Your Next Step</a>
</div>

<div class="level2">
<a class=”navOn” href="/docs">Get Documentation</a>
</div>

<div class="level2">
<a href="/features">Get Features</a>
</div>

<div class="level1">
<a href="/the_latest_news">The Latest News</a>
</div>

<div class="level1">

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

<div class="level1">
<a href="/site_map">Site Map</a>
</div>
</div>

 

 

 

The two important pieces in the XHTML are highlighted in red, where the classes anAncestor and navOn are being drawn.

 

“navOn” was drawn because the page currently viewed is “Get Documentation.” “anAncestor” was drawn because in the asset manager, “Get Documentation” is a descendant of “Your Next Step”, hence “Your Next Step” is “Get Documentation”'s ancestor.

 

With this html in mind, you can see how these new generated classes were used in another example of what you can do with CSS and Indent Nav.

 

Third Example

 

 

In this case, the CSS got a little fancy. Since this is really just trying to show you some of the possibilities, you can disregard some of the more experimental CSS being used. However, it's fun to see just what you can do if you're willing to push the boundaries slightly. This navigation will work just fine without these additions, but it will lose a little bit of the “oooh” factor.

 

Here's the CSS behind it.

 

CSS – Block 1

 

 

 

.mainNav {
font-family: Times New Roman;
width:220px;
}

.maniNav a {
text-decoration:none;
color:maroon;
}

a.navOn {
}

a.navOn:after {
content: “ You are here!”;
color:red;
font-size:9px;
}

div.level1 a {
margin-left:15px;
display:block;
border-bottom:double tan 3px;
padding-left:5px;
margin-top:10px;
}

a.anAncestor {
font-weight:bold;
font-variant:small-caps;
color:orange;
}

 

 

 

  • Selector 1 - .mainNav : Basic properties set to make the navigation system 220 pixels wide, and the font to Times New Roman.

  • Selector 2 - .mainNav a : Targeting all of the links within the navigation, they are all being set to have no underline and the default color maroon.

  • Selector 3 – a.navOn : Currently empty. This would normally allow you to specify properties for any link that has the “navOn” class.

  • Selector 4 – a.navOn:after : Although you haven't defined any changes directly to the link for the current page, you're applying styles to what comes immediately after it. So in this case, the words, “ You are here!” are drawn right after a link that has the navOn class.

     

  • Further, you're making that text red, and making it 9 pixels tall.

  • And remember, no new HTML was created in the template to make this happen. It is just using CSS.

     

  • Selector 5 – div.level1 a : This targets links that belong to any div tag with the “level1” class. A left margin of 15 pixels is added, making the entire area a clickable link, not just the text, adding a double-lined tan border to the bottom. Last, a small amount of padding is added to the left, as well as a margin at the top.

  • Selector 6 – a.anAncestor : This is targeting any link that has the “anAncestor” class. If it does, it is bold, orange and written in small caps.

 

Now, take a look at the last section of CSS.

 

 

CSS – Block 2

 

 

 

div.level2 a {
margin-left:30px;
display:block;
background-color:#F0F0F0;
font-size:10px;
}
div.level2 a:before {
content: “- “;
color:black;
}

 

 

 

  • Selector 1 : div.level2 a : The neat thing about the properties for the first selector is that they give the illusion that the submenu items are all connected.

     

  • You'll notice that “Get Started” and “Get Documentation” both have a light gray background, and that they both seem to be together on top of it. In fact, each link has its own gray background, but there's no space between them so it just looks like one larger gray field.

  • This is a trick often implemented with Indent Nav, because frankly it doesn't matter that they aren't actually grouped together. It looks that way to the user and that's what's important.

     

  • Selector 2 : div.level2 a:before : Just like :after, :before can add text to whatever item it is being used on. In this case, it's adding a little dash preceding all of the links that have the level2 class.

     

  • If you look at the example, you'll notice that both of those sublinks have a dash in front of them. Again, nothing was modified in the template to put in that little extra “oomph”, it was all done using CSS.

 

Note: Pseudo classes help furhter define actions to standard CSS. The most commonly used pseudo class is "hover," which is often used to make links change color when someone mouses over them.

 

Conclusion

 

There are many possibilities with Indent Nav. It's a very basic template, but the dynamic classes it generates give you an extraordinary amount of control with CSS. Even though in the final example used some non-standard CSS for some of the template, the navigation will still work perfectly fine for everyone. It's just that those who have browsers that support it can have a little extra flair.

 

You'll find that there are many instances in WebGUI where blank classes have been put in, such as those that allow you to modify the look of templates. Indent Nav is just an example of one that is completely designed with that in mind, but keep your eyes open for other instances.

 

Note: Check out the standard login boxes that are drawn by WebGUI with the ^L; macro. There are several placeholder classes used that let you customize them.

Keywords: CSS indent nav navigation Templates XHTML

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