បង្កើត​មីនុយ​ទម្លាក់​នៅ​ក្នុង​ប្លុកករ (មីនុយ CSS បែប​សាមញ្ញ)

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

   ទោះ​ជា​យ៉ាង​ណា​ក្ដី មិន​អាច​មាន​គ្រប់​តែ​ប្លុក​សុទ្ធ​តែ​ត្រូវ​ការ​ប្រើ​មីនុយ​ទម្លាក់​ដែរ អាច​ដោយ​សារ​តែ​អត្ថបទ​របស់​ប្លុក​គេ​មិន​សូវ​ច្រើន ឬ​គ្មាន​ចំណាត់​ក្រុម​ច្រើន។ ជាក់​ស្ដែង​ដូច​ប្លុក​ទីងមោង​នេះ​​តែ​ម្ដង គឺ​ខ្ញុំ​មិន​ប្រើ​មីនុយ​ទម្លាក់​ទេ ព្រោះ​មិន​សូវ​មាន​ចំណាត់​ក្រុម​ច្រើន។ :D មុន​ឈាន​ចូល​ដល់​ការ​អនុវត្ត លោក​អ្នក​ត្រូវ​មើល​ពី​លទ្ធ​ផល​របស់​ខ្ញុំ​សិន។ [ចុច​ទីនេះ] ដើម្បី​មើល​ម៉ូត​មីនុយ​ទម្លាក់​នេះ និង​សូម​បន្ត​ទៅ​មើល ការ​អនុវត្ត​ដូច​ខាង​ក្រោម​នេះ​បាទ!។

»»» មើល​ផង​ដែរ​នូវ ៖ HTML5, CSS3 មីនុយ (ពណ៌​ខៀវ) ប្រើ​សម្រាប់​ប្លុកករ

៙ បង្កើត​មីនុយ​ទម្លាក់​នៅ​ក្នុង​ប្លុកករ (មីនុយ CSS បែប​សាមញ្ញ) ៖ 
- កត់ត្រា​ចូល​ (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>
/**www.Tingmoung.com Navgation bar **/
#mbwnavbar {
    background: #464849;
    width: 960px;
    color: #FFF;
    margin: 0px;
    padding: 0;
    position: relative;
    border-top:0px solid #960100;
    height:35px;
}
#mbwnav {
    margin: 0;
    padding: 0;
}
#mbwnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbwnav li {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left:1px solid #333;
    border-right:1px solid #333;
    height:35px;
}
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
   color: #FFF;
   display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    
}
#mbwnav li a:hover, #mbwnav li a:active {
    background: #028490;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 10px 12px;
            
}
#mbwnav li {
    float: left;
    padding: 0;
}
#mbwnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbwnav li ul a {
    width: 140px;
}
#mbwnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul {
    left: -999em;
}
#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
    left: auto;
}
#mbwnav li:hover, #mbwnav li.sfhover {
    position: static;
}
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
    background: #028490;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;
 
}
#mbwnav li li a:hover, #mbwnavli li a:active {
    background: #70b6bd;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
}
</style>

<div id='mbwnavbar'>
      <ul id='mbwnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Contact</a>
        </li>
         <li>
           <a href='#'>Sitemap</a>
            <ul>
                <li><a href='#'>Sub Category1</a></li>
                <li><a href='#'>Sub Category2</a></li>
            </ul>
        </li>
      </ul>
    </div>

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

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

Tweet