Creating a Scrollable Website
ကျွန်တော်တို့ Page တွေအများကြီးမလိုပဲ Navigation တွေကို နှိပ်ရုံနဲ့ Scroll ဖြစ်ပြီး သက်ဆိုင်ရာကိုပြတဲ့ Tutorial တစ်ခုရေးကြည့်ရအောင်။ အရင်ဆုံးလိုတာက html file တစ်ခုတည်ဆောက်ပါလိုက်ပါ။
<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <title>Creating a Scrollable Area</title> </head> <body> </body> </html>
yourfile.html ဆိုပြီး save လိုက်ပါ။ ပြီးရင် အောက်က div tag တွေကို body tag နှစ်ခုကြားထဲ ထည့်လိုက်ပါ။
<body> <div id="top"> <div id="title"> </div><!--title ends--> <nav id="navigation"> </nav ><!--navigations ends--> <div id="homepage"> </div><!--homepage ends--> <div id="about"> </div><!--about ends--> <div class="top"> </div><!--top ends--> <div id="gallery"> </div><!--gallery ends--> <div class="top"> </div><!--top ends--> <div id="portfolio"> </div><!--portfolio ends--> <div class="top"> </div><!--top ends--> <div id="contact"> </div><!--contact ends--> <div class="top"> </div><!--top ends--> </div><!--#top ends--> </body>
Top ဆိုတာက ကျွန်တော်တို့ html page ရဲ့အပေါ်ဆုံးနေရာကိုမှတ်ထားတာပါ။ အဲ့ဒီနေရာမှာ ကိုယ်ကြိုက်တဲ့ နာမည်ကိုအသုံးပြုနိုင်ပါတယ်။ nav ဆိုတာက HTML5 မှာပါတာပါ။ nav နေရာမှာ div ဆိုပြီး အသုံးပြုလို့လည်းရပါတယ်။ nav လို့သုံးရတဲ့ကိစ္စက Navigation Area ကိုပိုပြီးမြင်သာအောင်ပါ။ တခြား div တွေကတော့ ကျွန်တော်တို့သွားချင်တဲ့ နေရာတွေကိုသတ်မှတ်ထားတာပါ။ အခုပြောရင်တော့ မြင်သာအုံးမှာမဟုတ်ပါဘူး။ နောက်ပိုင်းမှာ မြင်သာပါလိမ့်မယ်။ အရင်ဆုံး top မှာ ကျွန်တော်တို့ Site Title ထည့်ပါမယ်။ လောလောဆည်တော့ ကျွန်တော်က Tutorials နာမည်ပဲထည့်ထားပါတယ်။
<div id="title"> <h1>Creating a Scrollable Website</h1> </div><!--title ends-->
ဆက်ပြီး navigation အတွက်ရေးပါမယ်။ ကျွန်တော်ကတော့ nav နဲ့ပဲသုံးထားပါတယ်။
<nav id="navigation"> <ul> <li><a href="#about" class="scroll">About Me</a></li> <li><a href="#gallery" class="scroll">Gallery</a></li> <li><a href="#portfolio" class="scroll">Portfolio</a></li> <li><a href="#contact" class="scroll">Contact Me</a></li> </ul> </nav><!--navigations ends-->
အဲ့ဒီမှာ link ချိတ်ထားတာတွေကို ကြည့်ရအောင်။ #about, #gallery ဆိုတာတွေက ကျွန်တော်တို့သုံးထားတဲ့ div id တွေပါ။ ကျွန်တော်တို့ Link ကို Click နှိပ်လိုက်ရင် သက်ဆိုင်ရာ Div ကိုရောက်သွားမှာပါ။ သက်ဆိုင်ရာ Div မှာ သက်ဆိုင်ရာ စာတွေထည့်ပေးပါ။
<div id="homepage"> <h1>Homepage <br /> <span class="description">This is the Homepage</span></h1> </div><!--homepage ends--> <div id="about"> <h1>About <br /> <span class="description">This is the About Page</span></h1> </div><!--about ends--> <div id="gallery"> <h1>Gallery <br /> <span class="description">This is the Gallery Page</span></h1> </div><!--gallery ends--> <div id="portfolio"> <h1>Portfolio <br /> <span class="description">This is the Portfolio Page</span></h1> </div><!--portfolio ends--> <div id="contact"> <h1>Contact <br /> <span class="description">This is the Contact Me Page</span></h1> </div><!--contact ends-->
အဲ့ဒါဆိုရင်တော့ ဘယ် div ကဘယ်ဟာလဲဆိုတာ ကွဲပြားသွားပြီလို့ထင်ပါတယ်။ ဆက်ပြီးတော့ top ကိုပြန်ရောက်ဖို့အတွက် ရေးကြရအောင်။ ဘာကိုပြောချင်တာလဲဆိုတော့ ကျွန်တော်တို့ အောက်ဆုံး Page ကိုရောက်သွားရင် To Top ဆိုတာကို မြင်ဖူးကြမယ်ထင်တယ်။ အဲ့လိုမျိုးပါပဲ။ top class အတွက်ပါ။ အားလုံးမှာ အောက်ကအတိုင်းလိုက်ထည့်လိုက်ပါ။
<div class="top"> <p><a href="#top" class="scroll">Back To Top</a></p> </div><!--top ends-->
အဲ့ဒါဆိုရင်တော့ html ပိုင်းက အားလုံးလိုလိုပြီးသွားပြီလို့ပြောလို့ရပါတယ်။ CSS, jQuery ချိတ်ဖို့လောက်ပဲလိုပါတော့တယ်။ အခုတော့ CSS ကိုအရင်လုပ်လိုက်ကြရအောင်။ အသေးစိတ်တော့ တစ်ခုခြင်းမရှင်းပြတော့ပါဘူး။ .html file ရှိတဲ့ directory မှာပဲ style.css ဆိုပြီး new file တစ်ခုလုပ်ပါ။ ပြီးရင် အောက်က code တွေကူလိုက်ပါ။
body {
background: #e2e2e2;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#top {
width: 950px;
margin-top: 50px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
#title {
margin: auto;
width: 495px;
clear: both;
}
#navigation {
float:left;
width:100%;
overflow:hidden;
position:relative;
margin-top: 20px;
margin-bottom: 20px;
}
#navigation ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#navigation ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#navigation ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
color:#666666;
text-decoration:none;
line-height:1.3em;
}
#navigation ul li a:hover {
color:#000000;
}
#navigation ul li a.active, #navigation ul li a.active:hover {
color:#000000;
font-weight:bold;
}
#homepage {
float: left;
width: 950px;
height: 800px;
}
#about, #gallery, #portfolio, #contact {
float: left;
width: 950px;
height: 600px;
}
h1 {
color: #5a5a5a;
font-size: 24px;
font-weight: normal;
margin: 0px;
padding: 0px;
}
span.description {
color: #9f9f9f;
font-size: 12px;
}
.top {
float: left;
height: 48px;
width: 950px;
padding-bottom: 35px;
background-position: bottom;
margin-bottom: 20px;
}
.top p {
text-align: center;
color: #999999;
font-size: 10px;
}
a:link {
color: #666666;
}
a:visited {
color: #666666;
}
a:hover {
color: #000000;
}
a:active {
color: #666666;
}
ပြီးရင် stylesheet ကို html file နဲ့ချိတ်ပေးပါမယ်။
<title>Creating a Scrollable Website</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8"> </head>
အဲ့ဒါဆိုရင်တော့ ကျွန်တော်တို့ Webpage လေးက ပုံပေါ်လာပါပြီ။ Link တွေနှိပ်လိုက်ရင်လည်း သက်ဆိုင်ရာ Div တွေကိုသွားပါတယ်။ ဒါပေမယ့် Smooth မဖြစ်ပါဘူး။ jQuery လေးသုံးပြီးစမ်းကြည့်ရအောင်။ အခုအလုပ်လုပ်နေတဲ့ directory မှာပဲ New Folder တစ်ခုဆောက်ပြီး js လို့နာမည်ပေးလိုက်ပါ။ jQuery file တွေသီးသန့်ထားဖို့အတွက်ပါ။ ပြီးရင် scroll.js ဆိုတဲ့ file တစ်ခုဆောက်ပြီး အောက်က jQuery file တွေကိုကူးထည့်လိုက်ပါ။
$(document).ready(function(){
$(".scroll").click(function(event){
//prevent the default action for the click event
event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top}, 500);
});
});
ပြီးရင်တော့ jQuery အလုပ်လုပ်အောင် html file မှာ jquery တွေချိတ်ဖို့လိုပါလိမ့်မယ်။
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8"> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="js/scroll.js" type="text/javascript" charset="utf-8"></script>
jquery.min ကတော့ jQuery Website မှာသွားဒေါင်းလိုက်ပါ။ ပြီးရင်တော့ ကျွန်တော်တို့ရဲ့ Scrollable Website ပြီးသွားပါပြီ။
Credit: Richard Carpenter
Facebook comments:
7 Responses
Leave a comment
About the Author
Ads
Is there any demo about this feature? Thanks.
It would be better if Myanmar tutorials has a space for authors to show demo pages.
Thanks for your advice Bro. I edited my post with original demo file. I hope it’ll help.
Thanks. I can see your demo now. Good feature bro.
You’re welcome. ^^
ကျွန့်တော့ ကျောင်း ကရောဂျက်မှာ ယူသုံးလိုက်တော့မယ်။ ကျေးဇူးပဲနော်။
ပရောဂျက်*
Yes, It’s ok bro.