Breadcrumb navigasyon örneği

Örnek CSS kodları

body
{
     font: 11px Arial, Helvetica, sans-serif;   
}

#breadcrumb
{
    font: 11px Arial, Helvetica, sans-serif;
    background-image:url('bc_bg.png'); 
    background-repeat:repeat-x;
    height:30px;
    line-height:30px;
    color:#9b9b9b;
    border:solid 1px #cacaca;
    width:100%;
    overflow:hidden;
    margin:0px;
    padding:0px;
}
#breadcrumb li 
{
    list-style-type:none;
    float:left;
    padding-left:10px;
}
#breadcrumb a
{
    height:30px;
    display:block;
    background-image:url('bc_separator.png'); 
    background-repeat:no-repeat; 
    background-position:right;
    padding-right: 15px;
    text-decoration: none;
    color:#454545;
}
.home
{
    border:none;
    margin: 8px 0px;
}

#breadcrumb a:hover
{
    color:#35acc5;
}

HTML kodları

<ul id="breadcrumb">
        <li><a href="#" title="Home"><img src="home.png" alt="Home" class="home" /></a></li>
        <li><a href="#" title="Sample page 1">Sample page 1</a></li>
        <li><a href="#" title="Sample page 2">Sample page 2</a></li>
        <li><a href="#" title="Sample page 3">Sample page 3</a></li>
        <li>Current page</li>
    </ul>

Resimler