​មីនុយ (Menu) Widget យ៉ាង​រស់​រវើក និង​ស្រស់​ស្អាត​​សម្រាប់​ប្លកករ

សួស្តី! ថ្ងៃ​នេះ​ប្លក​ខ្ញុំ​សូម​លើក​យក​កូដ​មីនុយ សម្រាប់​ដាក់​ក្នុង Widget ប្លក។ វា​ខុស​ប្លែក​គ្នា​ទៅ​នឹង​ ការ​ដាក់ មីនុយ (Menu) អណ្តែត​ ដែល​មាន​បណ្តាញ​សង្គម​មក​​ជា​មួយក្នុង​ប្លកករ។ មីនុយ​នេះ​មាន​លក្ខណៈ​រស់​រវើក សម​ទៅ​នឹង​ផ្នែក​ខាង (Widget) នៃ​ប្លក​របស់​លោក​អ្នក។ យើង​អាច​និយាយ​បាន​ថា​មីនុយ​ប្រភេទ​នេះ​ជា​ មីនុយ​ទម្លាក់​បាន ដោយ​យើង​យក​ Mouse ទៅ Select លើ​វា នោះ​វា​នឹង​ធ្លាក់​ចុះ​មក​ក្រោម​នូវ​មីនុយ​តូចៗ​បន្ទាប់​នោះ​មួយ​តង់​ទៀត។ ដើម្បី​លើក​ស្ទួយ​កិត្យានុភាព សម្រាប់​ប្លក​របស់​យើង​នោះ​យើង​គួរ​តែ​សាក​ល្បង​ដាក់​វា​លេង​មើល ព្រោះ​គ្មាន​អី​ពិបាក​ដូច​ការ​ដាក់​មីនុយ​អណ្តែត​នៅ​ក្នុង​ប្លក​ទេ។ ដើម្បី​ដាក់ សូម​លោក​អ្នក​មើល​ការ​ណែ​នាំ​អំពី​របៀប​ដាក់​កូដ និង​ចម្លង​កូដ​ខាង​ក្រោម​យក​ទៅ ទើប​អាច​សម្រេច​ជោគ​ជ័យ ពុំ​ដូច្នេះ​ទេ​លោក​អ្នក​នឹង​អាច​មាន​បញ្ហា​ដោយ​មិន​ដឹង​ខ្លួន។
៙ សូម​មើល​ពី​របៀប​ដាក់​ ៖
- កត់ត្រា​ចូល (Login) គណនី Blogger របស់​លោក​អ្នក។
- ចូល​ទៅ Layout >> Addd a Gadget (សូម​មើល​រូប​ខាង​ក្រោម)

- រមូល (Scroll) ​ចុះ​ក្រោមរក​មើល Gadget ឈ្មោះ​ថា HTML/JavaScript (សូម​មើល​រូប​

- ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​នៅ​ក្នុង​នោះ ដោយ​មិន​បាច់​ដាក់​ចំណង​ជើង ឬ​ដាក់​ក៏​បាន។
- ពេល​ដាក់​កូដ​​រួច​រាល់​ហើយ​ សូម​ចុច​ឆ្នុច​​ពាក្យ​ថា " Save "

 

កូដមីនុយ (Menu) Widget យ៉ាង​រស់​រវើក និង​ស្រស់​ស្អាត

<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>

៙ ចំណាំ >>> អ្នក​អាច​​ប្តូរ​នៅ​ត្រង់ ៖

- background:#333333; (ពណ៌​មីនុយ​ធំ)

- background:orange; (ពណ៌​មីនុយ​តូចៗ)

- នៅ​ត្រង់​សញ្ញា​ទ្រុង​ជ្រូក (#) សូម​ប្តូរ​ទៅ​ជា​ដំណ​ភ្ជាប់​របស់​លោក​អ្នក។

- កន្លែង​ដែល​ខ្ញុំ​ចំណាំ​ដោយ​ អក្សរ​ពណ៌​លឿង​ លោក​អ្នក​អាច​ប្តូរ​ទៅ​ជា​ពាក្យ​ដែល​លោក​អ្នក​ចង់​ដាក់។ *** សូម​រីក​រាយ​ជា​មួយ​មីនុយ​ប្រភេទ​ថ្មី​នេះ :D សង្ឃឹម​ថា​អ្នក​ទាំង​អស់​គ្នា​អាច​យល់​បាន។