Form Box Menu with css

Hei guys. Hari ini saya ingin berbagi sesuatu yang baru dengan Anda - saya menyebutnya jQuery FormBox . Ketika merancang tata letak untuk sebuah situs web ada satu hal bahwa kita sebagai desainer selalu sadar - membuat segalanya lebih mudah bagi pengguna. Tidak peduli apa itu menawarkan situs Anda, Anda masih akan perlu menyeimbangkan antarmuka dengan cara yang membuat sangat mudah bagi pengguna untuk menemukan dan melakukan fungsi inti situs sekitar situs atau layanan Anda, idealnya tanpa harus memuat sebuah sekali berbeda halaman.

Beberapa fungsi umum yang login, mendaftar atau bahkan ulang sandi, namun cukup sering dalam banyak kasus kita masih memberikan pengguna pengalaman lama yang sama - sebuah halaman terpisah untuk login, satu lagi untuk sign-up dan sekali lagi lain jika Anda ' sudah lupa apa rincian login Anda berada. Hari ini saya ingin menyajikan sebuah proyek yang mencoba untuk merampingkan pengalaman - FormBox.

Lihat Demo screencast Unduh

Selama bertahun-tahun salah satu aspek dari desain situs yang tetap cukup konsisten adalah konsep navigasi gigih dalam contoh header.For, jika Anda melihat website seperti Amazon.com atau Facebook, Anda akan melihat bahwa tim desain belakang raksasa ini mencoba yang terbaik untuk pak di akses ke berbagai bidang situs mereka melalui penggunaan menu drop-down di dekat bagian atas halaman.

Ketika digunakan dengan benar, menu drop-down dapat menjadi alat antarmuka pengguna yang sangat kuat dan mereka adalah titik awal untuk bagaimana aku hamil FormBox . Baru-baru ini, website seperti Twitter.com mempopulerkan konsep diri menyelipkan kotak login yang muncul ketika Anda mengklik satu link tapi bagaimana jika kita mengambil dua konsep dan mengintegrasikan mereka? Drop-down menu dan bentuk yang hanya muncul ketika Anda membutuhkannya.

Apa FormBox?.

FormBox adalah jQuery dan CSS3 menu navigasi bertenaga yang mendukung bentuk terintegrasi. Versi disajikan hari ini memiliki form login, sign-up, reset password dan bahkan bentuk kontak, yang semuanya hanya turun ke bawah ketika melayang pengguna atas elemen yang berhubungan menu. Dalam istilah teknis, FormBoxbekerja dengan cara seperti menu tab tidak, memungkinkan Anda untuk beralih di antara beberapa panel dari konten HTML (bentuk) yang hanya muncul ketika pengguna telah menunjukkan minat atau perlu untuk menggunakannya.

Ini streamline antarmuka menghilangkan persyaratan untuk pendaftaran berdedikasi, login dan jenis lain dari halaman yang justru bisa dengan mudah dibuat tersedia dari halaman pengguna tersebut sudah di, tabungan mereka waktu dan menyederhanakan proses dalam satu pergi. Di bawah 2.5KB terkompresi (termasuk dukungan untuk grafis alat-tips), FormBox juga merupakan solusi yang sangat ringan.

Mengapa FormBox Berguna?

Selain perampingan cara pengguna ditawarkan bentuk, dalam beberapa kasusFormBox juga dapat menurunkan penghalang masuk ke beberapa fitur situs Anda mungkin menawarkan ketika datang ke bentuk. Sebagai contoh, jika website Anda saat ini memiliki fitur registrasi dan login, berapa banyak klik apakah itu saat ini membutuhkan waktu bagi pengguna untuk sampai ke halaman tersebut?. Rata-rata biasanya antara 1 dan 2 untuk sebagian besar (dan itu dua kali lipat jika pengguna harus login lagi setelah mendaftar). Bagaimana dengan berapa banyak klik yang dibutuhkan mereka untuk mereset password mereka atau bahkan menghubungi Anda?. Dengan FormBox, tidak ada klik. Anda hanya membawa lebih item seperti 'Login', 'Daftar' atau 'kontak' dan Anda disajikan dengan bentuk itu.

