Cara Menciptakan Drop Down Hidangan Css3 Di Blog
Contoh materi drop down hidangan yang sederhana dapat teman-teman baca di artikel Cara Membuat Drop Down Menu. Soalnya drop down yang kali ini akan menciptakan kepala sobat sekalian agak pusing (benar-benar untuk intermediate blogger ke atas)....
Contoh Tampilan Drop Down Menu Blog yang dibentuk dengan CSS3
Sebelum kita lanjut ada baiknya teman-teman melihat dulu bagaimana model tampilan drop down hidangan yang akan kita buat nanti....
Ya! Kita akan menciptakan drop down yang dapat memuat paragraf dan dapat dibagi ke dalam maksimal 5 kolom. Makara nanti setiap kotak yang muncul dapat di atur semoga memiliki 1-5 kolom. Dan di dalam kolom-kolom itu dapat diisi apa saja, baik itu gambar, teks, ataupun link.
Saya akan sangat mengusahakan memakai bahasa yang sederhana biar ini dapat dipahami dengan lebih mudah....
Memasang CSS3 Drop Down Menu Di Template Blog
Untuk mengatur tampilan dan kerja dari drop down hidangan yang akan kita pasang ini, maka langkah pertama yaitu memasang CSS di bab <head>....</head>. Caranya gampang saja:
- Masuk ke akun blogger anda
- Buka hidangan TEMPLATE dan klik tombol jingga SESUAIKAN
- Di layar perancang template pada sidebar kiri paling bawah ada hidangan TINGKAT LANJUT, silahkan diklik....
- Akan muncul sub hidangan yang dapat di-scroll ke bawah. Silahkan Scroll hingga ke sub hidangan paling bawah dan klik TAMBAHKAN CSS
- Akan terbuka sebuah kotak putih untuk menaruh arahan CSS, silahkan copy arahan di bawah ini dan paste masuk ke dalam kotak input CSS tadi....
Catatan: Dari arahan di bawah ini, arahan yang disorot hijau terang harus anda ubah semoga sesuai dengan lebar template anda. Sedangkan arahan yang di sorot kuning harus anda ubah semoga warna hidangan harmonis dengan template anda....
body, ul, li {
/* ubah nilai font size untuk merubah ukuran abjad di dalam hidangan */
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}
/* Perintah Untuk Mencegah Drop Down Menu Tertindih Konten */
#iefix {
position:relative;
z-index:1000;
}
#menu {
list-style:none;
/* Ubah nilai width sesuaikan dengan lebar kolom yang anda gunakan */
width:920px;
margin:0px;
height:43px;
/* mengatur margin kiri semoga sempurna di batas kiri */
margin-left:-15px;
/* ubah nilai radius untuk menciptakan sudut kafe yang tumpul */
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
background: #014464;
/* ubah nilai arahan hex warna untuk mengubah gradiasi warna kafe */
background: -moz-linear-gradient(top, #C47112, #F5A74F);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C47112), to(#F5A74F));
/* ubah warna border dari kafe */
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* ubah nilai hex untuk mengubah warna gradiasi pada box nama drop down hidangan */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Ubah nilai radius untuk mengatur ketumpulan sudut kotak nama hidangan drop down */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("img/drop.png") no-repeat right 7px;
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em;
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* ubah nilai hex untuk mengubah nilai gradiasi */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* atur ketumpulan sudut kotak isi item drop down */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
/* atur lebar dari kotak item*/
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
/* Pengaturan kolom */
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
/* atur lebar dari kolom yang dimasukkan dalam kotak item */
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
/* Pengaturan Menu Sisi Kanan */
#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
/* Membuat Pengaturan isi dari konten drop down hidangan */
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h4 {
font-size:20px;
font-family: Impact;
color: #E36A24;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
font-size:11px;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* mengatur sudut tumpul dari kotak hitam */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* mengatur bayangan */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* mengatur ketumpulan sudut kotak abu-abu */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
- Setelah anda memasukkan arahan ini ke dalam kolom penambahan CSS silahkan klik TERAPKAN KE BLOG pada sudut kanan atas.... Dengan demikian CSS sudah terpasang.
Membuat KODE HTML dari drop down hidangan yang akan dipasang
Di sini kesulitan akan mulai kita rasakan. Karena kita harus merancang arahan HTML yang sesuai dengan tampilan yang kita harapkan. Saya akan memperlihatkan materi dasarnya terlebih dahulu, tapi kalau teman-teman blogger bingung, maka dapat melangkahi materi dasar ini dan eksklusif ke tumpuan yang sudah jadi....
Makara kita mulai mempelajari dari dasar dulu.... Normalnya arahan HTML dari sebuah drop down hidangan akan terlihat ibarat di bawah ini:<ul>
<li><a href="#" title="CARA MEMBUAT DROP DOWN MENU CSS3 DI BLOG">Beranda</a></li>
<li><a href="#" title="CARA MEMBUAT DROP DOWN MENU CSS3 DI BLOG">Anchor Text Menu 1</a>
<li><a href="#" title="CARA MEMBUAT DROP DOWN MENU CSS3 DI BLOG">Anchor Text Sub Menu 1-1</a></li>
<li><a href="#" title="CARA MEMBUAT DROP DOWN MENU CSS3 DI BLOG">Anchor Text Sub Menu 1-2</a></li>
<li><a href="#" title="CARA MEMBUAT DROP DOWN MENU CSS3 DI BLOG">Anchor Text Sub Menu 1-3</a></li>
<li><a href="#" title="CARA MEMBUAT DROP DOWN MENU CSS3 DI BLOG">Anchor Text Sub Menu 1-4</a></li>
</li>
<li><a href="#" title="CARA MEMBUAT DROP DOWN MENU CSS3 DI BLOG">Anchor Text Menu 2</a>
<li><a href="#" title="CARA MEMBUAT DROP DOWN MENU CSS3 DI BLOG">Anchor Text Sub Menu 2-1</a></li>
<li><a href="#" title="CARA MEMBUAT DROP DOWN MENU CSS3 DI BLOG">Anchor Text Sub Menu 2-2</a></li>
<li><a href="#" title="CARA MEMBUAT DROP DOWN MENU CSS3 DI BLOG">Anchor Text Sub Menu 2-3</a></li>
<li><a href="#" title="CARA MEMBUAT DROP DOWN MENU CSS3 DI BLOG">Anchor Text Sub Menu 2-4</a></li>
</li></ul>
Tapi Drop Down Menu Kali ini Tidak akan persis sama ibarat di atas. Bentuk dasar HTML dari Drop down hidangan dengan paragraf ini kurang lebih ibarat di bawah ini
<ul id="menu"><li><a href="#">Item 1</a>
<div>
Drop down Content
<div>
</li>
<li><a href="#">Item 2</a>
<div>
Drop down Content
<div>
</li>
</ul>
Makara yang perlu teman-teman pelajari bahwasanya yaitu mengatur elemen div yang akan disisipkan di antara <li><a href="URL1">NAMA MENU 1</a>......</li> semoga tampilan yang keluar nanti persis ibarat yang dikehendaki.
Makara untuk itu kita akan mencar ilmu 4 hal:
- Mengatur Posisi Nama Menu pada Menu bar
- Mengatur Lebar Kotak Drop Down
- Mengatur lebar petak di dalam Kotak
- Memberi Style pada Petak
JADI MULAI SEKARANG BELAJAR MEMBEDAKAN ANTARA NAMA MENU, KOTAK ITEM DAN PETAK YA..... Lihat Contoh Di bawah ini......
Mudah-mudahan sudah jelas.... jadi mari kita mulai satu per satu....
Mengatur Nama Drop Down Menu Untuk Berada Di Sisi Kiri atau Kanan Bar
Jika anda sudah membuka link halaman demo di atas, niscaya anda dapat melihat bahwa ada hidangan yang berada di sisi kiri dan ada yang berada di sisi kanan. Fungsi ini dapat anda pergunakan dapat juga anda abaikan saja.
Jika anda ingin nama hidangan tetap berada di sisi kiri bar, maka buat kodenya ibarat ini (lihat tumpuan di bawah)
<li><a href="#" class="drop">Top Artikel</a>
Tapi kalau anda ingin nama hidangan tersebut dipasang di bab kanan, maka buat kodenya ibarat tumpuan berikut....
<li class="menu_right"><a href="#" class="drop">Koleksi Template</a>
Bisa lihat bedanya? Mudahkan? Saya yakin di sini anda belum menemui masalah....
Mengatur Lebar dari Kotak Drop Down
Setelah anda mengatur posisi pada bar, selanjutnya anda harus mengatur lebar kotak yang akan dikeluarkan dikala kursor melintasi NAMA MENU.... Di sini anda dapat menentukan lebar dari kotak ini mulai dari lebar 1 kolom saja hingga lebar 5 kolom.....
Jika anda menentukan kotak drop down selebar 4 kolom, maka ini yaitu div yang harus anda gunakan....
<div class="dropdown_4columns">
Kode div dari kolom-kolom
</div>
Kalau anda ingin drop down yang keluar cuma selebar 2 kolom saja maka inilah arahan yang harus anda gunakan....
<div class="dropdown_2columns">
Kode div dari kolom-kolom
</div>
Mudah-mudahan anda terang dengan dua tumpuan di atas.....
Mengatur lebar dari petak entri
Bukan hanya kotak saja yang dapat anda atur lebarnya, PETAK entri pun dapat anda atur. Sekarang perhatikan tumpuan di atas di mana saya memakai KOTAK selebar 5 kolom. Di dalam kotak itu ada petak yang selebar 1 kolom (1-5), ada juga petak yang selebar 5 kolom (6), petak selebar 2 kolom (7), dan petak selebar 3 kolom (8).
Mudah-mudahan anda dapat melihat bahwa kalau kotaknya selebar 5 kolom, maka akan muat 5 petak ukuran 1 kolom, 1 petak ukuran 5 kolom, atau petak selebar 2 kolom ditambah 3 kolom.... Jika ada petak komplemen yang melebihi ukuran kotak akan digeser ke bawah.....
Sekarang bagaimana cara memasukkan 1 petak berukuran 2 kolom, dan 2 petak berukuran 1 kolom ke dalam KOTAK berukuran 2 kolom? Begini caranya.....
<div class="dropdown_2columns">
<div class="col_2">
ISI DARI PETAK 1....
</div>
<div class="col_1">
ISI DARI PETAK 2....
</div>
<div class="col_1">
ISI DARI PETAK 3....
</div>
</div>
Dengan mengetahui tumpuan di atas anda sudah dapat menciptakan sendiri hidangan drop down anda. Untuk hidangan dengan 2 NAMA MENU, kira-kira ibarat inilah kodenya....
<div id="iefix"><ul id="menu">
<li><a href="#" class="drop">NAMA MENU 1</a>
<div class="dropdown_2columns">
<div class="col_2">
ISI DARI PETAK 1....
</div>
<div class="col_1">
ISI DARI PETAK 2....
</div>
<div class="col_1">
ISI DARI PETAK 3....
</div>
</div>
</li>
<li><a href="#" class="drop">NAMA MENU 1</a>
<div class="dropdown_2columns">
<div class="col_2">
ISI DARI PETAK 1....
</div>
<div class="col_1">
ISI DARI PETAK 2....
</div>
<div class="col_1">
ISI DARI PETAK 3....
</div>
</div>
</li>
</ul></div>
Makara kini anda tinggal memikirkan mau mengisi apa saja ke setiap ISI DARI PETAK. Di sini anda dapat menaruh teks biasa, link, ataupun gambar....
Memberi Style pada PETAK di dalam drop down menu
Sekarang coba buka sekali lagi halaman demo dan buka satu persatu kotak item yang ada. Di situ anda akan melihat ada ragam gaya dari masing-masing petak....
Pada KOLEKSI TEMPLATE anda dapat melihat link-link di dalam petak abu-abu terang. Cara menciptakan ini yaitu ibarat berikut:
<div class="col_1"><ul class="greybox">
<li><a href="#">BlackLine</a></li>
<li><a href="#">Masculine CB</a></li>
<li><a href="#">Feminine CB</a></li>
<li><a href="#">LightSimple</a></li>
<li><a href="#">More...</a></li>
</ul>
</div>
Pada hidangan KATEGORI anda dapat melihat petak warna hitam dengan goresan pena putih. Cara membuatnya yaitu ibarat berikut....
<div class="col_1"><p class="black_box">ISI DARI PETAK</p>
</div>
Masih di dalam hidangan KATEGORI anda dapat melihat petak yang semua teksnya tercetak miring alias italic. Cara membuatnya yaitu ibarat berikut
<div class="col_1"><p class="italic">ISI DARI PETAK</p>
</div>
Selain cetak miring ada juga petak yang isinya tercetak tebal. Anda hanya perlu mengganti italic dengan strong ibarat arahan di bawah ini....
<div class="col_1"><p class="strong">ISI DARI PETAK</p>
</div
====================================================
CONTOH KODE YANG SUDAH JADI DAN BISA LANGSUNG ANDA TERAPKAN
Jika anda sekedar mau latihan, maka saudara dapat memakai arahan HTML dari hidangan yang ada di halaman DEMO..... Yang perlu anda lakukan yaitu download kodenya, pasang pada blog ujicoba, dan edit setiap teks sesuai dengan kebutuhan anda. Jika tampilan pada blog ujicoba sudah benar, maka coba ambil arahan yang sudah final anda edit dan pasang di blog utama anda.
DOWNLOAD CONTOH KODE DI SINI Berhubung artikel ini saya peruntukkan untuk blogger intermediate ke atas, maka rasanya saya tidak perlu menuliskan cara memasukkan arahan HTML ini ke gadget HTML/JAVASCRIPT, alasannya yaitu saudara niscaya sudah tahu caranya.....
Ok, sekian saja dulu pembahasan cara menciptakan drop down hidangan di blog dengan memakai CSS3 ini. Silahkan teman-teman blogger bereksperimen sendiri dengan merancang bentuk susunan petak yang diinginkan di dalam setiap drop down menu.....
0 Response to "Cara Menciptakan Drop Down Hidangan Css3 Di Blog"
Post a Comment