Free Web Template Tutor

Navigation

The navigation or menu bar is basically the same on all of the templates. It is made up of a series of nested unordered lists as shown in the code below.

If you have any experience at all in HTML coding it should be no problem to modify the links for your website. If you need a short tutorial, study lists and anchor tags in our HTML Tutorial

The navigation bar includes some drop down features. This is one section of the web page that you won't be able to modify using a WYSIWYG editor. You can edit the existing links but adding and removing links with a WYSIWYG editor will create problems.



<div class="art-nav">
<div class="l"></div>
<div class="r"></div>
<div class="art-nav-center">
<ul class="art-menu">
<li><a href="#" class=" active"><span class="l"></span><span class="r"></span><span class="t">Home</span></a></li>
<li><a href="#"><span class="l"></span><span class="r"></span><span class="t">About</span></a>
<ul>
<li><a href="#">Photos</a></li>
<li><a href="#">Press</a></li>
</ul>
</li>
<li><a href="#"><span class="l"></span><span class="r"></span><span class="t">Services</span></a></li>
<li><a href="#"><span class="l"></span><span class="r"></span><span class="t">Solutions</span></a>
<ul>
<li><a href="#">Consulting</a>
<ul>
<li><a href="#">Lorem ipsum</a> </li>
<li><a href="#">Dolor sit amet</a> </li>
<li><a href="#">Consectetuer</a> </li>
</ul> </li> <li><a href="#">Training</a></li>
<li><a href="#">Analysis</a></li>
</ul>
</li>
<li><a href="#"><span class="l"></span><span class="r"></span><span class="t">Contact</span></a></li>
</ul>
</div>
</div>

Active Class

When you look at the original template in a browser, you'll notice that the Home link looks different than the other links. This is because it includes the active class designation in its code.

When you create other pages, you will move the active class code from the home link to the appropriate link for the page. You should only do this on the top tier links. We show adding it to the services link below.

<li><a href="#" class=" active"><span class="l"></span><span class="r"></span><span class="t">Services</span></a></li>

Top Tier Links

Notice that the top tier links include extra span tags. If you create additional top tier links, you must include them.

<span class="l"></span><span class="r"></span><span class="t">

Two Tier Drop down

The About link is an example of a 2 tier drop down. Follow the same pattern for creating new 2 tier drop down links.

<li><a href="#"><span class="l"></span><span class="r"></span><span class="t">About</span></a>
<ul>
<li><a href="#">Photos</a></li>
<li><a href="#">Press</a></li>
</ul>
</li>

Three Tier Drop Down

The Solutions-Consulting link is an example of a 3 tier drop down. Follow the pattern exactly when creating new 3 tier drop down links.

<li><a href="#"><span class="l"></span><span class="r"></span><span class="t">Solutions</span></a>
<ul>
<li><a href="#">Consulting</a>
<ul>
<li><a href="#">Lorem ipsum</a> </li>
<li><a href="#">Dolor sit amet</a> </li>
<li><a href="#">Consectetuer</a> </li>
</ul>
</li>
<li><a href="#">Training</a></li>
<li><a href="#">Analysis</a></li>
</ul>
</li>