Vertical-Style Lava Lamp Navigation Menu
Net.Tuts က Tutorial တစ်ခုဖြစ်တဲ့ Jeffrey Way ရဲ့ How to build a lava-lamp style navigation Menu ဆိုတဲ့ ဟာကိုဖတ်ပြီးတော့ ကျွန်တော်တို့ Myanmar Links က ဆရာတစ်သိုက် Modify ပြန်လုပ်ဖြစ်ကြတယ်။ အရင်ဆုံး Demo လေးကိုကြည့်လိုက်ကြစို့
http://nettuts.s3.amazonaws.com/600_spasticNav/index.html
သူလုပ်ထားတာက ရှင်းသလို လွယ်လည်းလွယ်ပါတယ်။ jQuery ကိုနားလည်ထားဖို့လိုအပ်သလို Thinking ပိုင်းနည်းကောင်းဖို့လိုပါတယ်။ မဟုတ်ရင် Margin တွေ Border တွေ Padding တွေနဲ့တိုင်ပတ်ကုန်ပါလိမ့်မယ်။
အရင်ဆုံး Menu တစ်ခုတည်ဆောက်ရာမှာလိုအပ်တဲ့ Basic တွေကိုအရင်ထည့်လိုက်ပါမယ်။
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>My Lava-Lamp Style NaV</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />
<script src=”js/jquery.min.js” type=”text/javascript” charset=”utf-8″></script>
<script src=”js/jquery-ui.js” type=”text/javascript” charset=”utf-8″></script></script>
</head><body>
<div id=”container”>
<ul id=”nav”>
<li id=”selected”><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>More About My Portfolio</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
</body>
</html>
jQuery File တွေတော့လိုပါမယ်။ လိုအပ်တဲ့ jquery.min.js နဲ့ jquery-ui.js တွေကို Download လုပ်လိုက်ပါ။
http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js
ပြီးရင်တော့ ကျွန်တော်တို့ js file တစ်ခုလောက်ရေးလိုက်ကြရအောင်။ File အသစ်တစ်ခုလုပ်ပြီး .js ဆိုတဲ့ နာမည်နဲ့ Save လုပ်လိုက်ပါ။ ပြီးရင် Script Link ချိတ်လိုက်ပါ။ Lava-Lamp Function ကို Call ရအောင်။ လောလောဆည်တော့ ကျွန်တော်ကတော့ အသစ်ရေးမယ့် .js ကို jquery-spasticnav.js လိုပဲပေးထားပါတယ်။
<script src=”js/jquery-spasticnav.js” type=”text/javascript” charset=”utf-8″></script>
<script type=”text/javascript” charset=”utf-8″>
$(document).ready(function(){
$(‘#nav’).spasticNav();
});
</script>
.js မှာ Function တစ်ခုစရေးပါမယ်။
(function($) {
})(jQuery);
ပြီးရင် Menu ပေါ်မှာအရည်စက်လေးလို သွားနေတဲ့ Blub လေးတစ်ခုအတွက် Setting တွေစဉ်းစားကြရအောင်
- Navigation Menu Width ထက်အနည်းငယ်ပိုရှည်မယ့် Blub ရဲ့ Overlap ကိုတွက်ချက်ရပါမယ်။
- Blud လေးသွားမယ့် Speed ပါမယ်။
- Reset State ထည့်ရပါမယ်။ ( ဥပမာ။ Navigation Menu ပေါ် Pointer မရှိတဲ့အခါ Home Nav ပေါ်ပြန်ရောက်နေတာကိုပြောတာပါ။ Jeffery Way ရဲ့ Demo မှာကြည့်လို့ရပါတယ်။)
- Blub ရဲ့ Color နဲ့
- Easing တို့ရှိပါမယ်။
Plugins နာမည်ပေးကြပါမယ်။
$.fn.spasticNav = function(options) {
};
$.fn ဆိုတာ jquery-prototype တစ်မျိုးပါပဲ။ options ဆိုတဲ့ parameter တစ်ခုလောက်ယူလိုက်ကြရအောင်။ Plugins ရေးပြီးဆိုရင် အထဲမှာ Setting တွေထည့်ပါမယ်။
options = $.extend({
overlap : 20,
speed : 500,
reset : 1500,
color : ‘#0b2b61′,
easing : ‘easeOutExpo’
}, options);
easing နဲ့ပတ်သတ်ပြီးတော့ easeOutElastic, easeOutBoune အစရှိတဲ့ jQuery UI Effect တွေကို Demo အနေနဲ့ ဒီမှာ ကြည့်လို့ရပါတယ်။ Setting တွေကို ပြောင်းချင်တယ်ဆိုရင်တော့ index.html ထဲက Script Function ထဲမှာ သွားပြောင်းလို့ရပါတယ်။
$(‘#nav’).spasticNav({
speed : 2000,
easing : ‘easeOutElastic’
});
ပြီးရင်တော့ Function ကို Implement ဖြစ်အောင်လုပ်ပါမယ်။ return ပြန်ဖို့ Function ရေးပါမယ်။
return this.each(function() {
});
ပြီးရင် Declaration လုပ်ပါမယ်။
var nav = $(this),
currentPageItem = $(‘#selected’, nav),
blob,
reset;
- nav ဆိုတာက jQuery object တစ်ခုပါ။
- currentPageItem ဆိုတာကတော့ အခု ကိုယ် Pointer တင်ထားတဲ့ Select လုပ်ထားတဲ့ Current Context ကို ရှာဖို့အတွက်ပါ။
- blog ကတော့ ကျွန်တော်တို့ Mouse hover/out လုပ်ရင်ရွေ့သွားမဲ့ ဟာလေးပါ။
- reset ကတော့ clearTimeout ကိုခေါ်ဖို့အတွက်လိုအပ်ပါတယ်။ အဲ့ဒီအတွက်နောက်မှာ ထပ်ပြောပြပါမယ်။
အခုဆိုရင် ကျွန်တော်တို့ရဲ့ Variables တွေကို Declared လည်းလုပ်ပြီးပြီ Initialized လည်းလုပ်ပြီးပြီဆိုတော့ Blub လေးကိုစတင်တည်ဆောက်ကြတာပေါ့။
$(‘<li id=”blob”></li>’).css({
width : currentPageItem.outerWidth() + options.overlap,
height : currentPageItem.outerHeight(),
left : currentPageItem.position().left – options.overlap / 2,
top : currentPageItem.position().top,
backgroundColor : options.color
}).appendTo(this);
ဘာလို့ ဒီတိုင်း Class တွေနဲ့ မထည့်ပဲ CSS Method ကိုခေါ်သုံးသလဲလို့ပြောရရင် Value တွေက Current Page ရဲ့ အပေါ်မှာပဲမူတည်နေလို့ပါ။ အဲ့ဒီအတွက် ကျွန်တော်တို့က JavaScript ကိုအသုံးပြုပြီးတော့ Value တွေကို ရယူပါမယ်။
- width ကတော့ currentPageItem ရဲ့ Border တွေကော Padding တွေပါပါ၀င်တဲ့ Width ပါ။ Overlap အတွက်လည်း Blob အပြင်ကိုအနည်းငယ်ရှည်ထွက်စေဖို့အတွက်ပါထပ်ပေါင်းထားပါတယ်။
- height က currentPageItem ရဲ့ height ပေါ့
- left ကတော့ Blob ကိုလက်ရှိဘယ်ဘယ် Nav မှာထားမယ်
- top ကိုတော့ Blob ကို အပေါ်ဆုံး Nav မှာထားဖို့ပါ
- backgroundColor ကတော့ background color ပဲပေါ့။
ပြီးရင်တော့ new list item ကို this ဒါမှမဟုတ် #nav ထဲပေါင်းထည့်ပါမယ်။
blob = $(‘#blob’, nav);
ဆက်ပြီးတော့ Blob အလုပ်လုပ်ဖို့အတွက် Hover function တွေဆက်ရေးကြရအောင်။ အဓိက Vertical LavaLamp ကတော Top Position ကိုသတ်မှတ်ပေးဖို့ပဲလိုပါတယ်။
$(‘li:not(#blob)’, nav).hover(function() {
// mouse over
clearTimeout(reset);
blob.animate(
{
top : $(this).position().top,},
{
duration : options.speed,
easing : options.easing,
queue : false
}
);
}, function() {
// mouse out
reset = setTimeout(function() {
blob.animate({top : currentPageItem.position().top
}, options.speed)
}, options.reset);});
အားလုံးပြီးသွားရင်တော့ ကျွန်တော်တို့ရဲ့ ကိုယ်ပိုင်.js file လေးပြီးပါပြီ။ CSS နဲ့ဆက်လက်လုပ်ကြရအောင်။
#container {
width: 960px;
margin: 40px 60px;
}ul, li {
margin: 0; padding: 0;
}
container တစ်ခုလုံးကို 960px ပဲယူလိုက်ပါမယ်။ margin: 0 auto; နဲ့အဆင်ပြေပေမယ့် အခုတော့ 40px 60px နဲ့ပဲယူထားလိုက်ကြရအောင်။ အဓိပ္ပာယ်က top-bottom 40px, left-right 60px ပေါ့။ ul, li ရဲ့ margin, padding တွေကိုတော့ 0 ထားပြီး reset ချထားပါမယ်။
#nav {
position: relative;
background: #e2e2e2;
float: none;
width: 500px;
}
nav အတွက် position ကို relative ထားပါမယ်။ Background အရောင်ကို တော့မိမိနှစ်သက်တဲ့အရောင်ထားလို့ရပါတယ်။ ကျွန်တော်ကတော့ လောလောဆည် #e2e2e3 ပဲသုံးထားပါတယ်။ nav ရဲ့ width ကိုလည်း မကျယ်လွန်း မကျဉ်းလွန်း 500px ယူလိုက်ပါတယ်။ ( Navigation Menu မှာပါတဲ့ text length နဲ့ညှိရမှာပါ )။
#nav li {
float: none;
list-style: none;
display: inline-block;
width: 500px;
border-top: 1px solid #e9e9e9;
border-bottom: 1px solid white;
}
ပြီးရင် nav တစ်ခုချင်းဆီရဲ့ li ကိုပြင်ပါမယ်။ float: none; ကမထည့်လဲရပါတယ်။ Horizontal လုပ်မယ်ဆိုရင်တော့ float: left; ထည့်ပေးဖို့လိုပါမယ်။ List bullet တွေဖျောက်ဖို့အတွက် list-style: none; width ကတော့ Padding တွေ Margin တွေမရှိတဲ့အတွက် Nav မှာထည့်ထားတဲ့ Width ပဲပြန်ထည့်ပါမယ်။ ပြီးရင် Border ထည့်မယ်။ 1px solid <color>; ။ အရောင်တစ်ရောင်ထဲသုံးချင်ရင်တော့ border: ဆိုပြီးရပေမယ့် top ပဲထည့်ချင်ရင် border-top, border-bottom, border-right, border-left တွေလိုပါမယ်။ ဆက်ပြီးတော့ blob လေးကိုပြုပြင်ရအောင်။
#blob {
border-top: 1px solid #0059ec;
border-bottom: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background: -moz-linear-gradient(top, red, maroon);
background: -webkit-gradient(linear, left top, left bottom, from(maroon), to(red));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;}
Border တွေထည့်မယ်။ Position ကို absolute ထားပါမယ်။ ဘာကြောင့်လဲဆိုတော့ သူက Nav li အပေါ်မှာ သွားနေရမှာမို့ပါ။ အဲ့ဒါကြောင့် z-index ကိုလည်း 1 ထားပါမယ်။ Background ထည့်ပါမယ်။ -moz-linear-gradient နဲ့ -webkit-gradient ကတော့ Gradient color တွေထည့်တာပါ။ IE မှာတော့ အလုပ်လုပ်မှာမဟုတ်ပါဘူး။ ပြီးရင် Border radius တွေထည့်မယ်။ အဲ့လောက်ဆိုရင်တော့ ကျွန်တော်တို့ Blub လေးကတော်တော်လေးတော့ ကြည့်ကောင်းနေပါပြီ။
#nav li a {
color: #0f0f0f;
position: relative;
z-index: 2;
float: left;
font-size: 20px;
font-family: Yunghkio;
text-decoration: none;
padding: 10px 45px;
}
ပြီးရင် Menu Bar က a တွေကိုပြင်ရအောင်။ Font Color ကို color: #0f0f0f, position ကို relative ထည့်မယ်။ z-index ကို 2 ထည့်တာက ခုနက ထည့်ထားတဲ့ blub အပေါ်မှာ ဥပမာ၊၊ Home ဆိုတဲ့စာလုံးမြင်ရအောင်ထည့်ထားတာပါ။ Blub က z-index: 2 ဆိုရင် #nav li a က 2 ထက်များတဲ့ ဂဏာန်းတစ်ခုခုပေါ့။
အားလုံးပြီးသွားရင်တော့ ကျွန်တော်တို့ရဲ့ Vertical-Style Lava Lamp Navigation Menu လေးတစ်ခုရပါပြီ။ မှားနေသည့်အချက်များ ရှိပါက ထောက်ပြကြပါ။ ကျေးဇူးတင်ပါတယ်။
Facebook comments:
