HTML5, CSS3 មីនុយ (ពណ៌​ខៀវ) ប្រើ​សម្រាប់​ប្លុកករ

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

   លោក​អ្នក​អាច ​ចុច​ទីនេះ ដើម្បី​ចូល​ទៅ​ប្រើ​ដោយ​ផ្ទាល់​នូវ មីនុយ​ពណ៌​ខៀវ​ដ៏​ស្រស់​ស្អាត​នេះ។ បន្ទាប់​ពី​លោក​អ្នក​បាន​មើល​សាក​ល្បង​រួច​ហើយ លោក​អ្នក​អាច​នឹង​ពេញ​ចិត្ត ហើយ​សូម​បន្ត​ទៅ​មើល​អំពី​របៀប​ដាក់​បន្ត​ទៀត ដោយ​ខ្ញុំ​សូម​រៀប​រាប់​តាម​ជំហានៗ ខាង​ក្រោម​នេះ​បាទ។
»»» មើល​ផង​ដែរ​នូវ ៖ របៀប​ដាក់​កាំ​ជ្រួច​ឲ្យ​បាញ់​បង្ហោះ​ និង​ផ្ទុះ​នៅ​ក្នុង​ប្លុកករ

៙ របៀប​ដាក់​ HTML5, CSS3 មីនុយ (ពណ៌​ខៀវ) ៖ 
- កត់ត្រា​ចូល​ (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 ហើយ)

កូដ​HTML5, CSS3 មីនុយ (ពណ៌​ខៀវ) ដែល​ត្រូវ​ដាក់​ក្នុង HTML/JavaScript

<style>
#org_menu {
    position: relative;
    margin: 0 auto;
    clear: both;
    width: 960px;
    }
#org_menu:before {
    content: "";
    position: absolute;
    left: -10px;
    bottom: -9px;
    z-index: 1;
    border: 10px solid transparent;
    border-right-color: #4285F4;
}
#org_menu ul {
    display: block;
    position: relative;
    z-index: 2;
    padding: .2em 30px;
    margin-right: -2em;
    list-style: none;
    background: #446CB3;
    font-family: 'Khmer OS Bokor', serif;
    font-weight:bold;
    font-size: 16px;
    line-height: 1;
    color: white;
    text-transform: capitalize;
    border-radius: 0 9999px 9999px 0;
    box-shadow: 0 2px 8px -3px rgba(0,0,0,.5),
                0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;;
}
#org_menu ul:after {
    content: "";
    clear: both;
    display: block;
    visibility: hidden;
}
    #org_menu li {
        float: left;
        position: relative;
    }
 
        #org_menu a {
            display: block;
            padding: .8em 1.4em;
            text-decoration: none;
            text-shadow: 1px 1px 1px rgba(0,0,0,.3);
            color: white;
            transition:.3s box-shadow, .3s padding;
            border-radius: 9999px;
        }
     
        #org_menu a:hover,
        #org_menu a:active {
            background: rgba(0,0,0,.1);
            color: #4285F4;
            box-shadow: 1px 1px 5px rgba(0,0,0,.3) inset;
        }
     
        #org_menu a:active {
            background:white;
            color: #eee;
            padding: .5em .6em .3em 1em;
            text-shadow: 1px 1px 0 rgba(0,0,0,.4);
            box-shadow: 10px 6px 1px #c50 inset;
        }
    #org_menu:hover {
        transform: rotate(720deg);
    }
</style>

<nav id="org_menu">
<ul>
<li ><a href="#" title="Home">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Speaking</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">Interviews</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">About me</a></li>
</ul>
</nav>

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

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

Tweet