ဘေလာ့မွာ လွပေသာ 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 
 

0 comments:

Post a Comment