ဆင္တဲဝ: ဘေလာ့မွာ လွပေသာ Vertical Navigation Menu လုပ္နည္း

ခုတင္မွာေလးကေတာ့..TAB MENU ေလးတစ္မ်ိဳးပါ ..Vertical Navigation Menu လို႕ေခၚပါတယ္....ေအာက္ကတိုင္း လုပ္ၾကည့္ပါေနာ္..

အဆင့္ (၁) ။               ။   သြားၾကမယ္ေနာ္ ေအာက္ကအတိုင္း
(1)-   ဘေလာ့ကာ၀င္ပါ Dashboard > Template> Edit HTML အစဥ္လုိက္သြားလိုက္ပါ။
(2)-    the Expand Widget ေနရာမွ အမွန္ျဖစ္ခဲ့ေပးပါ။
(3)-    Ctrl + F အကူညီျဖင့္ ေအာက္ကကုဒ္ကို ရွာလိုက္ပါ။

]]></b:skin> ေတြ႕တာနဲ႕ ေပးထားတဲ့ ကုဒ္ေတြကို သူ႕အေပၚကေန ကပ္ထည့္လိုက္ပါ။

#page_paramsInspector-shell .tabShell { width:480px; } #page_paramsInspector-shell .tabShell { width:480px; } #page_paramsInspector_settings { width:400px; height:286px; font-size:12px; } #page_paramsInspector_preview { width:466px; } .menuLinks { position:relative; width:200px; background:#364040; padding:10px; padding-bottom:5px; } .menuLink, .menuLink:link, .menuLink:visited, .menuLink:hover, .menuLink:active { display:block; font-size:12px; text-transform:uppercase; font-weight:bold; text-align:center; letter-spacing:4px; color:#bbb; background:#000; border:2px solid #000; width:182px; padding:5px 7px; margin-bottom:5px; text-decoration:none; overflow:hidden; }

အဆင့္ (၂) ။ ။ ေနာက္ထပ္ <head> ဆိုတဲ့ ကုဒ္ကို ထပ္ရွာလိုက္ပါ။
ေတြ႕တာနဲ႕ ေအာက္ကကုဒ္ေတြကို သူ႕ ေနာက္က ကပ္ထည့္ေပးပါ။

<script src='https://dl.dropbox.com/u/24344387/How%20Do%20Blog/

UIZE-JavaScript-Framework/js/Uize.js' type='text/javascript'/>

အဆင့္ (၃) ။     ။ ေအာက္က အတိုင္း ေပးထားေသာကုဒ္မ်ားကို ထည့္လိုက္ပါ။

    1. Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
    2. Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕ Dashboard ကေနေပါ့
    3. Page Elements
    4. Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
    5. HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
    6. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

<script type="text/javascript">

Uize.module ({
 required:[
 'UizeDotCom.Page.Example.library',
 'UizeDotCom.Page.Example',
 'Uize.Widget.HoverFader',
 'Uize.Curve.Rubber',
 'Uize.Fx.xShadows'
 ],
 builder:function () {
 /*** create the example page widget ***/
 var page = window.page = UizeDotCom.Page.Example ();

 /*** create the hover fader instance ***/
 page.addChild (
 'hoverFader',
 Uize.Widget.HoverFader,
 {
 nodes:{className:/\bmenuLink\b/},
 defaultStyle:{marginLeft:0,marginTop:0,
 color:'f',borderColor:'#9F9797',
 backgroundColor:'044',
 textShadow:'-3 0 3 #0,3 0 3 #0,#0ff -30 0 .5em,#0ff 30 0 .5em,#0f0 -20 0 1em,#0f0 20 0 1em'
 },
 hoverStyle:{marginLeft:5,marginTop:5,borderColor:'0',
 color:'8',
 backgroundColor:'000',
 textShadow:'0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em'
 },
 fadeIn:{duration:350},
 fadeOut:{duration:1000}
 }
 );

 /*** wire up the page widget ***/
 page.wireUi ();
 }
});

</script>

<table border="0" cellspacing="0" cellpadding="4" style="margin:auto;">
 <tr valign="top">
 <td>
 <div>
 <div style="left:20px; top:0px;">
 <a href=" YOUR_PAGE_URL " style="
 textShadow:0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em;">About Us</a>
 </div>
 <div style="left:77px; top:93px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">Products</a>
 </div>
 <div style="left:176px; top:17px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">Services</a>
 </div>
 <div style="left:232px; top:158px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">Technology</a>
 </div>
 <div style="left:319px; top:-8px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">Solutions</a>
 </div>
 <div style="left:390px; top:73px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">My Account</a>
 </div>
 <div style="left:506px; top:-3px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">Store Locator</a>
 </div>
 <div style="left:559px; top:90px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">Investors</a>
 </div>
 <div style="left:42px; top:176px;">
 <a href=" YOUR_PAGE_URL " style="background:#0;">Support</a>
 </div>
 <div style="left:447px; top:176px;">
 <a href="YOUR_PAGE_URL" style="background:#0;">Contact Us</a>
 </div>
 </div>
 </td>
 <td id="page_paramsInspector-shell"></td>
 </tr>
 </table>

မွတ္ခ်က္ ။ ။

YOUR_PAGE_URL  ဆိုတဲ့ေနရာမွာ မိမိတို႕ ရဲ႕ url ကိုထည့္ေပးရမွာ ျဖစ္ပါတယ္....

 Products-Services-Technology    စတဲ့ စာသားေနရာေတြမွာေတာ့ မိမိတို႕ ဘေလာ့ရဲ႕ ေခါင္းစဥ္ေတြကို

ထည့္ေပးလိုက္ပါ.............ဥပမာ  ။    ။  ကဗ်ာ-သုတ-ဘာသာေရး   စသျဖင့္ေပါ့။

သည္ေလာက္ဆို အဆင္ေျပမွၾပါေနာ္...

ေပ်ာ္ရႊင္ပါေစ

ေအာင္ေအာင္(မကစ)

www.aungsanmks.blogspot.com

www.ledimyethar.com

ဆင္တဲဝ

Pages

Pages

Saturday, 13 October 2012

ဘေလာ့မွာ လွပေသာ Vertical Navigation Menu လုပ္နည္း

No comments:

Post a Comment