Results 1 to 3 of 3

Thread: Best way to code this navigation?

  1. #1
    Join Date
    Jan 2005

    Best way to code this navigation?


    Can you please advise the best way to code this for IE 8 +.

    Its a 3 step menu, with each stage highlighted with purple background. Is using the z-index best practice, to overlap each arrow image?

    Image is in tinypic below:

    Attached Images Attached Images

  2. #2
    Join Date
    Mar 2011
    The browser family or version isn't going to matter here. You're going to want to use z-index to overlay the navigation elements over each other. It looks to me that the z-index will descend from left to right in this instance - at least at first. Good luck!
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Mar 2012
    It seems to me that the image is simply that: an image. Nothing to do with z-index. I.e. There are three separate images corresponding to the three levels. They may be built from six images, with each level in high/low light, but that is simply graphics, not code.

    Besides which, it is not a nav bar. It is a display of where you are in a process. Nav bars drive the process.

    If you want to make a nav bar out of it, you need a range of images: Each image in highlight (current) and low light (not current). You then use them as graphics for three anchors per page. I.e.

    Top level page:
    <img src="level1_hi.jpg">
    <a href="level2.html"><img src="level2_lo1.jpg"></a>
    <a href="level3.html"><img src="level3_lo1.jpg"></a>
    Mid level page:
    <a href="level1.html"><img src="level1_lo2.jpg"></a>
    <img src="level2_hi.jpg">
    <a href="level3.html"><img src="level3_lo2.jpg"></a>
    3rd level page:
    <a href="level1.html"><img src="level1_lo3.jpg"></a>
    <a href="level2.html"><img src="level2_lo3.jpg"></a>
    <img src="level3_hi.jpg">
    Last edited by jedaisoul; 04-15-2014 at 05:46 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center