CSS

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 Kontak Form dengan PHP

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

Komentar

comments

Tags: , , , , , , , ,

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 :)

http://www.zulsdesign.com


cToko Toko Online

4 Comments

  1. Posted at | Permalink

    Kalau tutorial ini, kayaknya cocok sekali di kombinasikan dengan artikel yang ini : http://belajarwebdesign.com/css/membuat-gambar-full-background-page/

  2. Rossiana
    Posted at | Permalink

    bagus banget artikelnya . sayangnya, untuk url background tidak disertakan gambarnya. jadi untuk mencoba, kami hanya bingung dengan brapa ukuran pasti dri kedua gambar tsb ๐Ÿ™

  3. April
    Posted at | Permalink

    Hem, perlu bongkar pasang css lagi nih ane,,
    Breadcrumb, perlu dipertimbangkan

  4. Posted at | Permalink

    Susah juga buatnya..
    Apalagi kalau Ilmu belum nyerap semua meski kudu ke w3school dulu..

2 Trackbacks

  1. […] ya? hehe.. ya itu adalah salah satu elemen website, saya dulu pernah menulisnya di @belajar-web Membuat Breadcrumb (Navigasi) sederhana dengan CSS tapi hanya html-nya […]

  2. […] ya? hehe.. ya itu adalah salah satu elemen website, saya dulu pernah menulisnya di @belajar-web Membuat Breadcrumb (Navigasi) sederhana dengan CSS tapi hanya html-nya […]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>