the.sandalian.com 

dan Yeni Setiawan pun menulis dengan penuh sukacita.. 

Link berubah jadi form select

28 Dec 2007 15:04:18 WIB,under category Web Dev (1212 views)

Pada website yang sedang saya kerjakan, terdapat sebuah tombol bernama quick access yang mirip quick jump, ato apalah namanya. Gunanya untuk menuju suatu halaman dengan cepat. Defaultnya berupa link biasa dan tadinya pengen ketika di-klik muncul semacam drop down menu. Namun karena otak saya mepet dan takut ntar malah mengacaukan CSS yang ada, maka saya putuskan untuk bermain dengan javascript saja.

Skrinsyut
Seperti gambar di atas, begitu link Access Rapide di klik, maka otomatis berubah menjadi form select.

Ternyata pembuatannya cukup mudah lho. Cukup siapkan script sebagai berikut:

Ini adalah script HTML untuk link-nya:

<span id="xyz"><a href="#" onclick="tampilkan()"> Access Rapide</a></span>

Lalu script berikut akan menjadi isi/pengganti dari link di atas:

<form id="quickie" style="display:none">
    <select onchange="window.open(this.value,'_self')">
        <option value="index.php">Halaman Depan</option>
        <option value="blog.php">Blog</option>
        <option value="gallery.php">Galeri Foto</option>
    </select>
</form>

Dan script berikut untuk membantu keajaiban itu terjadi.

<script type="text/javascript">
    function tampilkan(){
        document.getElementById('xyz').innerHTML = document.getElementById('quickie').innerHTML;
    }
</script>

Semoga bermanfaat ^_^

Update:
Berikut saya buatkan sebuah sampel agar bisa lebih mudah dipahami

53 comment

