jQuery တဲ့လား (၂)
jQuery ကို ဒီတစ်ခါတော့ Menu Navigation အနေနဲ့ သုံးမှာ ဖြစ်ပါတယ်။ Mouse Pointer ကို Menu ပေါ်မှာ ဆွဲလိုက်တဲ့အခါ Fade In/Fade Out အနေနဲ့ Menu တွေကို ပုံဖော်ပေးမှာ ဖြစ်ပါတယ်။
အဆင့် (၁) Photoshop Preparation
- ဒီတစ်ခါတော့ Photoshop ကနေ စမှာ ဖြစ်ပါတယ်။
- New Document တစ်ခုကို 600×200 pixels စကေးနဲ့ ဖွင့်လိုက်ပါ။
- Background Color ကို #ebebeb နဲ့ ဖြည့်လိုက်ပါ။
- ထောင့်မှန်စတုဂံ ပုံစံ Rectangle (600×94 pixels) အချိုးနဲ့ Layer အသစ်တစ်ခု ဆောက်လိုက်ပါ။ (Rectangular Marquee Tool ကို fixed size selection အနေနဲ့ ထားပြီး Document ရဲ့ ထိပ်ပိုင်းမှာ ကလစ်ခေါက်ပြီး ရွေးနိုင်ပါတယ်။ Layer အသစ်ပေါ်မှာ ရွေးပါ။ ပြီးရင် အရောင် တစ်ခုခု ဖြည့်လိုက်ပါ။)
- အသစ်ဆောက်ထားတဲ့ layer ကို Double Click ခေါက်ပြီး Gradient Overlay ကို အောက်မှာ ပေးထားတဲ့ Color တွေအတိုင်း ရွေးပြီး Linear gradient အနေနဲ့ ဖြည့်လိုက်ပါ။
- အသစ်ဆွဲလိုက်တဲ့ Rectangle ရဲ့ အောက်မှာ 1 pixel line တစ်ခုကို color #c9c9c9 ရွေးပြီး ဆွဲလိုက်ပါ။ အောက်မှာ ပြထားတဲ့ ပုံအတိုင်းပေါ့။
- အဲဒီလို ဆွဲထားတဲ့ လိုင်းအောက်မှာ color #FFFFFF ကိုရွေးပြီး လိုင်းတစ်ခု ထပ်ထည့်လိုက်ပါဦး။
- အဖြူရောင်လိုင်းရဲ့ အောက်မှာ နောက်ထပ် Rectangle Box တစ်ခု ဆွဲရပါမယ်။ အပေါ်က အတိုင်းပဲ ဆွဲပါ။ Size ကတော့ height 62px ဖြစ်ပြီး width ကတော့ 600px ဖြစ်ပါတယ်။ ပြီးရင် Gradient Overlay နဲ့ Color Range #eeeeee နဲ့ #f6f6f6 ပါ။ အောင်မှာ ပြထားတဲ့ ပုံအတိုင်းပေါ့။
- အဲဒါပြီးရင်တော့ 1px stoke line နှစ်ခုကို အဲဒီ Rectangle အောက်မှာ ဆွဲလိုက်ပါ။ အပေါ်လိုင်းက grey လိုင်း နောက်တစ်လိုင်းက white line ပါ။ အဲဒီလို ဆွဲပြီးရင် အောက်မှာ ပြထားတဲ့ ပုံမျိုးရလာမှာ ဖြစ်ပါတယ်။
- အပေါ်မှာ ပြထားတဲ့ ပုံအဆင့်ကို ရောက်ပြီဆိုရင် File ကို နောက်ထပ် နာမည် တစ်ခုနဲ့ Save လိုက်ပါ။
အဲဒီလို Copy ပွားလိုက်တယ်ဆိုရင် နောက်တစ်ချိန် ကိုယ်ပြင်ချင်တာတွေ ပြန်ပြင်ဖို့အတွက် အများကြီး အထောက်အကူပြုမှာ ဖြစ်ပါတယ်။
နောက်ထပ်နာမည် တစ်ခုနဲ့ သိမ်းထားတဲ့ PSD ကို Layer Flatten လုပ်လိုက်ပါ။
Flatten လုပ်ထားတဲ့ Image ကို width 2px နဲ့ height ကိုတော့ အပြည့် Select လုပ်လိုက်ပါ။
Image ကို crop လုပ်လိုက်ပါ။
bg.png ဆိုတဲ့ ဖိုင်တစ်ခုအနေနဲ့ သိမ်းလိုက်ပါ။ - Divider အနေနဲ့ သုံးဖို့အတွက် 2px x 62px Document အသစ်တစ်ခုမှာ Zoom လုပ်ပြီး၊ 1px color အနေနဲ့ #f5f5f5 လိုင်းတစ်ခုဆွဲပါ။ နောက်တစ်လိုင်း အနေနဲ့ 1px color #dadada အနေနဲ့ ဘေးမှာ လိုင်းတစ်ခုဆွဲ လိုက်ပါဦး။ ပုံစံကတော့ အောက်မှာ ပြထားတဲ့ ပုံပါ။ ပြီးရင် divider.png ဆိုပြီး သိမ်းလိုက်ပါ။
အဆင့် (၂) HTML File and CSS file Creation
- index.html ဖိုင်ကို ရေးရပါမယ်။ jquery.js ကိုတော့ အရင် jQuery Tutorial မှာ ပြောထားတဲ့အတိုင်း တည်ဆောက်လိုက်ပါ။ index.html မှာ jquery file နဲ့ css ဖိုင်ကို ကြော်ငြာပေးလိုက်ပါ။
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
ဒီတစ်ခါ DIV Tag တွေထည့်ရမှာ ဖြစ်ပါတယ်။
</head>
<body>
<div id="content_wrap"> <!-- content wrap begins here -->
<div id="header">
<h1>Myanmar Tutorials jQuery Navigation Bar</h1>
</div>
<div id="navigation"> <!-- navigation starts here -->
<ul class="nav_links">
<li><a href="#">Page #1</a></li>
<li class="withdiv"><a href="#">Page #2</a></li>
<li class="withdiv"><a href="#">Page #3</a></li>
<li class="withdiv"><a href="#">Page #4</a></li>
<li class="withdiv"><a href="#">Page #5</a></li>
<li class="withdiv"><a href="#">Page #6</a></li>
<li class="withdiv"><a href="#">Page #7</a></li>
<li class="withdiv"><a href="#">Page #8</a></li>
</ul>
</div> <!-- navigation end here -->
</div> <!-- content wrap end -->
</body>
</html>
withdiv ဆိုတာ Divider လေး ထည့်ဖို့ ဖြစ်ပါတယ်။ ကဲ ဒီတစ်ခါ CSS ဖိုင်ဖက်လှည့်ရအောင်။
/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
* {
padding: 0;
margin: 0;
}
body {
background-image: url(images/bg.png);
background-repeat: repeat-x;
background-color: #ebebeb;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #5f5f5f;
}
#content_wrap {
margin: auto;
width: 850px;
margin-top: 0;
margin-right: auto;
margin-left: auto;
}
h1 {
color: #FF0000;
text-align: center;
margin-top: 25px;
}
#header {
float: left;
height: 94px;
width: 850px;
}
#navigation {
float: left;
height: 62px;
width: 850px;
}
.nav_links ul {
margin: 0px;
padding: 0px;
}
.nav_links li {
list-style: none;
display: block;
font-size: 14px;
float: left;
}
.nav_links a {
text-decoration: none;
color: #990000;
display: block;
height: 40px;
padding-top: 22px;
padding-right: 27px;
padding-left: 26px;
}
.nav_links a:hover {
color: #FFFFFF;
background-image: url(images/hover.png);
background-repeat: no-repeat;
margin-top: 2px;
}
.withdiv {
background-image: url(images/divider.png);
background-repeat: no-repeat;
}
အဲဒီ CSS ပြီးသွားရင် ကိုယ်သုံးနေတာ Dreamweaver ဆိုရင်တော့ Design Preview ဆိုတာရှိပါတယ်။ အဲဒီမှာ ကြည့်ရင် ပုံစံပေါ်နေပါပြီ။ ဒီတစ်ခါ hover.png အတွက် ဆွဲပေးရပါမယ်။ အဲဒီအတွက် Dreamweaver ကို Screenshot ရိုက်ပြီး Size အတိအကျကို အောက်မှာ ပြထားတဲ့ ပုံအတိုင်း ယူလိုက်ပါ။ ပြီးရင် ပုံမှာ ပြထားတဲ့အတိုင်း Select လုပ်ပါ။
အဲဒီလို Select ပြီးရင် Document အသစ်ယူလိုက်ပါ။ ပြီးရင် ကြိုက်တဲ့ အရောင်တစ်ခု ဖြည့်လိုက်ပါ။ ကျွန်တော်လုပ်ထားတဲ့ Menu Hover ကတော့
အပေါ်မှာ ပြထားတဲ့ ပုံဖြစ်ပါတယ်။ hover.png ဆိုပြီး images Folder ထဲမှာ ထည့်လိုက်ပါ။ ဒီတစ်ခါ jQuery အလှည့်ပါ။
အဆင့် (၃) jQuery
js Folder ထဲမှာ custom.js ဆိုပြီးပေးလိုက်ပါ။ ပြီးရင် index.html ထဲမှာ jquery.js ကြေငြာထားတဲ့နေရာရဲ့ အောက်မှာ အောက်မှာပေးထားတဲ့ Code ကို ထပ်ထည့် လိုက်ပါ။
<script type="text/javascript" src="js/custom.js"></script>
custom.js ဖိုင်ကို ဖွင့်ပြီး အောက်မှာ ပေးထားတဲ့ Code ကို ရေးလိုက်ပါ။
$(function() {
// OPACITY OF BUTTON SET TO 100%
$(".nav_links a").css("opacity","1.0");
// ON MOUSE OVER
$(".nav_links a").hover(function () {
// SET OPACITY TO 30%
$(this).stop().animate({
opacity: 0.5
}, "slow");
},
// ON MOUSE OUT
function () {
// SET OPACITY BACK TO 100%
$(this).stop().animate({
opacity: 2.0
}, "slow");
});
});
နမူနာကို ကြည့်ချင်တယ် ဆိုရင်တော့ jQuery Navigation ကို ကလစ်ခေါက်လိုက်ပါ။
ရွှင်လန်းချမ်းမြေ့ပါစေ ….
Facebook comments:
