ভার্টিক্যাল নেভিগেশন বার (Vertical Navigation Bar)
যে সকল নেভিগেশন বার ভার্টিক্যালী অবস্থান করে তাদেরকে ভার্টিক্যাল নেভিগেশন বার বলা হয়। সধারণত সাইড বার এবং ফুটারে এ ধরণের নেভিগেশন বার ব্যবহার করা হয়।এ ধরণের নেভিগেশন বার তৈরি করতে সাধারণত এংকর a সিলেক্টরের display: block; অর্থাৎ display প্রোপার্টির মান block ব্যবহার করা হয়। এর ফলে শুধু মাত্র এংকর দ্বারা যে টেক্সটিতে লিংক যুক্ত করা হয়েছে শুধুমাত্র সেই টেক্সটিই নয় বরং পুরো ব্যকগ্রাউন্ড সহ এরিয়া ক্লিকেবল হয় এবং width প্রোপার্টি ব্যবহার করে ব্যকগ্রাউন্ড এরিয়া কতটুকু হবে তা নির্ধারণ করে দেয়া যায়।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
*{margin:auto; padding:auto;}
body { background: #C99}
#navigation {margin-top:50px;}
#navigation li {list-style:none;}
#navigation a {background:#04A3B5;
border:1px solid #165A69;
color:#eee;
font-family:Tahoma, Geneva, sans-serif;
font-size:20px;
padding:5px;
display: block;
width: 150px;
text-decoration:none;
padding-left: 10px;}
#navigation a:hover {
background:#a2b3a1;
color:#C09;}
</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="#">Products</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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত