បញ្ជី​ធ្លាក់​ចុះ​លឹប​លៀន​នៅ​របា​ចំហៀង​ប្លក (Drop-down Menu On Side Bar)

ថ្ងៃ​នេះ​ខ្ញុំ​សូម​ណែនាំ​ពី​របៀប​ដាក់ Drop-down Menu សម្រាប់​ប្លក តែ​មុន​នឹង​ដាក់ ខ្ញុំ​សូម​ឲ្យ​និយមន័យ​នៃ​ពាក្យ Drop-down Menu បន្តិច​សិន ព្រោះ​ពាក្យ​នេះ​យើង​ធ្លាប់​ឮ​ជា​យូរ​មក​យើង តែ​ដូចជា​រាង​ស្រពិចស្រពិល​បន្តិច​ដែរ។ ពាក្យ​ថា Drop-down Menu បើ​តាម​ខ្ញុំ​យល់​គឺ វា​ជា​បញ្ជី​មេ​​មួយ​ប្រភេទ​ដែល​មាន​កូន category នៅ​ក្នុង​ហ្នឹង​ទៀត ហើយ​ដែល​បង្ហាញ​នៅ​ពេល​យើង​យក​កូន​កណ្ដុរ​ដាក់​ពី​លើ​វា ឬ​ចុច​ពី​លើ​វា ព្រោះ​បើ​គ្មាន​​កូន​ category ទេ​ធ្វើ​ម៉េច​បាន​មានអំពើ​ទម្លាក់​ចុះ​ឲ្យ​យើង​ចុច!!! ។ ( ខ្មែរ​ខ្លះ​ហៅ category ថា "ចំណាត់​ក្រុម" តែ​អ្នក​អភិវឌ្ឍន៍ Joomla ​ខ្មែរ​ហៅថា "ជំពូក" ព្រោះ​យក​របៀប​តាម​សៀវភៅ ដែល​គេ​តែងតែ​ហៅ​ថា​ជំពូក​ ដែល​មាន​ផ្នែក​តូចៗ​ទៀត​នៅ​ក្នុង​ជំពូក។ ខ្ញុំ​យល់​ថា ខ្មែរ​យើង​មាន​ពាក្យ​ "ជំពូក" ហើយ​ស្រាប់​មាន​ន័យ​ដូច​គ្នា​នឹង category ដូច្នេះ​មិន​បាច់​ត្រូវ​ផ្សំ​ពាក្យ​យក​មក​ប្រើ​ទៀត​ទេ។

   ចូល​មក​ដល់​សាច់​រឿង​យើង​វិញ!! :D  Drop-down Menu ដែល​ខ្ញុំ​នឹង​បង្ហាញ​ខាង​ក្រោម​នេះ គឺ​ជា​ប្រភេទ​បញ្ឈរ​ដាក់​នៅ​របា​ចំហៀង (side bar) នៅ​ពេល​យើង​ចុច​លើ​វា វា​នឹង​លា​បង្ហាញ​ផ្នែក​នៃ​អត្ថបទ​ដែល​យើង​បាន​រៀប​បង្ហាញ​នោះ ពេល​ចុច​ម្ដង​ទៀត​វា​លាក់​វិញ។ ដូច្នេះ​បើ​ប្លក​របស់​អ្នក​អត់​មាន​របា​ចំហៀង​ទេ មិន​អាច​ប្រើ​បាន​ទេ។

៙ របៀប​ដាក់​ Drop-down Menu នៅ Side Bar ៖

   ដោយសារ Drop-down Menu នេះ​មិន​ទាក់ទង​ការ​ដាក់​កូដ​ក្នុង template នោះ ​វា​មាន​ភាព​ងាយស្រួល​ដាក់ ​និង​ ដក​ចេញ​វិញ​ណាស់។

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

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

-ចម្លង​កូដ "​Drop-down Menu On Side Bar" ​ខាង​ក្រោម​​នេះ ដោយ​រៀបចំ​ដូរ​ URL និង​ឈ្មោះ​តំណ (លោកអ្នក​អាច​ប្រើ​កម្មវិធី NotePad ឬ NptePad++ តាម​ការ​ចូលចិត្ត) ហើយ​យក​ទៅ​បិទភ្ជាប់​ក្នុង​ HTML/JavaScript Gadget ​ ​រួច​ហើយ​​ចុច​ប៊ូតុង Save ។
បន្ថែម ៖ ចំពោះ​ឈ្មោះ widget ដាក់​ ឬ​មិន​​​ដាក់​ក៏​បាន ហើយ​គួរ​ចាប់​ទាញ Widget នេះ​ទៅ​ដាក់​នៅ​ទីតាំង​ណាមួយ​ដែល​ឆាប់​ឃើញ ដាក់​នៅ​លើ​រឹតតែ​ល្អ។

​កូដ ​Drop-down Menu On Side Bar

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
    $('li.title a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.downlistie').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});</script>
