មីនុយ​មាន​ចលនា សម្រាប់​ប្រើ​នៅ​ចំហៀង​នៃ​ប្លុក

   សួស្ដី​សារ​ជា​ថ្មី​ជា​មួយ​នឹង​ប្លុក ក្រោយ​ពេល​ដែល​ខ្ញុំ​បាទ​បាន​បាត់​មុខ​មួយ​រយៈ ដោយ​សារ​បញ្ហា​មួយ​ចំនួន ក៏​ដូច​ជា​កុំព្យូទ័រ​ខូច​ផង​ដែរ។ ទោះ​បី​បែក​ប៉ុន្មាន​ថ្ងៃ​ក៏​ដោយ ក៏​មិន​មាន​គន្លឹះ​អ្វី​ឲ្យ​ប្លែក​ណាស់​ណា​ទេ តែ​ខ្ញុំ​បាន​សាក​ល្បង​កែ​មីនុយ​ចំហៀង​ប្លុក​មួយ ដែល​គេ​លេង​កូដ CSS មក​ជា icon នៃ​ប្លុក​របស់​ខ្ញុំ​វិញ។ មីនុយ​នេះ ​ខ្ញុំ​បាន​ហៅ​វា​ថា ជា​មីនុយ​សម្រាប់​ប្រើ​នៅ​ចំហៀង​ប្លុក​នៃ គឺ​វា​មាន​លក្ខណៈ​សមរម្យ សម្រាប់​ប្រើ ដែល​មាន​ទាំង​ចលនា និង​អាច​ប្ដូរ​បាន​ទាំង​ icon ផង​ដែរ។

   នៅ​ពេល​អ្នក​យក​កូន​កណ្ដូរ​ទៅ​ដាក់​ពី​លើ​វា វា​នឹង​មាន​ចលនា​យ៉ាង​រស់​រវើក។ កូដ​របស់​មីនុយ​នៃ​មិន​ច្រើន​ទេ ហើយ​ងាយ​ស្រួល​ក្នុង​ការ​កែ ដើម្បី​តម្រូវ​ទៅ​តាម​ម៉ូត​នៃ​ប្លុក​របស់​លោក​អ្នក​ផង​ដែរ។

*** សូម​មើល​គម្រូ និង​វិភាគ​កូដ​តាម​ផ្នែក HTML | CSS |=> Result (លទ្ធផល) 

See the Pen OPeVGb by Chansanith Um (@Nith) on CodePen.

៙ របៀប​ដាក់ 3D Flip Effect នៅ​ក្នុង​ប្លុក​ ៖
- កត់ត្រា​ចូល​ (Log In) ​ក្នុង​គណនី​ Blogger របស់​លោក​អ្នក​​ជា​មុន​សិន។
- ​ចូល​ទៅ​កាន់​ផ្នែក Layout >> រួច​ចុច​លើ​តំណ​​អក្សរ Add a Gadget នៅ​ទីតាំង​ណាមួយ (ឧទាហរណ៍​សូម​មើល​រូប​ខាង​ក្រោម)

- រមូរ​​ចុះ (scroll down) រក​មើល gadget ដែល​មាន​ឈ្មោះ​ថា HTML/JavaScript រួច​ចុច​​លើ​វា​ដើម្បី​បើក (មើល​រូប​ខាង​ក្រោម​នេះ)

- ចម្លង​កូដ​ខាង​ក្រោម​​នេះ យក​ទៅ​បិទភ្ជាប់​ក្នុង​ HTML/JavaScript ។ 
- បន្ថែម ៖ ចំពោះ​ឈ្មោះ widget ​លោក​អ្នក​​ដាក់ ឬ​មិន​បាច់​ដាក់​ក៏​បាន។

កូដ​​ដែល​ត្រូវ​ដាក់​ក្នុង HTML/JavaScript

<style>
#v-menu {
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
#v-menu {
    width: 275px;
}
#v-menu ul {
    list-style: none;
    text-indent: 0px;
}
#v-menu li {
    margin-top: 0px;
    border-bottom: 1px solid #414141;
}
#v-menu a {
    font-family:Verdana, Geneva, sans-serif;
    font-size: 15px;
    font-weight:bold;
    font-variant: inherit;
    text-transform:uppercase;
    padding: 0px;
    color:#CCC;
    display: block;
    padding: 13px 50px;
    height: 26px;
    line-height: 26px;
    text-decoration: none;
    background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6lJLS6amO4iMzSZjFx_ugF7a9hlCmjci0UWpi0_XHEUFetUpHkojDaey-JLkorvy07_N9o521Rl6PM5wgTlkQ0DKe5BtdYGUSSr-6iK5Chc4HjMoNEqV1SqWYkXep1Vohp4qUkVV_rjY/s1600/tm-menu+icon.png) no-repeat;
    text-shadow: 1px 1px 1px #111;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
#v-menu a:hover {
    background: #5e5e5e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJkO8ZZjSVABEcnTJJOfaNZUgqSRksJE41Fpy6jubjMq842aNRmhjfib5k6xubn1GX8OgwlhqdlvATaELKV3VEVEseaxnHXaqFtSuFiFG_E6SsKgENff5amoKNmu5JsPMYabqMF_DtoU/s1600/tm-menu+icon+hover.png) no-repeat;
    font-size: 14px;
    padding: 13px 60px;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
 
}
#v-menu a:visited {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJkO8ZZjSVABEcnTJJOfaNZUgqSRksJE41Fpy6jubjMq842aNRmhjfib5k6xubn1GX8OgwlhqdlvATaELKV3VEVEseaxnHXaqFtSuFiFG_E6SsKgENff5amoKNmu5JsPMYabqMF_DtoU/s1600/tm-menu+icon+hover.png) no-repeat; 
}
#v-menu a:active {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJkO8ZZjSVABEcnTJJOfaNZUgqSRksJE41Fpy6jubjMq842aNRmhjfib5k6xubn1GX8OgwlhqdlvATaELKV3VEVEseaxnHXaqFtSuFiFG_E6SsKgENff5amoKNmu5JsPMYabqMF_DtoU/s1600/tm-menu+icon+hover.png) no-repeat; 
}</style>
<div id='v-menu'>
<ul>
<li><a href="#">Page</a></li>
<li><a href="#">Tingmoung</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Learning</a></li>
<li><a href="#">Questions</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

*** សម្គាល់​ជា​សំខាន់ ៖
- លោក​អ្នក​ត្រូវ​​ផ្លាស់​ប្តូរ​ពាក្យ ៖ " Page, Tingmoung,...." ទៅ​ជា​ពាក្យ​​​ដែល​លោក​អ្នក​ពេញ​ចិត្ត។
- ចំពោះ​ សញ្ញា​ទ្រុង​ជ្រូក ( # ) ជា​កន្លែង​បិទ​ភ្ជាប់ Link URL របស់​អ្នក។
* អរគុណ ជួប​គ្នា​នៅ​គន្លឹះ​បន្ទាប់​មក​ទៀត។...

អត្ថបទស្រដៀងគ្នា:

Tweet