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