Navigation

One of the most common modifications to the template or page an agency will need to make is to modify the tabs. It is pretty simple to add a tab or make a tab display as currently highlighted. If you want to change tab colors to match a color scheme you have chosen there are instruction below for that as well.

What You Need to Know

The tabs are aligned at the top of the page under the state logo and agency branding and above the main content area. They utilize a combination of XHTML, CSS, images ,and JavaScript. It is necessary to configure all these elements properly in order to achieve the desired presentation.

  • The XHTML is a set of nested, unordered lists no more than two levels deep with list items that have linked text. An additional empty span tag is necessary for the first level list items to present as tabs with rounded corners and space between them.
  • The CSS assigns background images, colors, and spacing for the XHTML elements.
  • The images are the rounded corners of the tabs.
  • The JavaScript is used to display the sub-navigation under the tabs when the user hovers over the tabs.

Changing the Tab List Items and Current Tab

Configure the UL that drives the tabs

The most important feature of the tabbed interface is the fact that the content that makes up the tabs is an XHTML unordered list. This is a more accessible way of representing the navigation choices than a series of block level elements or a table structure. Some of the <li>s in the list may contain a <ul> set of its own. This becomes the sub-navigation which is presented in the bar below the tabs. Aside from being a standard <ul>, there is an important aspect of this tab list.

  • The main <ul> must have an ID stating that this is the tab navigation list <ul id=”nav_list”>.

Example List using Mega Drop-Down Its Source

Home

Web Development

1. Planning a Website

Lorem ipsum dolor sit amet consectetur adipisicing

2. Designing a Website

Lorem ipsum dolor sit amet consectetur adipisicing

3. Building a Website

Lorem ipsum dolor sit amet consectetur adipisicing

4. Maintaining a Website

Lorem ipsum dolor sit amet consectetur adipisicing

Its Source

<ul id=”nav_list”>

<li><a href=”/Web_Development/” class=”nav_levl1_link”>Web Development</a>

<div class=”nav_panel”>

<ul>

<li><a href=”/Web_Development/Planning_a_Website.asp”>1. Plan</a>

<div class=”nav_p_description”>Lorem ipsum dolor sit amet consectetur adipisicing</div></li>

<li><a href=”/Web_Development/Designing_a_Website/default.asp”>2. Design</a>

<div class=”nav_p_description”>Lorem ipsum dolor sit amet consectetur adipisicing</div></li>

<li><a href=”/Web_Development/Building_a_Website.asp”>3. Build</a>

<div class=”nav_p_description”>Lorem ipsum dolor sit amet consectetur adipisicing</div></li>

<li><a href=”/Web_Development/Maintaining_a_Website.asp”>4. Maintain</a>

</ul>

</div>

</li>

</ul>

TO ADD A TAB

  • Create a new <li>on the first level list at the point in the list where you want the tab to display. Be sure to include the closing attributes to ensure you are creating proper XHTML.
  • Add the text you want displayed in the tab. Be sure to use best practices for naming navigation labels.
  • Add the necessary stylesheets.
  • Save and test.

TO CHANGE A TAB

Modify the tab text of the existing li. <li><a href=”/my/url/” class=”nav_level1_link”>Tab Text</a>.
Change the URL in the anchor tag. <li><a href=”/change/me/”… </li>.
Save and test.
Configure the JavaScript.
JavaScript is required to achieve the hover effect and current tab (active tab larger) presentation. There are three things to keep track of in order for the JavaScript to do its job.

You must reference the external scripts.js file in the head of your document. This is done by default in the template.

You need to be sure the location of the file referenced matches the actual location on the server where you are hosting it. The default configuration is to have it installed in a folder titled “javascript” at the root of your site.

Set the default (or currently highlighted) tab by setting its variable with a value which exactly matches the text you place inside your main tab anchor tag.

The example below demonstrates a reference to the scripts.js file in a directory at the root of the site in a folder called “javascript.” It sets the “Home” tab as the default or highlighted tab by setting the variable called “defaultMainList” to “Web Development” (exactly matching the text of the link in the example above).

<script type=”text/javascript”>

<!–

var defaultMainList = “Web Development”;

// –>

</script>

<script type=”text/javascript” src=”/javascript/scripts.js”></script>

TO SET A TAB AS THE CURRENT OR ACTIVE TAB

Copy or type the text exactly as it appears in the anchor tag.

Paste or type this text into the quotes of the variable defaultMainList in the javascript in the head of your file.

<script type=”text/javascript”>

<!–

var defaultMainList = “Paste it here “;

// –>

</script>

<script type=”text/javascript” src=”/javascript/scripts.js”></script>

0 Comments

Submit a Comment