how to creat navigation dropdown menu

dropdown

ထုံးစံအတိုင်း ဘယ်သူမှ သိပ်စိတ်မဝင်စားပေမယ့် သိထားတာလေးကို ရေးလိုက်ပါဦးမယ်၊ ဒါကတော့ ပုံမှာ ပြထားတဲ့အတိုင်း dropdown menu လုပ်နည်းလေးပါ၊ menu support ဖြစ်တဲ့ theme တွေ အတွက်ရော မဖြစ်တဲ့ theme အတွက်ပါ ပြောသွားပါမယ်။ အဲလို လုပ်ချင်ပေမယ့် မလုပ်တတ်တဲ့ သူတွေအတွက်ပေါ့။

menu support ဖြစ်ပြီးသား theme တွေ အတွက်တော့ အထွေအထူး လုပ်နေစရာ မလိုပါဘူး၊ menu name တစ်ခု ဖန်တီးပြီး ပို့စ်တွေ ပေ့ခ်ျတွေ category တွေကို ကြိုက်သလို ဆွဲထည့်ရုံပါပဲ။ လွယ်လွန်းလို့ ရှင်းအောင် ဘယ်လို ပြောရမှန်းတောင် မသိတော့ဘူး။

ခုပြောမှာက menu support မဖြစ်တဲ့ theme တွေကို support ဖြစ်အောင် လုပ်ပြီး dropdown menu လုပ်ဖို့ပါ။ ကဲ စမယ်နော်။ ပထမဆုံး ဒီအောက်က ကုတ်တွေကို functions.php ထဲ သွားထည့်ပေးရပါမယ်။

[php]<?php
function mytheme_addmenus() {
register_nav_menus(
array(
‘main_nav’ => ‘The Main Menu’,
)
);
}
add_action( ‘init’, ‘mytheme_addmenus’ );
function mytheme_nav() {
if ( function_exists( ‘wp_nav_menu’ ) )
wp_nav_menu( ‘menu=main_nav&container_class=pagemenu&fallback_cb=mytheme_nav_fallback’ );
else
mytheme_nav_fallback();
}
function mytheme_nav_fallback() {
wp_page_menu( ‘show_home=Start&menu_class=pagemenu’ );
}
?>
[/php]

ပြီးရင် header.php ထဲက <div id=”header”> ဆိုတာရဲ့ အောက်မှာ သေသေချာချာ လိုက်ကြည့်ပါ၊ navigation နဲ့ ပတ်သက်တဲ့ tag တွေကို အကုန်ဖျက်ပြီး ဒီအောက်က ကုတ်လေးတွေကို အစားထိုးလိုက်ပါ။

[php]<div>
<ul id=”nav”class= “clearfloat”>
<?php mytheme_nav();?>
</div>
[/php]

ဒါဆို menu support ဖြစ်အောင် လုပ်ခြင်း ကိစ္စတော့ ပြီးသွားပါပြီ။ အပေါ်က ကုတ်တွေ မထည့်ခင်မှာ navigation နဲ့ ပတ်သက်တာတွေကို ဖျက်ပစ်လိုက်တဲ့ အတွက် ကျွန်တော်တို့ရဲ့ theme css ထဲက nav ကုတ်တွေဟာ အလုပ်လုပ်မှာ မဟုတ်တော့ပါဘူး၊ ဒီတော့ navigation bar မပေါ်တော့ပဲ ကြည့်ရတာ တော်တော် အရုပ်ဆိုးနေတာ တွေ့ရပါလိမ့်မယ်။ ဒီလိုဆိုတော့ ဒီဘားပေါ်ဖို့ css ကို သွားပြင်ပေးရမှာပေါ့။ ကျွန်တော် ပြင်ထားပြီး ဖြစ်တဲ့ css ကိုပဲ ထည့်ပေးလိုက်ပါမယ်။ ကိုယ့် theme နဲ့ လိုက်ဖက် ကိုက်ညီအောင်တော့ ကိုယ့်ဘာသာကိုယ် ထပ်ပြင်ရမှာပေါ့။

