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