<style>
ul.container{
    width:275px;
    padding:5px;
}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;}

li.title
{
border-radius:5px;
background:#333333;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
    display:block;
 padding:5px;
    font:14px georgia, verdana;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
}
.downlistie{
list-style:none;
    display:none;
    padding-top:5px;
    width:100%;
}
.downlistie li{
   list-style:none;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-radius:5px;
    margin:5px ;
    padding:4px 10px; 
}

.downlistie li:hover {
background:orange;
}
.downlistie li a{
{
font:14px georgia, verdana;
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#333333;
}
</style>
<ul class="container">
<li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Blogger</a></li>         
                <li class="downlistie">
                    <ul>
    <li><a  href="#" >Templates</a></li>
    <li><a  href="#">Widgets</a></li>
    <li><a href="#">Guides</a></li>
                    </ul></li></ul></li>

 <li class="accoi-menu">  
              <ul>
                <li class="title"><a href="#" >Wordpress</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Themes</a></li>
    <li><a href="#">Plugins</a></li>
    <li><a href="#">Guides</a></li>             
                 </ul></li></ul></li>

 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Freebies</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Blogger templates</a></li>
    <li><a href="#">Wordpress Themes</a></li>
    <li><a href="#">Plugins</a></li>
    <li><a href="#">Scripts</a></li>
         </ul></li></ul></li>

 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Services</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Website Design</a></li>
    <li><a href="#">Blogger</a></li>
    <li><a href="#">Wordpress</a></li>
    <li><a href="#">Custom Templates</a></li>               
                 </ul></li></ul></li>

 <li class="accoi-menu">
          <ul>
                <li class="title"><a href="#" >About us</a></li>
                  <li class="downlistie">
                    <ul>
    <li><a href="#" >About us</a></li>
    <li><a href="#">Contact us</a></li>
     <li><a href="#">Disclaimer</a></li>
    <li><a href="#">Privacy policy</a></li>
              </ul></li></ul></li>
    </ul>

ចំណាំ ៖​ # : ជា​កន្លែង​ដែល​ត្រូវ​ដាក់​តំណ URL របស់​ label ដែល​នៅ​ក្នុង​ម៉ឺនុយ​នេះ​មាន​ដាក់​ឈ្មោះ label ជា​ច្រើន​មក​ស្រាប់ គ្រាន់​ងាយស្រួល​មើល​​ឆាប់​យល់។ បើ​លោកអ្នក​ចង់​បន្ថែម ​ម៉ឺនុយ​មួយ​ជំពូកៗ​ៀត ត្រូវ​ចម្លង​កូដ​ដែល​ខ្ញុំ​បាន​ដាក់​ពណ៌​មួយ​កង់ៗ នោះ​តាម​ការ​ត្រូវ​ការ​របស់​អ្នក​បាន​។ ហើយ​ចំពោះ​ពណ៌ និង​ពុម្ព​អក្សរ សូម​ស្វែងយល់​ដោយ​ខ្លួន​ឯង។
____________________
ប្រភព​ពី : ប្លក​អាយធី​ក្រៅ​សាលា

អត្ថបទ​ទាក់ទង ៖

- ដាក់ Sitemap (ចំណង​ជើង​អត្ថបទ) បែប​សាមញ្ញ
- យល់​ដឹង​អំពី​ផ្ទៃ​ខាង​ក្រោយ (background) របស់​ប្លក
- របៀប​ដាក់​អត្ថបទ​សង្ខេប​នៅ​ទំព័រ​ដើម​ដោយ​មិន​សរសេរ​កូដ
- ស្វែងយល់​អំពី Pages និង Post របស់​ Blogspot
- អំពី​ទំហំ​ស្តុក​ឯកសារ​និង​ដែន​កំណត់​របស់ Blogger
- ដាក់​ជំពូក​ជា​ម៉ឺនុយ​​ទម្លាក់ (Drop Down Labels Widget)

ប្រភពៈ អាក្បាលធំ