Wai Yan Lin » Switch Menu

Switch Menu

Previous post နဲ႔ Archives ေတြကိုပဲျဖစ္ျဖစ္ Friend list ေတြကိုပဲျဖစ္ျဖစ္ Switch Menu ေလးနဲ႔လုပ္လို႔ရပါတယ္။ ကၽြန္ေတာ့္ side bar မွာလုပ္ထားပါတယ္။ အဲဒီေခါင္းစဥ္ေတြေပၚကို ႏွိပ္ၾကည့္ပါ။ (Blogspot အတြက္ပဲျဖစ္ပါတယ္။)

အဲဒီလိုမ်ိဳးထည့္ခ်င္တယ္ဆိုရင္ေတာ့…..

အဆင့္ – ၁
ပထမဆံုး ေဟာဒီကုဒ္ေတြကို <–head> နဲ႔ <–/head> ၾကားထဲမွာ ကူးထည့္လိုက္ပါ။

<mce:style type=”text/css”><!– .menutitle{ cursor:pointer; margin-bottom: 5px; background-color:#ECECFF; color:#000000; width:140px; padding:2px; text-align:center; font-weight:bold; /*/*/border:1px solid #000000;/* */ } .submenu{ margin-bottom: 0.5em; } –></mce:style><style type=”text/css” mce_bogus=”1″>.menutitle{ cursor:pointer; margin-bottom: 5px; background-color:#ECECFF; color:#000000; width:140px; padding:2px; text-align:center; font-weight:bold; /*/*/border:1px solid #000000;/* */ } .submenu{ margin-bottom: 0.5em; } </style> <mce:script type=”text/javascript”><!– /*********************************************** * Switch Menu script- by Martial B of http://getElementById.com/ * Modified by Dynamic Drive for format &#038; NS4/IE4 compatibility * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var persistmenu=”yes” //”yes” or “no”. Make sure each SPAN content contains an incrementing ID starting at 1 (id=”sub1″, id=”sub2″, etc) var persisttype=”sitewide” //enter “sitewide” for menu to persist across site, “local” for this page only if (document.getElementById){ //DynamicDrive.com change document.write(‘ <mce:style type=”text/css”><!– \n’) document.write(‘.submenu{display: none;}\n’) document.write(‘ –></mce:style><style type=”text/css” mce_bogus=”1″>\n’) document.write(‘.submenu{display: none;}\n’) document.write(‘</style> \n’) } function SwitchMenu(obj){ if(document.getElementById){ var el = document.getElementById(obj); var ar = document.getElementById(“masterdiv”).getElementsByTagName(“span”); //DynamicDrive.com change if(el.style.display != “block”){ //DynamicDrive.com change for (var i=0; i<ar.length; i++){ if (ar[i].className==”submenu”) //DynamicDrive.com change ar[i].style.display = “none”; } el.style.display = “block”; }else{ el.style.display = “none”; } } } function get_cookie(Name) { var search = Name + “=” var returnvalue = “”; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(“;”, offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function onloadfunction(){ if (persistmenu==”yes”){ var cookiename=(persisttype==”sitewide”)? “switchmenu” : window.location.pathname var cookievalue=get_cookie(cookiename) if (cookievalue!=”") document.getElementById(cookievalue).style.display=”block” } } function savemenustate(){ var inc=1, blockid=”" while (document.getElementById(“sub”+inc)){ if (document.getElementById(“sub”+inc).style.display==”block”){ blockid=”sub”+inc break } inc++ } var cookiename=(persisttype==”sitewide”)? “switchmenu” : window.location.pathname var cookievalue=(persisttype==”sitewide”)? blockid+”;path=/” : blockid document.cookie=cookiename+”=”+cookievalue } if (window.addEventListener) window.addEventListener(“load”, onloadfunction, false) else if (window.attachEvent) window.attachEvent(“onload”, onloadfunction) else if (document.getElementById) window.onload=onloadfunction if (persistmenu==”yes” && document.getElementById) window.onunload=savemenustate // –></mce:script>

<–head> ရဲ႕ေအာက္မွာပဲျဖစ္ျဖစ္ <–/head> ရဲ႕အေပၚမွာပဲျဖစ္ျဖစ္ထည့္ရင္ပိုေကာင္းပါတယ္။ ေနာက္ျပန္ရွာခ်င္ရင္ လြယ္ေအာင္လို႔ပါ။

အဆင့္ – ၂
ၿပီးရင္ ေဟာဒီကုဒ္ေတြကို ကုိယ့္ဘေလာ့ထဲက ကိုယ္ေပၚေစခ်င္တဲ့ ေနရာမွာထည့္ေပးရပါမယ္။

<!– Keep all menus within masterdiv–> <div id=”masterdiv”> <div class=”menutitle” onclick=”SwitchMenu(‘sub1′)”>Site Menu</div> – <a href=”new.htm” mce_href=”new.htm”>What’s New</a> – <a href=”hot.htm” mce_href=”hot.htm”>What’s hot</a> – <a href=”revised.htm” mce_href=”revised.htm”>Revised Scripts</a> – <a href=”morezone/” mce_href=”morezone/”>More Zone</a> <div class=”menutitle” onclick=”SwitchMenu(‘sub2′)”>FAQ/Help</div> – <a href=”notice.htm” mce_href=”notice.htm”>Usage Terms</a> – <a href=”faqs.htm” mce_href=”faqs.htm”>DHTML FAQs</a> – <a href=”help.htm” mce_href=”help.htm”>Scripts FAQs</a> <div class=”menutitle” onclick=”SwitchMenu(‘sub3′)”>Help Forum</div> – <a href=”http://www.codingforums.com” mce_href=”http://www.codingforums.com”>Coding Forums</a> <div class=”menutitle” onclick=”SwitchMenu(‘sub4′)”>Cool Links</div> – <a href=”http://www.javascriptkit.com” mce_href=”http://www.javascriptkit.com”>JavaScript Kit</a> – <a href=”http://www.freewarejava.com” mce_href=”http://www.freewarejava.com”>Freewarejava</a> – <a href=”http://www.cooltext.com” mce_href=”http://www.cooltext.com”>Cool Text</a> – <a href=”http://www.google.com” mce_href=”http://www.google.com”>Google.com</a> <img src=”about.gif” mce_src=”about.gif” onclick=”SwitchMenu(‘sub5′)”> – <a href=”http://www.dynamicdrive.com/link.htm” mce_href=”http://www.dynamicdrive.com/link.htm”>Link to DD</a> – <a href=”http://www.dynamicdrive.com/recommendit/” mce_href=”http://www.dynamicdrive.com/recommendit/”>Recommend Us</a> – <a href=”http://www.dynamicdrive.com/contact.htm” mce_href=”http://www.dynamicdrive.com/contact.htm”>Email Us</a> </div>

ျပထားတဲ့ ေခါင္းစဥ္နဲ႔ လင့္ေတြက နမူနာျပထားတာပါ။ ကိုယ္တပ္ခ်င္တဲ့ ေခါင္းစဥ္နဲ႔ ကိုထည့္ခ်င္တဲ့ လင့္ေတြကို ေျပာင္းေရးေပးလိုက္ေပါ့။ ကုဒ္ေတြထဲမွာ id=”sub1″ id=”sub2″ ကေန id=”sub5″ ထိဆိုၿပီးေတြ႕လိမ့္မယ္။ ကိုယ့္မွာ ေခါင္းစဥ္က ၃ ခုေလာက္ပဲရွိမယ္ဆိုရင္ id=”sub3″ ထိပဲလိုမွာေပါ့။ တိုးခ်င္ရင္လည္းႀကိဳက္သေလာက္တိုးလို႔ရတယ္။ တစ္ခုေတာ့ သတိထားရမွာရွိတယ္။ အဲဒါေတြအားလံုးကို <–div id=”masterdiv”–> ရဲ႕ေအာက္ထဲမွာပဲထားရမွာပါ။ လင့္စတိုင္ေတြကို customize လုပ္ခ်င္တယ္ဆိုရင္ အဆင့္ – ၁ မွာပါတဲ့ CSS style ေတြကို ႀကိဳက္သလိုခ်ိန္းလို႔ရတယ္။ ကၽြန္ေတာ္ေျပာတာမရွင္းေသဘူးဆိုရင္ေတာ့ ဒီမွာ တိုက္ရုိက္သြားၿပီးၾကည့္ရွဳႏိုင္ပါတယ္။

Credit: Dynamicdrive

Technorati: hacks, switch menu, technology

Share and Enjoy:

Do you like this article?

15.03.2007 | 4 Comments
hacks, switch menu, technology

4 Comments to “Switch Menu”

thinzar

March 16, 2007 at 2:06 am

ဟင္.. ေျပာေတာ့ “အဆင့္ – ၁ ပထမဆံုး ေဟာဒီကုဒ္ေတြကို < --head> နဲ႔ < --/head> ၾကားထဲမွာ ကူးထည့္လိုက္ပါ။” တဲ့.. ကူးလို့ရေအာင္လဲ လုပ္ထားေပးဘူး။
Wai Yan

March 16, 2007 at 9:07 am

ေဆာဒီးဗ်ာ။ ဒီလင့္မွာ တိုက္ရိုက္သြားၿပီးေတာ့ ကူးလိုက္ပါဗ်ာ။
http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm
ေမာင္ Harry

January 26, 2009 at 10:06 am

ကိုႀကီး… က်ေနာ့္ blog မွာ ဒီအေၾကာင္း post ေရးခ်င္လို႔ ဒီpost ကို link မယ္ေနာ္။
waiyan

February 10, 2009 at 10:58 am

ရတယ္ညီ။ လင့္ခ်င္သလိုလင့္

Blog

Switch Menu

Do you like this article?

4 Comments to “Switch Menu”

Leave a Reply

recent posts

Recent Comments:

Archive

Categories