មីនុយ​ទម្លាក់ (ពណ៌ខ្មៅ) សម្រាប់​ប្រើ​នៅ​ចំហៀង​ប្លុក

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

   ជា​ដំបូង​មុន​នឹង​អនុវត្ត លោក​អ្នក​គួរ​ [ចុច​ទីនេះ] ដើម្បី​ចូល​មើល​គម្រូ​សាក​ល្បង​របស់​ទីងមោង។ មីនុយ​ទម្លាក់​នេះ​មាន​លក្ខណៈ​ប្លែក គឺ​មាន​ពណ៌​ខ្មៅ លាយ​ប្រផេះ​ព្រាលៗ ដែល​មាន​ភាព​ស្រស់​ស្អាត សម​ជា​មួយ​នឹង​ប្លុក​របស់​អ្នក​គ្រប់​ពណ៌ គ្រប់​សណ្ឋាន។ សូម​មើល​របៀប​ដាក់​កូដ។
»»» មើល​ផង​ដែរ​នូវ ៖ HTML5, CSS3 មីនុយ (ពណ៌​ខៀវ) ប្រើ​សម្រាប់​ប្លុកករ

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

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

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

កូដ​មីនុយ​ទម្លាក់ (ពណ៌ខ្មៅ)

<style type="text/css">
.avdhoot-box {
display:inline-block;
font:normal bold 12px Arial,Sans-Serif;
position:relative;
width:300px;
background-color:#111;
text-align:left;
/* CSS3 Browser */
background-image:-webkit-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:-moz-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:-ms-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:-o-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
/* IE only */
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111');
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
-moz-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
}
.avdhoot-box:before,
.avdhoot-box:after {
content:"";
display:block;
width:0;
height:0;
border:3px solid transparent;
border-width:5px 3px;
border-bottom-color:#999;
position:absolute;
top:25%;
right:5px;
z-index:4;
}
.avdhoot-box:after {
border-color:#999 transparent transparent;
top:auto;
bottom:25%;
}
.avdhoot-box input {
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
height:100%;
opacity:0;
z-index:10;
cursor:pointer;
}
.avdhoot-box label {
display:block;
line-height:45px;
color:rgba(255,255,255,.5);
padding:0 15px;
-webkit-transition:all 0s ease-out;
-moz-transition:all 0s ease-out;
-ms-transition:all 0s ease-out;
-o-transition:all 0s ease-out;
transition:all 0s ease-out;
}
.avdhoot-box label:before {
content:attr(data-default);
}
.avdhoot-box label:after {
content:"";
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
border-left:1px solid rgba(0,0,0,.4);
-webkit-border-radius:0 7px 7px 0;
-moz-border-radius:0 7px 7px 0;
border-radius:0 7px 7px 0;
-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
}
.avdhoot-box input:hover + label {
color:white;
}
.avdhoot-box input:hover + label:after {
background-color:rgba(255,255,255,.04);
}
.avdhoot-box ul {
margin:0 0;
padding:0 0;
position:absolute;
top:100%;
left:14px;
right:14px;
background-color:#222;
border:1px solid #111;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
visibility:hidden;
opacity:0;
z-index:99;
}
.avdhoot-box li {
margin:0 0;
padding:0 0;
list-style:none;
float:left;
width:50%;
display:inline;
}
.avdhoot-box a {
display:block;
position:relative;
color:#999;
text-decoration:none;
text-shadow:0 0 2px black;
line-height:30px;
border-top:1px solid #111;
border-right:1px solid #111;
padding:0 15px 0 32px;
-webkit-box-shadow:inset 0 0 0 1px #333;
-moz-box-shadow:inset 0 0 0 1px #333;
box-shadow:inset 0 0 0 1px #333;
/* Opera note: An unstable box shadow will appear if you don't define the border radius less than 1 pixel. Weird! */
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.avdhoot-box a:nth-child(even) {
border-right-width:0;
}
.avdhoot-box a:before {
content:"";
display:block;
width:16px;
height:16px;
position:absolute;
top:7px;
left:7px;
background-color:transparent;
background-repeat:no-repeat;
background-position:50% 0;
}
.avdhoot-box a:hover:before {
background-position:50% 100%;
}
.avdhoot-box a:hover {
background-color:rgba(0,0,0,.2);
color:#FE6602;
-webkit-transition: color .25s linear .1s;
transition: color .25s linear .1s;
}
/* On click, then... */
.avdhoot-box input:checked + label {
color:rgba(255,255,255,.4);
-webkit-transition-duration:.4s;
-moz-transition-duration:.4s;
-ms-transition-duration:.4s;
-o-transition-duration:.4s;
transition-duration:.4s;
}
.avdhoot-box input:checked + label:before {
content:attr(data-focus);
}
.avdhoot-box input:checked + label:after {
background-color:rgba(0,0,0,.2);
-webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
}
.avdhoot-box input:checked ~ ul {
visibility:visible;
opacity:1;
}
</style>
<div class="avdhoot-box">
<input type="checkbox">
<label data-default="Select My Menu" data-focus="All My Label"></label>
<ul>
<li><a class="social-rss" href="#" target="_blank">Blogger</a></li>
<li><a class="social-facebook" href="#" target="_blank">E-Book</a></li>
<li><a class="social-twitter" href="#" target="_blank">Khmer-Book</a></li>
<li><a class="social-google" href="#" target="_blank">Website Tricks</a></li>
<li><a class="social-facebook" href="#" target="_blank">Download</a></li>
<li><a class="social-twitter" href="#" target="_blank">Khmer Song</a></li>
<li><a class="social-google" href="#" target="_blank">Khmer VCD</a></li>
<li><a class="social-google" href="#" target="_blank">Videos</a></li>
</ul>
</div>

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

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

Tweet