teknik membuat menu warna warni

Discussion in 'Desain Web dan Programming' started by indehost, 2 Feb 2011.

Thread Status:
Not open for further replies.
  1. indehost

    indehost Beginner 2.0

    Messages:
    31
    Likes Received:
    1
    Trophy Points:
    8
    halo kawan-kawan DWH... selamat siang
    saya mau bagi2 ilmu nih. smoga saja bisa bermanfaat.
    ilmu yang saya bagi ini tentang teknik membuat warna warni pada menu

    Contoh mau buat menu page seperti ini : Halaman 1 Halaman 2 Halaman 3

    HTML:
    <ul>
    <li class="page-item"><a href="#" title="satu">Halaman 1</a></li>
    <li class="page-item"><a href="#" title="dua">Halaman 2</a></li>
    <li class="page-item"><a href="#" title="tiga">Halaman 3</a></li>
    </ul>
    
    bagaimana caranya? caranya hanya menggunakan css. mari simak cssnya
    HTML:
    ul li.page-item a:link[title="satu"],
    ul li.page-item a:visited[title="satu"] {
    color:#FF0000;
    }
    
    ul li.page-item a:link[title="dua"],
    ul li.page-item a:visited[title="dua"]{
    color:#0000FF;
    }
    
    ul li.page-item a:link[title="tiga"],
    ul li.page-item a:visited[title="tiga"] {
    color:#00FF00;
    }
    
    ul li.page-item a:hover {
    color:#000000 !important;
    }
    
    atau mungkin kalo mau linknya warna-warni ketika di hover berarti cssnya seperti ini :

    HTML:
    ul li.page-item a:hover[title="satu"] {
    color:#FF0000;
    }
    
    ul li.page-item a:hover[title="dua"] {
    color:#0000FF;
    }
    
    ul li.page-item a:hover[title="tiga"] {
    color:#00FF00;
    }
    
    ul li.page-item a:link, a:visited {
    color:#000000;
    }
    
    teknik ini terletak pada css dengan hanya menggunakan [title="judul tag"]. tidak terbatas hanya pada tag <a> saja tetapi bisa pada tag <del> menjadi <del title="satu">. rata-rata teknik ini sering digunakan pada bagian link menu.
    silahkan dikembangkan lagi :)
    semoga bermanfaat
     
  2. vkios01

    vkios01 Expert 1.0

    Messages:
    749
    Likes Received:
    18
    Trophy Points:
    18
    hemmm baru tahu, bisa di pakai ke tag title.
    selama ini pakai ke classnya saja.
    hemmmm cepat mana ya sama classnya langsung. misal untuk menu yg dinamic. sepertinya kurang cocok.
     
  3. PusatHosting

    PusatHosting Hosting Guru Web Hosting

    Messages:
    3,343
    Likes Received:
    326
    Trophy Points:
    83
    apalagi pakai menu drop down malah susah kayaknya
     
  4. dpnux

    dpnux Expert 1.0

    Messages:
    455
    Likes Received:
    28
    Trophy Points:
    28
    Kalau udah lama kecemplung di CSS hal ini sudah lumrah, mas vkios, attribute selector nama teknisnya, bisa mendefinisikan input[name="username"]. sering saya pakai untuk form juga. untuk performa saya tidak lihat ada perbedaan dengan class selector.

    bermanfaat informasinya :)

    ps: teknik lain yang bisa dicoba adalah teknik multi class, dengan hasil yang sama.

    HTML

    HTML:
    <ul>
    <li class="page-title link-satu"><a href="#">Link Satu</a></li>
    <li class="page-title link-dua"><a href="#">Link Dua</a></li>
    <li class="page-title link-tiga"><a href="#">Link Tiga</a></li>
    </ul>
    
    CSS

    Code:
    ul { margin: 0; padding: 0; }
    li.page-item { background-color: transparent; }
    li.page-item a:hover { background-color: #f00; }
    .link-satu a { background-color: #ffcc00; }
    .link-dua a { background-color: #ffcccc; }
    .link-tiga a { background-color: #ffffcc; }
    
     
  5. vkios01

    vkios01 Expert 1.0

    Messages:
    749
    Likes Received:
    18
    Trophy Points:
    18
    HTML:
    <ul>
    <li class="page-title link-satu"><a href="#">Link Satu</a></li>
    <li class="page-title link-dua"><a href="#">Link Dua</a></li>
    <li class="page-title link-tiga"><a href="#">Link Tiga</a></li>
    </ul>
    kalau seperti di atas itu om, yg biasa saya buat. tapi TS kan pakai cara lain :D dengan tag title.. kan jadi nambah codenya

    harus ada [title="satu"]
    .page-item a:visited[title="dua"]{
    background-color: #ffcc00; }

    sedangkan yg biasa kan langsung dr classnya.
    .dua a:visited {
    background-color: #ffcc00; }

    nyantol tidak sama asumsi saya :D/
    beda beberapa char saja performnya sudah beda.. kali aja ada optimisasi CSS
    CMIIW
     
  6. dpnux

    dpnux Expert 1.0

    Messages:
    455
    Likes Received:
    28
    Trophy Points:
    28
    Nyantol om dari jaman belanda. kekeke. Bener kok, untuk itu saya berikan versi optimasi kode yang mungkin berguna untuk dipelajari :).
     
  7. vkios01

    vkios01 Expert 1.0

    Messages:
    749
    Likes Received:
    18
    Trophy Points:
    18
    ckckckck.... sip om.. penjelasan saya diawal kurang contoh..
    contohnya sudah diberikan om dpnux.. jadi lengkap ini tutornya :D/

    ehmmm well apa ada cara lain ya? ehmm maybe jquery? dulu sempat baca ada yg pakai sih..
     
  8. Lombard

    Lombard Banned!

    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    wow.Really nice technique shared...I think its really informative...Please keep sharing like these information with us...Keep it up...!
     
  9. indehost

    indehost Beginner 2.0

    Messages:
    31
    Likes Received:
    1
    Trophy Points:
    8
    biasanya saya klo pake css jg pake yang teknik class..
    ini buat referensi ajalah. :)
     
Loading...
Thread Status:
Not open for further replies.

Share This Page

Loading...