Navigation as an include file
By: Jim Summer

This allows you to include a navigation system (with graphic buttons) in your page as an include file, and lights up the button correctly as the user navigates your site. This is nice because as you add pages you only need to edit the include file. 

See this example in action at http://freecfm.com/t/tentonhead. 

On a side note, this page utilizes an advanced CSS attribute... "fixed" positioning for the navigation and the header divs. IE does not understand this yet, so you will notice nothing different... in Mozilla or NS6+ the header image and the navigation remain fixed while you scroll the page.

This tutorial consists of 3 sections...

  • The navigation include file (as a custom tag)
  • A nifty (linked) javascript that utilizes id's assigned to each image... this allows you to keep all of the "onMouseover and onMouseout" stuff out of your (X)HTML and the "onLoad" out of the <body> tag. This by the way, is all XHTML 1.1 compliant and validated.
    • You will notice that there is an "x.gif" beside each image ending with an "o"... in the case that you are on that page, that is to satisfy the javascript looking for the id... it is a 1x1 transparent gif.
    • Image names: le.gif is the plain image, lea.gif is the mouseover image, leo.gif is the active image for when you are on that page
    • The [onfocus="blur();"] in the anchor tag removes that annoying dotted line around a link that IE give you free of charge
  • The (X)HTML itself... merely a call to your include file

------------------------------------------------------

1) The include file check the querystring and lights up the proper button depending on what was clicked...
---------------------

<cfif IsDefined("lite")>
    <!-- our variable that tracks what the user clicked -->
    <cfoutput>
    <cfif #lite# EQ "leena">
       <img src="b/leo.gif" height="27" width="97" alt="Leena's Page" />
       <img id="le" src="b/x.gif" height="1" width="1" alt="Leena's Page" />
    <cfelse>
       <a href="leena.cfm?lite=leena" onfocus="blur();">
         <img id="le" src="b/le.gif" height="27" width="97" alt="Leena's Page" />
         </a>
    </cfif>
    <cfif #lite# EQ "jake">
        <img src="b/jao.gif" height="27" width="97" alt="Jake's Page" />
        <img id="ja" src="b/x.gif" height="1" width="1" alt="Jake's Page" />
    <cfelse>
        <a href="jake.cfm?lite=jake" onfocus="blur();">
            <img id="ja" src="b/ja.gif" height="27" width="97" alt="Jake's Page" />
        </a>
    </cfif>
    <cfif #lite# EQ "diane">
        <img src="b/dio.gif" height="27" width="97" alt="Diane's Page" />
        <img id="di" src="b/x.gif" height="1" width="1" alt="Diane's Page" />
    <cfelse>
        <a href="diane.cfm?lite=diane" onfocus="blur();">
           <img id="di" src="b/di.gif" height="27" width="97" alt="Diane's Page" />
        </a>
    </cfif>
    <cfif #lite# EQ "jim">
        <img src="b/jio.gif" height="27" width="97" alt="Jim's Page" />
        <img id="ji" src="b/x.gif" height="1" width="1" alt="Jim's Page" />
    <cfelse>
        <a href="jim.cfm?lite=jim" onfocus="blur();">
          <img id="ji" src="b/ji.gif" height="27" width="97" alt="Jim's Page" />
        </a>
    </cfif>
    <cfif #lite# EQ "pics">
        <img src="b/picso.gif" height="27" width="97" alt="Family Pictures Page" />
        <img id="pics" src="b/x.gif" height="1" width="1" alt="Family Pictures Page" />
    <cfelse>
        <a href="pictures.cfm?lite=pics" onfocus="blur();">
           <img id="pics" src="b/pics.gif" height="27" width="97" alt="Family Pictures Page" />
        </a>
    </cfif>
    <cfif #lite# EQ "guest">
        <img src="b/guesto.gif" height="27" width="97" alt="Sign Our Guestbook Page" />
        <img id="guest" src="b/x.gif" height="1" width="1" alt="Sign Our Guestbook Page" />
    <cfelse>
        <a href="guestbook_posts.cfm?lite=guest" onfocus="blur();">
           <img id="guest" src="b/guest.gif" height="27" width="97" alt="Sign Our Guestbook Page" />
        </a>
    </cfif>
    <cfif #lite# EQ "ctcs">
        <a href="ctcs.cfm?lite=ctcs" onfocus="blur();">
            <img src="b/ctco.gif" height="27" width="97" alt="Our Contacts Page" />
        </a>
        <img id="ctc" src="b/x.gif" height="1" width="1" alt="Our Contacts Page" />
    <cfelse>
        <a href="ctcs.cfm?lite=ctcs" onfocus="blur();">
            <img id="ctc" src="b/ctc.gif" height="27" width="97" alt="Our Contacts Page" />
        </a>
    </cfif>
    <cfif #lite# EQ "login">
        <img src="b/logino.gif" height="27" width="97" alt="Members Login and Sign Up Page" />
        <img id="login" src="b/x.gif" height="1" width="1" alt="Members Login and Sign Up Page" />
    <cfelse>
        <a href="login.cfm?lite=login" onfocus="blur();">
           <img id="login" src="b/login.gif" height="27" width="97" alt="Members Login and Sign Up Page" />
        </a>
    </cfif>
    <cfif #lite# EQ "home">
        <img src="b/homeo.gif" height="27" width="97" alt="Home Page" />
        <img id="home" src="b/x.gif" height="1" width="1" alt="Home Page" />
    <cfelse>
        <a href="index.cfm?lite=home" onfocus="blur();">
            <img id="home" src="b/home.gif" height="27" width="97" alt="Home Page" />
        </a>
    </cfif>
    </cfoutput>

