quote

by Ahmad Najiullah

HTML

<div class="clear"></div>
        <pre>
$('#breadcrumbs-2').xBreadcrumbs({ collapsible: true });</pre>   
<blockquote cite="http://www.najiullah.com">
For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.ghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</blockquote>

CSS

BODY {
        margin: 20px;
        padding: 20px;
    }

    PRE{
        padding: 15px 15px 15px 20px;
font-family: Courier, "Courier New", monospace;
        font-size:14px;
        background: #777777;
        color: #F0F0F0;
        width: 445px;
        overflow: auto;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin-bottom:15px;
    }


blockquote{
        padding: 15px 15px 15px 20px;
        font-family: Courier, "Courier New", monospace;
        font-size:16px;
        background: #777777;
        color: #F0F0F0;
        width: 445px;
        overflow: auto;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin-bottom:15px;
    }

JavaScript

/* 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery xBreadcrumbs (Extended Breadcrumbs) Demo</title>

<style type="text/css">
    /*  Demo styles  */
    BODY {
        margin: 20px;
        padding: 20px;
    }
    STRONG { color: #000000; }
    .vspacer {
        height: 200px;
    }
    PRE{
        padding: 15px 15px 15px 20px;
        font-family:"courier";
        font-size:14px;
        background: #777777;
        color: #F0F0F0;
        width: 480px;
        overflow: auto;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin-bottom:15px;
    }
</style>

</head>
<body>
        <div class="clear"></div>
        <pre>
$('#breadcrumbs-2').xBreadcrumbs({ collapsible: true });</pre>   
<pre>
&lt;style type=&quot;text/css&quot;&gt;
    .xbreadcrumbs LI {
        border-right: none;
        background: url(./images/separator.gif) 
                    no-repeat right center;
        padding-right: 15px;
        padding-left: 10px;
    }
    .xbreadcrumbs LI.current { background: none; }
    .xbreadcrumbs LI UL LI { background: none; }
    
    .xbreadcrumbs LI A.home {
        background: url(./images/home.gif) no-repeat left center;
        padding-left: 20px;
    }

    /*  Custom styles for breadcrums (#breadcrumbs-3)  */
    .xbreadcrumbs#breadcrumbs-3 {
        background: none;
    } 
    .xbreadcrumbs#breadcrumbs-3 LI A {
        text-decoration: underline;
        color: #0A8ECC;
    }
    .xbreadcrumbs#breadcrumbs-3 LI A:HOVER, 
                    .xbreadcrumbs#breadcrumbs-3 LI.hover A 
                    { text-decoration: none; }
    .xbreadcrumbs#breadcrumbs-3 LI.current A {
        color: #333333;
        text-decoration: none;
    }
    .xbreadcrumbs#breadcrumbs-3 LI {
        border-right:...