নেভিগেশনবার যে কোন সাইটের জন্যই একটা অপরিহার্য উপাদান। বর্তমান সময়ে বিভিন্ন ধরণের নেভিগেশনবার ব্যবহার করা হয়, আর এতে ব্যবহার করা হয় বিভিন্ন ধরণের সি এস এস ৩ এবং জেকোয়েরি ইফেক্ট। আজ আমরা নেভিগেশন বারে সি এস এস ৩ এর ট্রানজিশন ইফেক্টের ব্যবহার দেখব। ট্রানজিশন ইফেক্টের ব্যবহার এবং কলাকৌশল লেখাটিতে ট্রানজিশন ইফেক্টের ব্যবহার সম্পর্কে বিস্তারিত প্রজেক্ট সহকারে আলোচনা করা হয়েছে।
এক নজরে দেখে নেয়া যাক আমাদের প্রজেক্টটি
প্রয়োজনীয় এইচ টি এম এল মার্কআপ
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Transition menu </title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<div class=”wrap”>
<ul id=”navigation”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Contact us</a> </li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Technology</a></li>
<li><a href=”#”>Blog</a></li>
</ul>
</div>
</body>
</html>
প্রয়োজনীয় সি এস এস স্ট্যাইল
* {
margin: 0;
padding: 0;
}
html {
background-color: #fff;
height: 100%;
}
body {
color: #333333;
font:arial;
font-size: 12px;
}
.wrap {
margin-left: auto;
margin-right: auto;
margin-top: 30px;
width: 980px;
}
/* main style*/
#navigation, #navigation ul {
list-style: none ;
}
#navigation {
background-color: #0199b5;
float: left;
position: relative;
width: 980px;
}
#navigation > li {
float: left;
}
#navigation li a {
display: block;
text-decoration: none;
-moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
white-space: normal;
}
#navigation > li > a {
color: #ffffff;
display: block;
font-size: 18px;
font-family: arial;
line-height: 49px;
padding: 0 15px;
}
#navigation > li:hover > a, #navigation > a:hover {
background-color: #faed25;
color: #0199b5;
}
#navigation li.activated > a {
background-color: #333333;
color: #ffffff;
}
সম্পূর্ণ প্রজেক্ট
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে প্রদর্শিত ছবির মত দেখাবে।
প্রজেক্ট পর্যালোচনা
* { margin: 0; padding: 0;} এর মাধ্যমে সম্পূর্ণ পেজকে রিসেট করা হয়েছে।
html { background-color: #fff; height: 100%;} এর মাধ্যমে সম্পূর্ণ পেজের জন্য সাদা ব্যাকগ্রাউন্ড কালার নির্ধারণ করা হয়েছে।
body { color: #333333; font:arial; font-size: 12px;} পেজের মধ্যে কোন টেক্সট এর কালার, ফন্ট এবং সাইজ নির্ধারণ করা হয়েছে।
.wrap { margin-left: auto; margin-right: auto; margin-top: 30px; width: 980px;} দ্বারা wrap নামক ক্লাস যুক্ত ডিভ ট্যাগটির মার্জিন এবং চওড়া নির্ধারণ করা হয়েছে। HTML মার্কআপে wrap ডিভ ট্যাগটির মধ্যে navigation আইডি যুক্ত ডিভ ট্যাগটি রয়েছে। যেহেতু margin-left: auto; margin-right: auto; করা হয়েছে সুতরাং নেভিগেশনবারটি মাঝখানে আসবে।
#navigation, #navigation ul { list-style: none ;} এর মাধ্যমে আন অর্ডার লিস্টের গোল বৃত্ত দূর করা হয়েছে।
#navigation { background-color: #0199b5; float: left; position: relative; width: 980px;} নেভিগেশনের ব্যাকগ্রাউন্ড কালার এবং ওয়াইডথ নির্ধারণ করা হয়েছে।
#navigation > li { float: left; } এর মাধ্যমে লিস্টগুলোকে পাশাপাশি আনা হয়েছে।
#navigation li a { display: block; text-decoration: none;
-moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
white-space: normal;
}
এর মাধ্যমে 450ms এর লেখার কালার এবং ব্যাকগ্রাউন্ড ধিরে ধিরে পরিবর্তন হওয়ার ইফেক্ট দেয়া হয়েছে।
#navigation > li > a {
color: #ffffff;
display: block;
font-size: 18px;
font-family: arial;
line-height: 49px;
padding: 0 15px;
}
এর মাধ্যমে নেভিগেশন বারের টেক্সট কালার এবং ফন্ট এবং সাইজ নির্ধারণ করা হয়েছে।
#navigation > li:hover > a, #navigation > a:hover {
background-color: #faed25;
color: #0199b5;
}
এর মাধ্যমে নেভিগেশনবারের কোন লিস্ট এবং এংকর ট্যাগ এর উপর মাউস আনলে ব্যাকগ্রাউন্ড এবং টেক্সট কালার কেমন হবে তা নির্ধারণ করা হয়েছে।
#navigation li.activated > a {
background-color: #333333;
color: #ffffff;
}
এর মাধ্যমে প্রথম লিস্টটি অর্থাৎ Home মেনুটি এক্টিভেট করা আছে এর জন্য স্ট্যাইল নির্ধারণ করা হয়েছে।
………………………………………………………………………………..
জ্ঞন বিজ্ঞানের সংস্পর্শে আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবীর প্রত্যাশায় আজ এখানেই শেষ করছি। সকলের জন্য শুভকামনা রইল।
good