<cfelse>
    <!-- else use has entered via search engine or typed in the staright domain so nothing is lit up yet -->
    <cfoutput>
        <a href="leena.cfm?lite=leena" onfocus="blur();">
            <img id="le" src="b/le.gif" height="27" width="97" alt="Leena's Page" />
        </a>
        <a href="jake.cfm?lite=jake" onfocus="blur();">
            <img id="ja" src="b/ja.gif" height="27" width="97" alt="Jake's Page" />
        </a>
        <a href="diane.cfm?lite=diane" onfocus="blur();">
               <img id="di" src="b/di.gif" height="27" width="97" alt="Diane's Page" />
        </a>
        <a href="jim.cfm?lite=jim" onfocus="blur();">
            <img id="ji" src="b/ji.gif" height="27" width="97" alt="Jim's Page" />
        </a>
        <a href="pictures.cfm?lite=pics" onfocus="blur();">
            <img id="pics" src="b/pics.gif" height="27" width="97" alt="Family Pictures Page" />
        </a>
        <a href="guestbook_posts.cfm?lite=guest" onfocus="blur();">
            <img id="guest" src="b/guest.gif" height="27" width="97" alt="Sign Our Guestbook Page" />
        </a>
        <a href="ctcs.cfm?lite=ctcs" onfocus="blur();">
            <img id="ctc" src="b/ctc.gif" height="27" width="97" alt="Our Contacts Page" />
        </a>
        <a href="login.cfm?lite=login" onfocus="blur();">
            <img id="login" src="b/login.gif" height="27" width="97" alt="Members Login and Sign Up Page" />
        </a>
        <a href="index.cfm?lite=home" onfocus="blur();">
            <img id="home" src="b/home.gif" height="27" width="97" alt="Home Page" />
        </a>
    </cfoutput>
</cfif>
------------------------------------------------------
2) The javascript that preloads the images and does the mouseover work... notice below in the (X)HTML in number 3) that the body tag is free of all extraneous "onLoad" etc etc.... it is in the javascript...
---------------------