Jika Anda khawatir tentang tidak bisa untuk memberikan pengguna Anda instruksi yang cukup atau umpan balik untuk form input, FormBox menangani itu juga. Anda dapat menampilkan tooltip grafis sangat terlihat setiap kali pengguna melayang di atas sebuah field input jadi jika mereka perlu tahu apa yang panjang atau isi password harus mengandung, kurangnya ruang tidak menjadi masalah. Aku ingin berhenti singkat termasuk built-in validasi form, tapi jika Anda tertarik menggunakan FormBox dalam suatu proyek, itu cukup mudah untuk mengintegrasikan beberapa plugin jQuery yang ada validasi ke dalam kode. Menurut pendapat saya FormBox adalah bukti, elegan sederhana dari konsep cara kita dapat lebih meningkatkan pengalaman pengguna dengan mencoba hal-hal di luar norma.

Bagaimana Apakah Anda Membuat FormBox?

Jika Anda pernah menggunakan sebuah implementasi dari tab didukung oleh jQuery (atau kerangka JS), Anda akan menemukan menggunakan FormBox cukup lurus ke depan. 'Menu' Setiap bentuk individu sebenarnya sebuah panel tab yang dapat dipicu dengan mengklik link menu referensi ID hash itu (misalnya # tab2). Pendekatan ini memungkinkan untuk kedua link menu standar dan bentuk drop-down harus didukung dengan mudah.

Mari kita pertama kita lihat di HTML diperlukan untuk membuat FormBox - seperti yang Anda lihat kita mulai dengan membuat daftar UL / LI link dan melampirkan kelas 'biasa' atau 'dropdown' untuk masing-masing item menu. Selanjutnya, kita mendefinisikan sebuah panel yang berisi HTML FormBox kami / kode Formulir. Demi panjang saya hanya termasuk salah satu contoh ini tetapi jika Anda mengambil source Anda akan dapat melihat setiap panel drop-down didefinisikan sama.

HTML

melihat polos copy ke clipboard cetak ?

1.   < div  id = "tab" >  

2.   < ul  id = "tabMenu" >  

3.   < li  class = "biasa" > < a  href = "home.html" > Rumah </ a > </li >  

4.   < li  class = "dropdown" > < a  href = "# tab1" > Login </ a > </li >  

5.   < li  class = "dropdown" > < a  href = "# tab2" > Sign-Up </ a > </li >  

6.   < li  class = "dropdown" > < a  href = "# tab3" > Password Lupa </a > </ li >  

7.   < li  class = "biasa" > < a  href = "home.html" > Harga </ a > </li >  

8.   < li  class = "biasa" > < a  href = "home.html" > Tentang </ a > </li >  

9.   < li  class = "dropdown" > < a  href = "# tab4" > Kontak </ a > </li >  

10.  < li  class = "pinggiran" >  </ li >  

11.  </ ul >  

12.  </ div >  

13.    

14.  < div  id = "TabContainer" >  

15.  < ul  id = "tabPanes" >  

16.  < li  id = "tab1" >  

17.     

18.  < div  class = "formcontainer" >  

19.  < div  class = "text" > < label  untuk = "username" > Nama Pengguna</ label >  

20.  < masukan  jenis = "text"  alt = "Nama pengguna yang Anda pilih saat sign-up untuk  

21.  situs ".  id = "username"  nama = "username" > </ div >  

22.  < div  class = "text" > < label  untuk = "password" > Kata Sandi </label >  

23.  < masukan  jenis = "text"  alt = "ini password yang Anda pilih saat sign-up untuk  

24.  situs ".  id = "password"  nama = "password" > </ div >  

25.  < div  class = "text" >  

26.  < masukan  jenis = "checkbox"  id = "rememberMe"  nama ="rememberMe" >  Ingat Saya </ div >  

27.  </ div >  

28.  < center >  

29.  < div  id = "bluebutton"  kelas = "blok" > < tombol > Masuk </tombol > </ div >  

30.  </ center >  

31.     

32.  </ li >  

33.  </ ul >  

34.  </ div >  

JavaScript

JQuery digunakan dalam FormBox kekuatan drop-down menu, animasi, alat-tips dan kembali posisi. Di bawah ini Anda dapat menemukan fungsi yang paling penting yang digunakan dalam demo ini atau alternatifnya Anda dapat mengambil sumber-sumber untuk melihat kode secara penuh.

Secara default, FormBox bekerja sebagai antarmuka berbasis melayang-layang.Melayang di atas sebuah item menu dengan drop-down di atasnya menampilkan menu. Anda tentu saja dapat mengubah perilaku ini dengan mengubah tabMenuLinks.hover () ke dalam klik () fungsi dan mendefinisikan bagian yang terpisah dari CSS atau jQuery untuk menutupi penambahan kelas aktif untuk link menu Anda.Bawah ini akan memberikan semua yang anda butuhkan untuk memulai dengan baik:

melihat polos copy ke clipboard cetak ?

1.   $ (Window). Load ( fungsi () {  

2.   var  tabs = $ ( "# tab" );  

3.   var  tabPanesContainer = $ ( "ul # tabPanes" );  

4.   var  tabPanesAll = tabPanesContainer.find ( "li" ) css (. "posisi",  "absolut" );  

5.   var  tabMenuLinks = $ ( "ul # tabMenu dropdown." );  

6.   var  regularLinks = $ ( "ul # tabMenu biasa." );  

7.   var  dropDownSpeed ​​= 200;  

8.   var  dropUpSpeed ​​= 200;  

9.   var  menuHeight =  '240px ' ;  

10.  / * Link menu Handle - menampilkan bentuk panel di hover * /  

11.  tabMenuLinks.hover ( fungsi ()  

12.  {  

13.      var  thisMenuItem = $ ( ini );  

14.      / * Mendapatkan offset dari produk ini sehubungan dengan halaman * /  

15.      var  thisMargin = thisMenuItem.offset () meninggalkan.;  

16.      / * Mendapatkan offset dari bar navigasi dalam hal ke halaman * /  

17.      var  . tabsOffset = tabs.offset () meninggalkan;  

18.      var  thisIndex = thisMenuItem.index ();  

19.      thisMargin = Math.floor (thisMargin - tabsOffset);  

20.      / * Memperbaiki * offset /  

21.      var  thisOffset = thisMargin - 52;  

22.      tabPanesContainer.css ( 'margin-left' , thisOffset);  

23.      / * Mulai animateing drop down * /  

24.      tabPanesContainer.stop (). bernyawa ({  

25.          tinggi: menuHeight  

26.      }, DropDownSpeed);  

27.      / * Menghapus kelas aktif dari item menu lainnya * /  

28.      tabMenuLinks.removeClass ( 'activeTab' );  

29.      / * Menambahkan kelas aktif untuk item menu saat ini * /  

30.      thisMenuItem.addClass ( 'activeTab' );  

31.      / * Mendeteksi dan beralih ke panel bentuk saat ini * /  

32.      var  thisHash = thisMenuItem.find ( "a" ) attr (. 'href' );  

33.      var  tabClicked = tabPanesAll.filter (thisHash);  

34.      tabClicked.appendTo (tabPanesContainer) menunjukkan ().;  

35.      kembali  palsu ;  

36.  },  fungsi () {  

37.     $ ( ini ). stop ();  

38.  });  

39.  / * Tutup menu yang terbuka saat ini * /  

40.  fungsi  closeMenu ()  

41.  {  

42.  tabMenuLinks.removeClass ( 'activeTab' );  

43.      tabPanesContainer.stop (). bernyawa ({  

44.          tinggi:  '0 px '  

45.      }, DropUpSpeed);  

46.  }  

47.  / * Handle non-tab menu link * /  

48.  regularLinks.hover ( fungsi ()  

49.  {  

50.      tabPanesContainer.stop (). bernyawa ({  

51.          tinggi:  '0 px '  

52.      });  

53.      tabMenuLinks.removeClass ( 'activeTab' );  

54.      $ ( ini ) addClass (. 'activeTab' );  

55.  },  fungsi () {  

56.      $ ( ini ) removeClass (. 'activeTab' );  

57.  });  

CSS

Demo FormBox saya cukup grafis di alam tetapi apa yang kita ingin fokus pada adalah CSS untuk drop-down panel tab dan menu FormBox sendiri (div disebut 'tab').Dalam sumber-sumber lengkap Anda dapat menemukan kelas digunakan untuk mengaktifkan link biasa di antarmuka tab serta drop-down. Anda juga dapat menemukan kode ke CSS3 tombol diangkat dalam paket ini.

melihat polos copy ke clipboard cetak ?

1.   # Tab  {  

2.   lebar : 604px ;  

3.   tinggi : 47px ;  

4.   background-image : url ( '../images/wooden8.png' );  

5.   -Webkit-box-shadow:  0px  5px  6px  RGBA (0,0,0,0.8);  

6.   -Moz-box-shadow:  0px  5px  6px  ;  

7.   box-shadow:  0px  5px  6px  ;  

8.   -Webkit- border -radius:  5px ;  

9.   -Moz- border -radius:  5px ;  

10.  perbatasan -radius:  5px ;  

11.  font-family : Arial ;  

12.  font-size : 14px ;  

13.  Margin : 0  auto ;  

14.  }  

15.  ul # tabPan es  

16.  {  

17.      margin-left : 52px ;  

18.      posisi : relatif ;  

19.      lebar : 227px ;  

20.      meluap :  tersembunyi ;  

21.      jelas : keduanya ;  

22.      font-family : Arial ;  

23.      daftar ala-jenis :  tidak ada ;  

24.      margin-top : - 0px ;  

25.      posisi : absolut ;  

26.  }  

27.  ul # tabPan es li  

28.  {  

29.      lebar :  227px ;  

30.  }  

31.  ul # tabPan es li # tab1 , li # tab2 , li # tab3 , li # tab4  

32.  {  

33.      tinggi : 227px ;  

34.      margin-top : - 30px ;  

35.      margin-kiri : - 3px ;  

36.      display : none ;  

37.      text-shadow :  # ffffff  0px  1px  0px ;  

38.       background-color : # C9AA7C ;  

39.       -Moz- border -radius-bottomright:  5px ;  

40.       -Moz- border -radius-bottomleft:  5px ;  

41.       -Webkit- border-bottom - kanan kanan -radius: 5px ;  

42.       -Webkit- border-bottom - kiri -radius: 5px ;  

43.       background-image : url ( '../images/wood3.jpg' );  

44.       background-repeat : no-repeat ;  

45.      -Webkit-box-shadow:  0px  3px  4px  RGBA (0,0,0,0.6);  

46.       -Moz-box-shadow:  0px  3px  4px  ;  

47.       box-shadow:  0px  3px  4px  ;  

48.  }  

Para Tooltips - JavaScript

Jika Anda punya kesempatan untuk menonton saya jQuery Plugin Di bawah 5 Menitscreencast, bagian berikutnya dari kode akan terlihat sedikit akrab. Ini adalah jQuery yang kekuatan tooltips ditemukan di FormBox. Ketika pengguna melayang di atas sebuah field input, kode memeriksa apakah sebuah tag alt telah ditetapkan untuk itu.Jika memiliki, kita tambahkan tooltip ke DOM dan kemudian posisi itu relatif terhadap elemen pengguna telah melayang di atas. Ketika melayang pengguna dari elemen, kita cukup menghapus tooltip dari stack kami.

Sebuah pendekatan alternatif untuk ini (yang mungkin memangkas beberapa milidetik dari waktu layar) menggunakan elemen gigih tunggal untuk objek tooltip Anda yang kemudian dapat menyembunyikan / re-posisi / mengisi dan menunjukkan sebagai dan bila diperlukan. Kedua teknik ini menggunakan beberapa kode kode yang sama dan potongan kode di bawah ini mencakup fungsi ini.

melihat polos copy ke clipboard cetak ?

1.   $ ( 'input' ). hover ( fungsi ()  

2.   {  

3.   var  thisItem = $ ( ini );  

4.   var  msgTip = thisItem.attr ( 'alt' );  

5.   jika (msgTip.length)  

6.   {  

7.     $ ( 'body' ) append (. '\' + msgTip + ' \ '); 

8.           var pos = thisItem.offset (); 

9.           var lebar = thisItem.width (); 

10.          $ ("# MenuTooltip") css ({"kiri". (Pos.left 

11.  + 115) + "px", "top": pos.top - 90 + "px"}); 

12.          $ ("# MenuTooltip") fadeIn ('. lambat '); 

13.  } 

14.  }, Function () 

15.  { 

16.    $ (' div # menuTooltip ') menghapus ().;  

17.  });  

Demo dan Download
Dan hanya itu!. Jika Anda ingin mendownload source untuk FormBox atau periksa demo, silahkan lihat di bawah untuk link. FormBox kompatibel dengan FireFox, Chrome, Safari dan Internet Explorer 6.0 +.

Lihat Demo screencast Unduh