হরিজন্টাল নেভিগেশন বার | সি এস এস বাংলা টিউটোরিয়াল

হরিজন্টাল নেভিগেশন বার (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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।



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

কপি রাইট © ২০১১-২০১২ সর্বস্বত্ত্ব সংরক্ষিত, টিউটরিয়ালবিডি, একটি টিউটো ওয়েবস প্রতিষ্ঠান.