Switch Menu

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

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

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

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

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

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

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

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

Credit: Dynamicdrive

Technorati: hacks, switch menu, technology