Article Review: “Breadcrumbs In Web Design: Examples And Best Practices”

smashingmagazine.com offers you an article that explains what breadcrumb trail navigation is, of its types, and when and when not to use it on your website. There included many examples that helps you understand well.

According to this article, bread crumb navigations are used as a secondary navigation system and it should be unobtrusive in your website. It enhance the findability experience of user of your website. And there there three types of navigation; lolation based, attribute based and path based. It also covers with step-by-step progress indicator, sub-navigation of breadcrumbs navi and interactivity of breadcrumb sub navigation. This article gives you general understanding of breadcrumb navigation.

Take a look at this article.

Tutorial: Site Map with list

Using list for site map is better than using tables, because of its scalability!

Here’s a sample below;

css code

#menu_main {

background-color:green;
}

#menu_main ul {
border-left:1px solid black;
float:left;
font-weight:bold;
height:90px;
list-style:none outside none;
margin:0px;
padding: 0px 20px 5px 6px;
}

#menu_main ul li {
margin:0px;
padding:0px;
}

#menu_main ul li ul {
border:0 none;
float:none;
list-style:none outside none;
margin:0px;
padding:0px;
}

#menu_main ul li ul li {
font-weight:normal;
line-height:15px;
margin:0px;
padding:0px;
}

html code

<div id=”menu_main”>
  <ul>
   <li>Menu1</li>
  </ul>
  <ul>
  <li><a href=”/”>Menu2</a>
  <ul>
    <li><a href=”/”>Menu2-1</a></li>
    <li><a href=”/”>Menu2-2</a></li>
  </ul>
  </li>
  </ul>
  <ul>
   <li>Menu3</li>
</ul>
</div>

---

---