Membuat Breadcrumb (Navigasi) sederhana dengan CSS

Breadcrumb (navigasi) dalam sebuah website sangatlah penting, memudahkan pengunjung berselancar di website kita, Breadcrumb sendiri bentuknya seperti menu biasa, tapi tujuan breadcrumb itu sendiri adalah menunjukkan kita berada dihalaman mana, biasanya bertingkat, Kita lihat contoh seperti apa breadcrumb tersebut

Nah, Sekarang kita akan membuat sebuah Breadcrumb (navigasi) sederhana seperti pada gambar ini :

Kita akan menempatkan panah tersebut disetiap text yang ada link-nya sedangkan text yang terakhir tidak ada link-nya maka tidak ada panahnya.

Kode HTML

<html>
<head>
    <title>Membuat Breadcrumb (Navigasi) sederhana  dengan CSS | BelajarWebdesign.com</title>
</head>
<body>
    <div class="bungkusan">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Webdesign</a></li>
            <li>Inspiration</li>
        </ul>
    </div>
</body>
</html>

Kode CSS

body {margin: o; padding: 200px 0; text-align: center; background: #f89927;}
.bungkusan {
    width: 500px;
    height: 60px;
    background: url(bg.jpg) repeat-x;
    margin: 0 auto;
    font-size: 24px;
    font-family: arial;
    color: #afafaf;
}
ul {
    list-style: none;
}
li {
    float: left;
    line-height: 60px;
    margin-right: 10px;
    col
}
li a {
    color: #a2a2a2;
    text-decoration: none;
    background: url(panah.png) center right no-repeat;
    padding-right: 30px;
}
li a:hover {
    color: #666;
}

Metode di atas saya tidak menggunakan list-style yang biasanya (bulat/kotak), saya menggunaka teknik backgound images dimana background tersebut saya letakkan di sebelah kanan pada teks yang mempunyai link. Jadi seberapa banyakpun teks yang punya link maka akan ada gambar panah di sebelah kanannya.

Baca Juga:  Membuat CSS Image Gallery Tanpa Javascript

Mudah bukan, ini baru metode sederhana loh, nah bagaimana kalau membuat breadcrumb seperti pada website delicious.com itu 😀

Komentar

comments

zulsdesign

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

grain storage steel silo grain bins