CSS មីនុយ ជា​មួយ​នឹង ICON Hover Effect សម្រាប់​ដាក់​ក្នុង​ប្លុក

   សួស្ដី!​... ថ្ងៃ​នេះ ខ្ញុំ​បង្ហាញ​ទាក់​ទង​ទៅ​នឹង មីនុយ​របស់​ប្លុក​ទៀត​ហើយ។ កាល​ពី​អត្ថបទ​មុនៗ ខ្ញុំ​ក៏​ធ្លាប់​បាន​បង្ហាញ​ជា​ច្រើន​រួច​មក​ហើយ ទាក់​ទង​ទៅ​នឹង មីនុយ​ជា​ច្រើន​ប្រភេទ​ផ្សេងៗ​គ្នា។ យ៉ាង​ណា ថ្ងៃ​នេះ មីនុយ​មាន​លក្ខណៈ​ស្អា​ប្លែក​មួយ​ទៀត​ហើយ ដែល​មើល​ទៅ​មាន​លក្ខណៈ​រស់​រវើក។ វា​មាន​ពណ៌​ចម្រុះ (ត្រួយ​ចេក បៃ​តង....) ហើយ​នៅ​ពេល​ដែល​យើង​យក​ម៉ៅ​ដាក់​ពី​លើ​វា វា​នឹង​បង្ហាញ​ជា​ Icon នីមួយៗ ដែល​ត្រូវ​នឹង ចំណង​ជើង​នៃ មីនុយ​នៅ​មួយៗ​នោះ។

   បញ្ជាក់ ៖ ICON ដែល​លោក​អ្នក​ដាក់​ម៉ៅ ពី​លើ ហើយ​លោត​ចេញ​រូប​ភាព​នោះ លោក​អ្នក​អាច​ប្ដូរ​វា​បាន ដោយ​ Edit នៅ​ត្រង់​កូដ CSS។ គួរ​អាន​ផង​ដែរ​នូវ ៖​ របៀប​ Upload ​រូប​ភាព​នៅ​ក្នុង​ប្លុកករ ដើម្បី​យក Link មក​ប្រើ​ប្រាស់

មើល​គម្រូ​ខាង​ក្រោម​នេះ


៙ CSS មីនុយ ជា​មួយ​នឹង ICON Hover Effect សម្រាប់​ដាក់​ក្នុង​ប្លុក ៖ 
- កត់ត្រា​ចូល​ (Log In) ​ក្នុង​គណនី​ Blogger របស់​លោក​អ្នក​​ជា​មុន​សិន។
- ​ចូល​ទៅ​កាន់​ផ្នែក Layout >> រួច​ចុច​លើ​តំណ​​អក្សរ Add a Gadget នៅ​ទីតាំង​ណាមួយ (ឧទាហរណ៍​សូម​មើល​រូប​ខាង​ក្រោម)
- រមូរ​​ចុះ (scroll down) រក​មើល gadget ដែល​មាន​ឈ្មោះ​ថា HTML/JavaScript រួច​ចុច​​លើ​វា​ដើម្បី​បើក (មើល​រូប​ខាង​ក្រោម​នេះ)
- ចម្លង​កូដ​​ខាង​ក្រោម​​នេះ យក​ទៅ​បិទភ្ជាប់​ក្នុង​ HTML/JavaScript Gadget ហើយ​ចុច​ប៊ូតុង Save
* បន្ថែម ៖ ចំពោះ​ឈ្មោះ widget មិន​ចាំ​បាច់​ដាក់​​ទេ។
** ពេល​ចុច Save ហើយ សូម​ចាប់​ទាញ​វា​ទៅ​ដាក់​ជំនួស កន្លែង Page ហើយ អាច​ Remove Page ចោល​បាន (របៀប Remove Page ចោល គឺ​គ្រាន់​តែ​ចុច​ពាក្យ Edit នោះ​លោក​អ្នក​នឹង​ឃើញ ប៊ូតុង Remove ហើយ)
កូដ ដែល​ត្រូវ​ដាក់​ក្នុង HTML/JavaScript
<style>
#btrix-nav{height:87px;list-style:none;margin:10px auto;overflow-y:hidden;width:624px}
#btrix-nav li{float:left}
#btrix-nav li a{border-bottom:1px solid #555;
border-top:1px solid #bbb;color:#FFF;display:block;height:61px;margin-top:24px;text-align:center;text-decoration:none;
width:120px}#btrix-nav li a span.aname{color:#fff;cursor:pointer;font:bold 17px/61px Arial;position:relative;text-shadow:1px 1px 1px rgba(0,0,0,0.5);text-transform:uppercase;top:0;transition:top .5s ease}#btrix-nav li a img{position:relative;top:0;transition:top .5s ease}#btrix-nav li a:hover{cursor:pointer}#btrix-nav li a:hover img{top:-85px}#btrix-nav li a:hover .aname{top:85px}#btrix-nav li:nth-child(1) a{background:#3eb006;border-left:1px solid #bbb;border-radius:5px 0 0 5px}#btrix-nav li:nth-child(2) a{background:#9bc704}#btrix-nav li:nth-child(3) a{background:#0dc3ff}#btrix-nav li:nth-child(4) a{background:#51a2ec}#btrix-nav li:nth-child(5) a{background:#6e3cab;border-radius:0 5px 5px 0;border-right:1px solid #555}
</style>

