SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How is this done, and what's it called?

    I see this type of display frequently, and SitePoint has one too (example from officedepot.com):

    In this case, the current page is "CD External Drives," and the links to the left represent the hierarchy I drilled down through to get there. Clicking one of those links will take me back up the chain so I can drill down to another choice if desired. On some sites, this would mirror a decision tree which formed the basis of a multilevel dropdown or flyout menu arrangement.

    What is this type of feature callled, and how can it be implemented using CSS only, no JavaScript? A link to a good tutorial would be helpful. Thanks!

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    It's called a "breadcrumb trail".

    It's part of the HTML contents, so no, it can't be implemented using only CSS or Javascript. If your pages are hard-coded then you need to manually code that feature in every page. If your site runs off a database then you can usually automate the procedure.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    As Stevie D said you would usually add the html to each of the pages as you produced them and add the required level. Usually it's no hardship because you have to create each page anyway (unless its a dynamic page and then you would need to script the trail).

    The css/html aspect is quite straight forward though and you can find a nice little article here.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool! I wonder what else I missed out on by never reading Hansel and Gretel?

    Thanks for your inputs, others welcome.

    Ned

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    It might be nice to add to the SitePoint reference a dictionary or diagram showing the names used for stuff on web pages. I had to look up what "growl" was and that's rather difficult to do on google if you have bad google-fu.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    It might be nice to add to the SitePoint reference a dictionary or diagram showing the names used for stuff on web pages. I had to look up what "growl" was and that's rather difficult to do on google if you have bad google-fu.
    Sounds like that could be a useful sticky in the web design forum.


Bookmarks

Posting Permissions

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