Awesome! টিউনস
সকল Awesome! টিউনস

নেভিগেশন বারে ট্রানজিশন ইফেক্টের ব্যবহার

1,557 দেখা 1 টিউমেন্টস জোসস
টিউন বিভাগ সিএসএস
প্রকাশিত
Level 0

162 টিউনস 69 টিউমেন্টস 1 ফলোয়ার

website_designনেভিগেশনবার যে কোন সাইটের জন্যই একটা অপরিহার্য উপাদান। বর্তমান সময়ে বিভিন্ন ধরণের নেভিগেশনবার ব্যবহার করা হয়, আর এতে ব্যবহার করা হয় বিভিন্ন ধরণের সি এস এস ৩ এবং জেকোয়েরি ইফেক্ট। আজ আমরা নেভিগেশন বারে সি এস এস ৩ এর ট্রানজিশন ইফেক্টের ব্যবহার দেখব। ট্রানজিশন ইফেক্টের ব্যবহার এবং কলাকৌশল লেখাটিতে ট্রানজিশন ইফেক্টের ব্যবহার সম্পর্কে বিস্তারিত প্রজেক্ট সহকারে আলোচনা করা হয়েছে।

এক নজরে দেখে নেয়া যাক আমাদের প্রজেক্টটি

 

 

প্রয়োজনীয় এইচ টি এম এল মার্কআপ

<!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>

<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 মেনুটি এক্টিভেট করা আছে এর জন্য স্ট্যাইল নির্ধারণ করা হয়েছে।

………………………………………………………………………………..

জ্ঞন বিজ্ঞানের সংস্পর্শে আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবীর প্রত্যাশায় আজ এখানেই শেষ করছি। সকলের জন্য শুভকামনা রইল।

পোস্ট লিখেছেন টিউটোহোস্টের অসীম কুমার ।
পূর্বে প্রকাশিত টিউটোরিয়ালবিডি ব্লগে।

Level 0

আমি টিউটোহোস্ট। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 162 টি টিউন ও 69 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউটোহোস্ট বাংলাদেশের একটি জনপ্রিয় ওয়েব হোস্টিং সেবাদানকারী প্রতিষ্ঠান। যুক্তরাস্ট্র এবং যুক্তরাজ্য ভিত্তিক দ্রুতগতির বেশ কিছু ওয়েব সারভারে গুরুত্বপূর্ণ তথ্যগুলো নিরাপদে সংরক্ষণ করা হয়। আমরা এদেশে ২৪ ঘন্টা এবং বছরে ৩৬৫ দিন অনলাইন এবং ফোন সাপোর্টের ব্যবস্থা রেখেছি। বাংলেদশসহ অনেক দেশের জনপ্রিয় ওয়েবসাইট আমাদের সারভার ব্যবহার করছে।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

awesome bro thank’s to it.