.jpeg)
What is Navigation bar, নেভিগেশন বার একটি ওয়েবসাইটের গুরুত্বপূর্ণ অংশ । এটি ওয়েবসাইট কে যেমন সুন্দার করে তেমনি বুঝতে সহজসাধ্য করে । ওয়েবসাইটের নেভিগেশন( responsive )বারে সাধারণত Home, About us, Contact us ,gallery ইত্যাদি দেওয়া হয়ে থাকে এবং তাদের মধ্যো লিংক করা হয় ।
এখন আমরা একটি Navigation bar html code দেখব :-
এই কোড শেষ পর্যন্ত দেখবেন, এখানে কোন <ul> ,<li> কোথায় শেষ হয়েছে সেটা ভালোভাবে দেখবেন । বুঝার সুবিধার জন্য আমি কালার color করে দিয়েছি ।
এছাড়া background image ও আপনারা ঠিক ভাবে দিবেন ।
html code Example :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<meta charset="utf-8">
<title>Navigation Bar Test</title>
<style>
body{
background-image:url(logo.jpg) ;
background-size:cover;
font-family:Arial;
color:white;
}
ul{
margin:0px;
padding:0px;
list-style:none;
}
ul li{
float: left;
width: 100px;
height: 40px;
background-color: black;
opacity:.8;
line-height :40px;
text-align : center;
font-size: 20px
}
ul li a{
text-decoration:none;
color:white;
display:block;
}
ul li a:hover{
background-color: green;
}
ul li ul li{
display:none;
}
ul li:hover ul li{
display:block;
}
ul li:hover ul li ul li{
display:none;
}
ul li:hover ul li:hover ul li{
display:block;
}
</style>
</head>
<body>
<br>
<ul>
<li><a href="#"> Home</a></li>
<li>Gallery
<ul>
<li><a href="#"> Photo</a></li>
<li><a href="#"> Audio</a></li>
<li>Video
<ul>
<li><a href="#"> hd</a></li>
<li><a href="#">convat</a></li>
<li><a href="#"> 3gp</a></li>
</ul>
</li>
</ul>
</li>
<li>Contact
<ul>
<li><a href="#"> Email</a></li>
<li><a href="#"> Phone</a></li>
</ul>
</li>
<li><a href="#"> News</a></li>
</ul>
</body>
</html>
কোর্ড বিশ্লেষণ :-
১.background-image:url(logo.jpg) ; এখানে যে picture দিবেন তার নাম সহ এক্সটেশন দিতে হবে ।
২.<a href="#"> এরকম যেখানে দেওয়া আছে সেখানে # এর বদলে যে লিংক দিবেন তার url অথবা যে local page দিবেন তার নাম এক্সটেশনসহ ।
যেমন <a href="login.html">
৩.video ও contact এর সাথে <a href="#"> এমন ট্যাগ দেওয়া হয় নি কারন Home, Gallery, Video, Contact, News এরা নেভিগেশন option এ নিয়ে যায় ।
.jpeg)
