teknik membuat menu warna warni


Status
Not open for further replies.

indehost

Beginner 2.0
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
 

dpnux

Expert 1.0
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

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

vkios01

Expert 1.0
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
 

dpnux

Expert 1.0
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
Nyantol om dari jaman belanda. kekeke. Bener kok, untuk itu saya berikan versi optimasi kode yang mungkin berguna untuk dipelajari :).
 

Lombard

Banned!
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
wow.Really nice technique shared...I think its really informative...Please keep sharing like these information with us...Keep it up...!
 
Status
Not open for further replies.

Top