apple.com store style fading breadcrumbs


/ Published in: JavaScript
Save to your folder(s)

Jquery is awesome.
Requires jquery!


Copy this code and paste it in your HTML
  1. CSS
  2. #breadcrumbs {
  3. overflow:hidden;
  4. float:left;
  5. }
  6. #breadcrumbs ol {
  7. margin:0;
  8. padding:0;
  9. line-height:2em;
  10. height:2em;
  11. }
  12.  
  13. #breadcrumbs ol li {
  14. list-style-type:none;
  15. line-height:2em;
  16. padding:0px 5px;
  17. height:2em;
  18. float:left;
  19. }
  20.  
  21.  
  22.  
  23. HTML
  24. <div id="breadcrumbs">
  25. <ol>
  26. <li>» <a href="/">Home</a></li>
  27. <li>» <a href="/products" >Products</a></li>
  28. <li>» <a href="/products/cheese">Cheese</a></li>
  29. </ol>
  30. </div>
  31.  
  32.  
  33. Javascript
  34. $('#breadcrumbs ol li a').click(function(){
  35. $(this).parent().nextAll().fadeOut();
  36. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.