[css]#nav{
overflow:hidden;
width:981px;
margin:0 auto;
background:#f5f5f4;
font-size:1.1em;
border-right:1px solid #a9a9a9;
}
#nav, #nav ul {
list-style: none;
line-height: 0;
z-index: 99999;
}
#nav a, #nav a:hover {
display: block;
text-decoration: none;
border:none;
}
#nav li {
float: left;
list-style:none;
border-left:1px solid #a9a9a9;
}
#nav a, #nav a:visited {
display:block;
font-weight:bold;
color: #222;
padding:11.3px 11.3px;
}
#nav a:hover, #nav a:active, #home .on {
background:#777;
color:#fff;
text-decoration:none
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 182px;
border-bottom: 1px solid #a9a9a9;
}
#nav li li {
margin:0 auto;
width: 180px;
border-top: 1px solid #a9a9a9;
border-right: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
background: #f5f5f4;
}
#nav li li a, #nav li li a:visited {
font-weight:normal;
font-size:0.9em;
color:#000;
}
#nav li li a:hover, #nav li li a:active {
background:#777;
color:#fff;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover
ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li

li.sfhover ul {
left: auto;
}
a.main:hover {
background:none;
}
[/css]

ဒီ css nav ကုတ်တွေထဲမှာ အရေးအပါဆုံးက z-index: 99999; ဆိုတာပါပဲ၊ ဒီကောင်မပါရင် dropdown ဟာ အောက်က ပို့စ်တွေရဲ့ စာသားတွေ ပုံတွေ နောက်ကို ရောက်နေမှာပါ။ ကျွန်တော်တောင် default theme ကနေ ယူထည့်ထားရတာ။ ကျန်တာတွေကတော့ ကြည့်ကျက်ပြင်ပေါ့ဗျာ။ ဒီပို့စ်ကို ဖတ်နေမှတော့ ဒီလောက်တော့ သိမယ် ထင်လို့ ရှည်ရှည်ဝေးဝေး မပြောတော့ပါဘူး။ လုပ်ကြည့်လို့မှ အဆင်မပြေဘူးဆိုလည်း ကြိုက်တဲ့ အကူအညီတောင်းနိုင်ပါတယ်။ ကျွန်တော်လည်း ဆရာကြီးတော့ မဟုတ်ဘူးပေါ့။

ကျန်တဲ့ menu ထဲမှာ လုပ်ရမယ့် အပိုင်းကိုတော့ ဒီပုံကိုသာ ကြည့်ပြီး လုပ်လိုက်ပါတော့၊ menu support ဖြစ်ပြီးတဲ့ theme တွေမှာတော့ ဒီပုံထဲက အတိုင်းပဲ လုပ်စရာ လိုပါတယ်။ တစ်ချို့ theme တွေမှာတော့ menu location ကို နှစ်နေရာ သုံးနေရာတောင် ပေးထားတတ်ပါတယ်။

ပထမ ပုံမှာပြထားတဲ့ dropdown ကိုတော့ default theme ဖြစ်တဲ့ twenty eleven နဲ့ လုပ်ထားတာပါ။ ဒီလို theme မျိုးတွေမှာ ဘာမှ လုပ်စရာ မလိုပါဘူး။ အားလုံး အဆင်ပြေပြီးသား။ menu ထဲသွားပြီး ဆွဲထည့်လိုက်ရုံပါပဲ။ twenty ten theme လည်း ဒီလိုပဲ။ ခုနောက်ပိုင်း wordpress.org မှာ ပေးထားတဲ့ simple theme တော်တော်များများလည်း navigation dropdown menu support ဖြစ်ပါတယ်။ အားလုံးပဲ အဆင်ပြေကြပါစေ။

http://wphacks.com/how-to-make-categories-drop-down-menu နှင့် http://kuttler.eu/post/wp_nav_menu-wordpress-3-0 တို့မှ နည်းယူထားခြင်း ဖြစ်ပါတယ်။