Page Intro: To get around this site you will probably rely on the use of the navigation menu to the right — or after the content if you don’t support style sheets or support is for a handheld style sheet — to get around this site. It’s an expansive site so certain techniques were employed to help you know where you’re at, where you’re going, and where you’ve been. On this page learn about navigation link backgrounds, navigation alternatives, links and new windows, multipage navigation and some boring tech stuff if that’s your thing.
Main Navigational Link Background Colors
To make the experience a little easier — since we have so many pages — the main navigation menu links are color coded by way of background-colors or -images, as follows. This should be self-explanatory, but the “Visited sub-page link example” is detailed a little more deeply below:
Previously Visited Sub-Page Links
Once you’ve visited one of our sub-pages, since there are so many of them, the link background color/image will change to show that you’ve been there. The recording of this information is based solely on your browser’s “History” settings. For example, let’s say you have your browser set to clear your history after seven days. That means that within seven days any pages you have visited will show you the visited link state background color/image. But after seven days following your visit to that page, the link background color/image will revert to its static state. This, of course, is when using a single browser on a single computer. If you visit one day with one browser, and the next with another, the links on day two will all be shown in their static state because your new browser doesn’t have your history log. Hope this makes sense.
In summary, to make the most of this feature, make sure your history retention duration is lengthy enough to meet your needs and be sure to visit using the same browser/computer if you want your page-visit progress recorded. [Intro]
Alternative Navigation
In addition to our main navigation menu, we also offer a “breadcrumb” trail at the very top of the page to help you know where you’re at while visiting, and a handful of quick link-tabs on our masthead — on which a “Cart” tab will appear if you have an item in your shopping cart. We also offer some jump links available to keyboard users. To learn more about those check the info entry on our accessibility page. To explore deeper, you may also check out the links on our site map and Bug Blog archives.[Intro]
Links and New Windows
The external links on many sites will launch into a new window or tab, whether you like it or not. It’s not fair to force that on you, especially since it can’t be turned off. Thus, on this site, all links open in the same window. If you want to open any link in a new window or tab, on Windows systems (if you have a two-button mouse), just right-click on that link and open it in a new window or tab. There are other ways, too, you might try Ctrl+N. The choice has been returned to you, our site visitor. [Intro]
Multipage Navigation
On many pages you will find links at the bottom of the page allowing you to navigate further (due to long content). These links may be numeric, but there are variations. Also on the bottom of most pages you will find a link to our glossary and, if JavaScript is enabled, a print page link. See our copyright statement for more on this. [Intro]
Navigational Tech Stuff
If you’re a web developer or WordPress user, you may be interested in how the navigation was pulled off. What follows is a brief explanation:
The first thing I did was isolate my section directories. To do this I exploded the $_SERVER['REQUEST_URI'] into an array using my Directory Finder scriptlet. One could also use the getcwd(); function, but not on database driven site. I broke the path parts in an array and removed the slashes then pulled what I needed. I did that with this:
<?php
$path_parts = explode('/', $_SERVER['REQUEST_URI']);
$path_part = $path_parts[2]; // Enter the array part needed
echo $path_part;
?>
Once I had this info I was able to negotiate what links were displayed using some simple if statements and the WordPress list pages function, wp_list_pages();, with the following parameters: sort_column=menu_order (uses assigned page-order numbers), &exclude= (to exclude pages), and &title_li=. I then excluded the page numbers I didn’t want to show for any given section. Aside from having to enter these excluded page numbers when new pages are added, this is a fully dynamic solution that’s easy to expand. I even assigned page-order number by 10s to allow easy insertions.
An example of this is as follows:
<?php
if ($path_part == "named-section") {
wp_list_pages('sort_column=menu_order&exclude=1,2,3,4&title_li=');
} else if ($path_part == "another-section") {
wp_list_pages('sort_column=menu_order&exclude=5,6,7,8&title_li=');
} else {
wp_list_pages('sort_column=menu_order&exclude=1,2,3,4,5,6,7,8&title_li=');
}
?>
To style this, I used the following Cascading Style Sheet (CSS).
/* MAIN NAV */
#sidebar ul.btn, #sidebar ul.btn ul {
margin-top : 0;
list-style-type : none;
text-align : center;
font-variant : small-caps;
}
#sidebar ul.btn li, #sidebar ul.btn li li {
margin-bottom : 4px;
}
#sidebar ul.btn li a.rss,
#sidebar ul.btn li a.error,
#sidebar ul.btn li.page_item a,
#sidebar ul.btn li.current_page_item a,
#sidebar ul.btn li.page_item a:visited {
background : #999900 url(images/bb_nav.jpg) no-repeat;
padding : 3px 0 2px 0;
margin-bottom : 4px;
height : auto;
width : 178px;
color : #ffffcc;
font-weight : bold;
font-style : normal;
display : block;
cursor : pointer;
text-decoration : none;
border : 1px solid #222;
}
#sidebar ul.btn li.page_item a:hover,
#sidebar ul.btn li.page_item a:focus,
#sidebar ul.btn li.page_item a:active,
#sidebar ul.btn li.page_item a:visited:hover,
#sidebar ul.btn li.page_item a:visited:focus,
#sidebar ul.btn li.page_item a:visited:active {
background : #666600 url(images/bb_nav_over.jpg) no-repeat;
color : #fff;
border : 1px solid #000;
}
/* SUBNAV */
#sidebar ul.btn li.page_item li.page_item a {
font-size : 85%;
background : #a5690e url(images/bb_navs.jpg) no-repeat;
color : #fff;
}
#sidebar ul.btn li.page_item li.page_item a:visited {
background : #a5690e url(images/bb_navs_visited.jpg) no-repeat;
color : #eaebb7;
}
#sidebar ul.btn li.page_item li.page_item a:hover,
#sidebar ul.btn li.page_item li.page_item a:focus,
#sidebar ul.btn li.page_item li.page_item a:active,
#sidebar ul.btn li.page_item li.page_item a:visited:hover,
#sidebar ul.btn li.page_item li.page_item a:visited:focus,
#sidebar ul.btn li.page_item li.page_item a:visited:active {
background : #b45e22 url(images/bb_navs_over.jpg) no-repeat;
color : #fff;
border : 1px solid #000;
cursor : pointer;
}
/* CURRENT PAGE */
#sidebar ul.btn li.current_page_item a,
#sidebar ul.btn li.current_page_item a:hover,
#sidebar ul.btn li.current_page_item a:focus,
#sidebar ul.btn li.current_page_item a:active,
#sidebar ul.btn li.current_page_item a:visited,
#sidebar ul.btn li.current_page_item a:visited:hover,
#sidebar ul.btn li.current_page_item a:visited:focus,
#sidebar ul.btn li.current_page_item a:visited:active,
#sidebar ul.btn li.page_item li.current_page_item a,
#sidebar ul.btn li.page_item li.current_page_item a:hover,
#sidebar ul.btn li.page_item li.current_page_item a:focus,
#sidebar ul.btn li.page_item li.current_page_item a:active,
#sidebar ul.btn li.page_item li.current_page_item a:visited,
#sidebar ul.btn li.page_item li.current_page_item a:visited:hover,
#sidebar ul.btn li.page_item li.current_page_item a:visited:focus,
#sidebar ul.btn li.page_item li.current_page_item a:visited:active {
background : #994400 url(images/bb_nav_here.jpg) no-repeat;
color : #fff;
cursor : default;
padding : 3px 0 2px 0;
border : 1px solid #000;
}
/* RSS BUTTON */
#sidebar ul.btn li a.rss, #sidebar ul.btn li a.rss:visited {
background : #cb7510 url(images/bb_navr.jpg) no-repeat;
}
#sidebar ul.btn li a.rss:hover,
#sidebar ul.btn li a.rss:focus,
#sidebar ul.btn li a.rss:active,
#sidebar ul.btn li a.rss:visited:hover,
#sidebar ul.btn li a.rss:visited:focus,
#sidebar ul.btn li a.rss:visited:active {
background : #e4820d url(images/bb_navr_over.jpg) no-repeat;
color : #fff;
}
/* ERROR BUTTON */
#sidebar ul.btn li.current_page_item a.error,
#sidebar ul.btn li.current_page_item a.error:visited,
#sidebar ul.btn li.current_page_item a.error:hover,
#sidebar ul.btn li.current_page_item a.error:focus,
#sidebar ul.btn li.current_page_item a.error:active {
background : #b70000 url(images/bb_nav_error.jpg) no-repeat;
}
This isn’t all that was done to make the navigation a reality, there’s more to it concerning search, error, archives, and other special page negotiations, but with this you should get the general idea. If you’re actually interested in this webby tech stuff and have questions, please contact Mike Cherim directly. Support might not be free, but do feel free to ask a question or two. [Intro]