window.onload = init;
function init() {
    initRollOvers();
    MM_preloadImages('b/leo.gif','b/lea.gif','b/jao.gif','b/jaa.gif','b/dio.gif',
                              'b/dia.gif','b/jio.gif','b/jia.gif','b/picso.gif','b/picsa.gif','b/guesto.gif',
                              'b/guesta.gif','b/ctco.gif','b/ctca.gif','b/logino.gif','b/logina.gif',
                              'b/homeo.gif','b/homea.gif');
    // writeControls();
    // writeLinkControls(); 
    // updateExternalLinks();
    }

    function MM_preloadImages() { //v3.0
        var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function initRollOvers() {
        var le;
        var ja;
        var di;
        var ji;
        var pics;
        var guest;
        var ctc;
        var login;
        var home;
        if (document.getElementById) {
            le = document.getElementById('le');
         

About This Tutorial
Author: Jim Summer
Skill Level: Beginner 
 
 
 
Platforms Tested: CF5
Total Views: 84,600
Submission Date: December 12, 2002
Last Update Date: June 05, 2009
All Tutorials By This Autor: 5
Discuss This Tutorial

  • This again is all XHTML validated code... I have the IF/ELSE statements all on one line so it produces clean output in the xhtml when you view source... not tons of CF produced whitespace. --- The site used in this example I did as a favor to my daughter's dance instructor... her site is Hollie's Dancin' Dream. URL: http://www.holliesdancindream.net/ CSS URL: http://www.holliesdancindream.net/css/Jacksonville-Dance.css 3 state image URL: http://www.holliesdancindream.net/css/btnnav.jpg --- What is does: The code checks the path to the page you are currently on, if the path matches the IF statement (you are on that page), it dynamically writes a class="act" to the LI tag and removes the hyperlink, if you are not on that page, then (ELSE) the anchor tag behaves with the hover event with a background image swap (actually repositions the background image via CSS)... in your CSS you set up your LI .act class to be something to indicate "you are here". In this case it is one image to represent the 3 different states... off, hover, and active (act). Using CSS you can position the image however you want... so for all of the main navigation, there is only 1 http call to load the image, yet you get 3 different backgrounds for your anchor states (off, hover, active). This is very code/load efficient. In the CSS search for btnnav to see how the image is positioned for the different states. --- CF Code:

    Jacksonville Dance Hollie's Dancin' Dream Home page --- The last anchor tag (id="Jacksonville-Dance-Home"), checks to see if you are on the home page. If you ARE NOT on the home page, it displays "HOME" in big letters at the top of the page to make it really obvious... (some users don't get that the logo usually is a hyperlink to the home page). Again, using CSS, the (id="Jacksonville-Dance-Home") is assigned to be absolutely positioned... because it is absolutely positioned, it is taken "out of the flow" of the xhtml, this means you can put that "Home" hyperlink anywhere in the code (doesn't matter), and it will display wherever you tell it to in the CSS. -- Feel free to email me with any questions, or post it in the forums. Thanks! -- Jim Summer Jacksonville Web Design http://tentonweb.com/

  • Wooow! You have a great site! It is very well organized! See mine (if U want): http://www.adolix.com

  • Hello everyone. Thank you for your comments and for making this one of the top 5 most viewed tutorials. Since I wrote this I have learned a very simple but highly effective trick in the html. Sorry I did not think of this to begin with. The trick is: preface all of your images and links with a forward slash based on the root of the domain. It is simple, often overlooked, but I cannot remember its proper name. This page in this tutorial is 2 subfolders below the root of freecfm.com... so images will be like /t/tentonhead/b/leo.gif and links like /t/tentonhead/leena.cfm?lite=leena. This allows you to include the navigation include file no matter what level deep you are, it will always map the links and images to the correct level. Cheers! Jim Summer

  • GREAT SITE!GOOD WORK! www.amicutilities.com

Advertisement

About
Resources
Social
Sponsored By...
Powered By...

© 2002-2012 EasyCFM, LLC. All rights reserved.
You are 1 of 540 active visitors.