teknik membuat menu warna warni

[indehost]

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

<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

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 :

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

 

[vkios01]

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.

 

[PusatHosting]

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.

apalagi pakai menu drop down malah susah kayaknya

 

[dpnux]

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.

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

<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

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; }

 

[vkios01]

<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 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 /
beda beberapa char saja performnya sudah beda.. kali aja ada optimisasi CSS
CMIIW

 

[dpnux]

kalau seperti di atas itu om, yg biasa saya buat. tapi TS kan pakai cara lain 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 /
beda beberapa char saja performnya sudah beda.. kali aja ada optimisasi CSS
CMIIW

Nyantol om dari jaman belanda. kekeke. Bener kok, untuk itu saya berikan versi optimasi kode yang mungkin berguna untuk dipelajari .

 

[vkios01]

ckckckck.... sip om.. penjelasan saya diawal kurang contoh..
contohnya sudah diberikan om dpnux.. jadi lengkap ini tutornya /

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

 

[Lombard]

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

<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

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 :

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

wow.Really nice technique shared...I think its really informative...Please keep sharing like these information with us...Keep it up...!

 

[indehost]

biasanya saya klo pake css jg pake yang teknik class..
ini buat referensi ajalah.