নেভিগেশন (Navigation) | সি এস এস বাংলা টিউটোরিয়াল

নেভিগেশন (Navigation)

যেকোন ওয়েব সাইটের জন্যই নেভিগেশন একটি গুরুত্বপূর্ণ বিষয়। কারণ ঐ ওয়েব সাইটে কি ধরণের তথ্য আছে এবং কোন ধরণের তথ্য কোথায় আছে তা সহজে খুঁজে পাওয়ার অন্যতম সহজ মাধ্যম হচ্ছে নেভিগেশন বার। মূলত নেভিগেশন বারে একটা ওয়েব সাইটের সকল পেজের লিংক বিশেষ পদ্ধতিতে, আকর্ষণীয়ভাবে প্রদর্শন করা হয়।আগের দিনে HTML টেবিলের মাধ্যমে নেভিগেশন বার তৈরি করা হতো, যা ব্যবহার বান্ধব এবং দেখতেও সুন্দর ছিলো না, কিন্তু বর্তমানে CSS ব্যবহারের মাধ্যমে অনেক সুন্দর নেভিগেশন বার তৈরি করা যায়।প্রকৃত পক্ষে নেভিগেশন বার হচ্ছে কতগুলো লিংক এর লিস্ট।নেভিগেশন বার দুই ধরণের হয়ে থাকে। যেমন;

  • ভার্টিক্যাল নেভিগেশন বার (Vertical Navigation Bar)
  • হরিজন্টাল নেভিগেশন বার (Horizontal Navigation Bar)

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
*{margin:auto; padding:auto;}
body { background: #C99}
#navigation{background:url(images/navigation.png) repeat-x;
margin-top:20px;
width:650px;
height:40px;
font-family:Tahoma;
font-size:14px;}
#navigation ul {
list-style-type:none;
margin-left:auto;}
#navigation ul li {
float:left;
background:url(images/border.png) no-repeat;
background-position:right; }
#navigation ul li a {
padding:10px 28px 10px 20px ;
display:block;
text-decoration:none;
text-align:center;
color: #F69;
font-weight:bold;}
#navigation ul li a:hover {
background: url(images/navov.png) repeat-x;
padding:10px 27px 13px 19px ;
margin:0px 1px 0px 1px;
color:#F3C;}
#home{background:url(images/border.png) left no-repeat;}
</style>

</head>
<body >
<div id="navigation">
<ul>
<li><a href="#"> HOME</a></li>
<li ><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">FORAM</a></li></ul>
</div>
</body>
</html>

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।


লেখকঃ অসীম কুমার
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।

কপি রাইট টিউটোহোস্ট ২০১০-২০১২