<div id="btrix-nav">
<li><a href="#"><span class="aname">Homes</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4byXRyeXrcmITVBMMfTAmFDkEM8Ksx8scw3hvqx2E9KbfYqLOUyuFmWE10LABlYDw4xCBw1fMT2mM3rDNKfP5taPCkF8swmTsBkR9Aj2W5hzh5kQFAcjgqs4bw5vkJ3FXg14tEEJeuC8/s1600/btrix-home.png" style=""></a></li>
<li><a href="#"><span class="aname">Download</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCcpFyJkiDPb83s6SEskcjX17yiAav8lhscuRK9QmFI3N5h3MUdIeA5eSPMizXFSeYxiLjNj3r9fU8RpnyS3WLJMmTKxucwSrxppgJBQ5Rl9Z-_boTgS-eg0Xg0XAukUFErc-CUVgLifY/s1600/btrix-download.png" style=""></a></li>
<li><a href="#"><span class="aname"> MySql</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpfi7DINbO7kbkjCUl0yPHOdlRIVQp5hfOioOYjfzqHdRi61yPCDqEoqsuPOtXOTpyVkujjoRqCc4Zgg2vXvTMui1Oq-yot_Hrhu6E51CMpfxbHr01z8HxgTti2EvpV9q_fuPWqKO6qQ/s1600/btrix-mysql.png" style=""></a></li>
<li><a href="#"><span class="aname"> Html5</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcicoXq7LNENPDP8sGXGYSsuvwdvpYMmWczoJ9sbJffcMvoEdUUBz_xgn4gMPOeCEYhrooaqEmaykefKhyqHtEVrwKhQVvgHeIXJfPiHH4cgGFgnTzW6Uu8CP_13BlN6JtGP9kfh55hw/s1600/Btrix-html.png" style=""></a></li>
<li><a href="#"><span class="aname">Contact</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9FA0lnZMC-iXB3i1RHQ3-nqjDMuhG83KMgQsIWuAGw653J4R2cohyphenhyphen800_FPQDlVCvhSJPQFTEMegqhTSbXzjBpzZ20YQBSRabSmQeleTsdSU1gwqbhYajltjoAuBbkqMxioZvYsUeck/s1600/btrix-contact.png" style=""></a></li>
</div>

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

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

2 Responses to "CSS មីនុយ ជា​មួយ​នឹង ICON Hover Effect សម្រាប់​ដាក់​ក្នុង​ប្លុក"

  1. ពិតជាឡូយមែន និត :D

    ReplyDelete
    Replies
    1. អរគុណ! ដែល​បាន​មក​មើល​ប្លុក​ខ្ញុំ :D

      Delete