Membuat Select Box Sederhana

Unknown

HTML, Menu, Newbie, Widget

1 Komentar

Cara Membuat Select Box Sederhana - Terkadang kebutuhan membuat list kategori tidak dapat terelakkan . Ya semua itu untuk mempermudah kita mengenali Topik dari point tersebut . Bingung ya ?

Begini , ini sebenarnya adalah Project saya membuat halaman contact yang bisa anda akses disini atau silahkan kunjungi halaman kontak . Kenapa saya buat label seperti itu adalah untuk memudahkan saya mengenali point atau kategori pertanyaan dari pesan yang masuk .
Contohnya pada gambar dibawah ini .

Dengan Category pertanyaan akan memudahkan admin mengenali topik dari petanyaan tersebut .

Nah lalu bagaimana cara membuat Menu Category dropdown ini ?

• Disini kita akan mencoba membuat versi sederhananya . Oh iya , pernah ada yang nanya "gimana caranya memasang link pada menu category dropdown ini ?"

1. Sekedar info saja bahwa Dropdown ini bukan dropdown menu seperti pada menu di atas pada blog ini . Melainkan fungsinya adalah sebagai tanda dan tidak diperlukan link .

Kita mulai membuatnya .

Yang kita akan buat ini menggunakan tag <select> , dengan artian ini merupakan list pilihan , bukan linklist atau daftar link .
Caranya sangat sederhana yaitu kita buat HTML nya seperti ini .
Untuk contoh kita pakai nama kota saja biar lebih simpel .

<select name="selectionField">
  <option value="JABAR" >Jawa Barat -- JABAR </option>
  <option value="JATIM" >Jawa Timur -- JATIM</option>
  <option value="JATENG" >Jawa Tengah -- JATENG</option>
  <option value="KALTIM" >Kalimantan Timur -- KALTIM</option>
</select>

 Nanti jadinya akan seperti dibawah ini .

Jawa Barat -- JABAR Jawa Timur -- JATIM Jawa Tengah -- JATENG Kalimantan Timur -- KALTIM

Untuk memodifikasi tampilannya kita cukup menggunakan Css .
Contoh Css

select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}
label {position:relative}
label:after {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}

Anda bisa mengkreasikan sendiri seperti apa tampilan yang anda inginkan untuk menu Categori ini . Dan tentunya ini hal yang mudah , karena disini kita hanya bermain dengan HTML dan Css tanpa Javascript .

Ya, mungkin itu saja dulu , karena saya juga masih ada kerjaan lainnya , yaitu mengurus halaman blog ini yang masih perlu diperbaiki :D .

Itu saja Cara Membuat Select Box Sederhana . Semoga bisa diterima dan dimengerti .Salam Blogger .

select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}
label {position:relative}
label:after {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}

tfshgfjhfjhvhjvjhfjhfhjfxuyjfjhv

• Demo
• Download

• Demo
• Download