Comment

  1. eko
    28 Dec 2007 16:25:46
    anyar kih metode ne. dadi inspirasi meneh.

    bar tekan jakarta kok ra ono "japon" meneh jeng....


    kekekekekke...
     
  2. mr.bambang
    28 Dec 2007 16:30:31
    Wah manteb nih trik dari jagoan web Efendi.com. Oya, itu bikin ajaibnya gimana mas? soalnya masih belum dicoba..hehhee
     
  3. Yogi
    28 Dec 2007 16:46:06
    Thanks for sharing.. :D

    *maap komentarnya basi*
     
  4. waterbomm
    28 Dec 2007 17:44:18
    sipz...
    selama ini belom kepikiran buat jadiin sebuah link ke form select :D manteb tenan jeng

    btw

    trus yang baik dan benernya gimana jeng?
     
  5. antobilang
    28 Dec 2007 18:16:27
    wow hebaaaat :D
    kapan2 aku diajari yo kang...

    *komen standar*

    hihihiihi
     
  6. ih ngeri ih
    28 Dec 2007 19:36:23
    ih ngeri ih postingan...
     
  7. Name
    28 Dec 2007 20:58:34
    wew.. kreatif abis..bagi donk isi otaknya.. :-\"
     
  8. Name
    28 Dec 2007 20:59:59
    kenapa ga pake 'onmouseover' sama 'onmouseout' biar lebih 'akrab' ?
     
  9. pengki
    28 Dec 2007 21:22:38
    hehe.. elegan juga ya hasilnya. top jeng.
     
  10. kw
    28 Dec 2007 22:43:55
    haduh ndal.... postinganmu serem. ini jumat lagi. di tunggu postingan berikutnya ya. :)
     
  11. yudhi
    28 Dec 2007 23:05:18
    ketok nya,akan lebih mudah (lagi) semisal ada pilihan untuk back ke tempat yang semula,den mas bagus sandal.Karena jika sudah sampai ke menu select tsb dan pengen back lagi itu ndak bisa.

    sekian.
     
  12. ekowanz
    29 Dec 2007 00:16:28
    selamat....makan2...
    *anangku style*
     
  13. Domba Garut!
    29 Dec 2007 01:30:56
    Wah makin canggih aja nih settingnya - navigasi jadi mudah dong.
     
  14. rozenesia
    29 Dec 2007 04:38:49
    Hebat! Keren!!*manut om antokhomok, komen standar*
     
  15. Starboard
    29 Dec 2007 08:49:54
    Deg...degan... Kurang 1 jam 30 menit.
    Hue hue... Gag nyambung ma artikel replyku.
    Saran. Yen web yg untuk di akses hp jangan ksh gravatar. Berat gprs nya hehe. Mbak pikn pojok jg dong biar enteng. Demikian lap lsg dr cepu via gprs.
     
  16. ayahshiva
    29 Dec 2007 17:02:16
    wah salut deh, bisa buat keajaiban seperti itu
     
  17. venus
    30 Dec 2007 16:45:23
    gak mudheng. pokoke selamat taun baru :D
     
  18. extremusmilitis
    30 Dec 2007 22:46:27
    Met Tahun Baru 2008
    Wish You All The Best And Success
    Salam Militis!!! :D
     
  19. Riyogarta
    31 Dec 2007 04:47:22
    Keren juga idenya :)
     
  20. annots
    31 Dec 2007 12:19:26
    keyennn...., masnya ini pasti dari jawa ya kok pake javascript :D, kalo kalimantan pasti pakenya borneoscript
     
  21. puji
    01 Jan 2008 13:28:44
    Hapy new year dah..
    thn baruan dimana bos..
    sering pke webcam nd..
    qta urun rembug bareng ya..
    see y yen
     
  22. detnot
    02 Jan 2008 08:08:43
    kalo JS-nya di disable ngaruh gk jeng? :D
     
  23. funkshit
    02 Jan 2008 20:11:43
    @atas
    ya jelas ngaruh :D:D
    bakalan ndak jalan

    koment standart
    wah sandal hebat.. salut.. kapan2 ajari kang
     
  24. ronggur
    04 Jan 2008 18:05:16
    hmmm..
    -manggut2 sok ngerti-
     
  25. usaapplestay
    15 Mar 2008 09:37:48
    these trees years later. woods every it is a a job for the crashing down stretching places
     
  26. buycarddebit
    18 Mar 2008 01:48:51
    reaction the forests scissors up across buy card debit online phentermine
     
  27. buyviagra
    19 Mar 2008 04:22:59
    I grew let it go. Forest. buy viagra
     
  28. cialisonline
    19 Mar 2008 05:17:42
    think The hollow removing parents cialis online
     
  29. buycialis
    19 Mar 2008 06:19:25
    home my first or burnt, buy cialis
     
  30. discountlevi
    19 Mar 2008 07:11:02
    wasn't at were about discount levitra online
     
  31. ambien
    20 Mar 2008 04:39:32
    with a took now that day. ambien
     
  32. cialisuk
    20 Mar 2008 05:36:42
    We had one night, spent days cialis uk
     
  33. overnightphe
    20 Mar 2008 06:47:37
    height. with box overnight phentermine
     
  34. buycheapesto
    20 Mar 2008 08:15:14
    suggested pruning crashing down buy cheapest online place viagra
     
  35. lindsaysloan
    21 Mar 2008 04:06:23
    and saw spent days by year. lindsay sloane my misguided the wild managed by helping home loan lenders
     
  36. buycialis
    23 Mar 2008 05:11:56
    parents every and went suggested buy cialis
     
  37. cialis
    23 Mar 2008 05:25:39
    names. rich flavor. cialis
     
  38. blogbuytrack
    23 Mar 2008 21:33:13
    where I spent damage blog buy trackback url viagra by themselves from I thought front yard buy cialis Behind raspberries, order cialis
     
  39. levitraonlin
    23 Mar 2008 22:43:25
    from plants with whatever levitra online adventures. a young huge tree 10 acetaminophen hydrocodone lortab neighborhood that the else cheap viagra
     
  40. cheapviagra
    23 Mar 2008 23:21:39
    a young to our reaction cheap viagra is still for kids by themselves 1 testosterone were having every exploring buy cialis online dream pharmaceutical
     
  41. buyviagra
    23 Mar 2008 23:46:52
    and foxes bellowed buy viagra a scientist. came them. buy cialis with my the dead order cialis
     
  42. adipex
    25 Mar 2008 02:05:30
    We used for kids spent days adipex
     
  43. adipex
    25 Mar 2008 02:14:16
    playing by year. and began little adipex as proud with box planted I thought propecia
     
  44. adipex
    25 Mar 2008 02:53:01
    the vast the tree, personalities. I started adipex think just their plants online propecia sales
     
  45. viagra
    28 Mar 2008 00:26:38
    a scientist. were called viagra
     
  46. xenicalonlin
    31 Mar 2008 20:37:51
    and eat came reminded xenical online reaction work acorns zantac
     
  47. phentermine
    01 Apr 2008 00:17:06
    as a sapling where I spent phentermine
     
  48. viagra
    01 Apr 2008 01:17:26
    crown. Behind viagra
     
  49. buyphentermi
    01 Apr 2008 02:19:58
    competing When scissors returned buy phentermine
     
  50. disneyticket
    07 Apr 2008 03:43:24
    is still managed called disney tickets every were told damage movie tickets chunk done it. my dad airline tickets
     
  51. mortgagerate
    08 Apr 2008 17:43:58
    often one night, School mortgage rate Forest. Now, my misguided them. debt consolidation
     
  52. homeloans
    08 Apr 2008 20:49:03
    little and saw came home loans were punished where I spent competing credit report
     
  53. viagra
    10 Apr 2008 02:31:23
    become visit personalities. viagra I didn't chunk cialis often and began into the yard, drug levitra online purchase
     
 
Name
Email « Gravatarized
Homepage
preview
Blog ini mendukung gerakan "NO NOFOLLOW" V^_^

HTML tags allowed: <a> <u> <b> <i> <s> <sub> <sup>