সিএসএস এর পার্ট -২৫| সিএসএস এর নেভিগেশন




 নেভিগেশন


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

i) ভার্টিক্যাল নেভিগেশন বার
ii) হরিজন্টাল নেভিগেশন বার



লিংক তালিকা

একটি ন্যাভিগেশন বার তৈরি করার জন্য প্রথমে একটি এইচটিএমএল কাঠামোর প্রয়োজন হয়।
আমাদের উদাহারনে আমরা ন্যাভিগেশন বার তৈরি করেছি সাধারণ এইচটিএমএল লিস্ট (li) ট্যাগের মাধ্যমে। মূলত ন্যাভিগেশন বার হল একটি লিংকের তালিকা বা লিস্ট। তাই আমরা <ul></ul> এবং <li></li> ট্যাগগুলো ব্যাবহার করব।


<body>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</body>


এখন এই তালিকা থেকে বুলেট (গোল কাল বৃত্ত) এবং মার্জিন এবং প্যাডিং সরিয়ে দেওয়া হল:


<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
</style>
</head>

লিস্ট স্টাইল টাইপ নান( list-style-type: none;) দ্বারা বুলেটগুলোকে মুছে ফেলা হয়েছে। ব্রাউজার এর ডিফল্ট সেটিংস মুছে ফেলার জন্য মার্জিন এবং প্যাডিং 0 সেট করা হয়েছে।
এখন লক্ষ করতে হবে যে, উপরের উদাহারনে যে কোডটুকু লেখা হয়েছে তা প্রত্যেক ন্যাভিগেশন বার তৈরি করতে লিখতে হবে হোক তা হরিজন্টাল বা ভারটিকাল।


উদাহরণ ::-


<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>




ভার্টিক্যাল নেভিগেশন বার

একটি ভারটিকাল ন্যাভিগেশন বার তৈরির জন্য আমাদের শুধু উপরের কোড থেকে <a> উপাদানটির স্টাইল পরিবর্তন করতে হবে।


<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li a {
    display: block;
    width: 60px;
    background-color: #dddddd;
}
</style>
</head>

এখানে display: block দ্বারা লিংকটিকে একটি ব্লক এলিমেন্টে রূপান্তরিত করা হয়েছে যার ফলে লিংকটি তার ব্লকের পুরো জায়গা দখল করবে এতে শুধু লিংকের লেখাটি ক্লিকেবল হবে না পুরো জায়গাটিই ক্লিকেবল হবে। এবং width: 60px দ্বারা বুঝা যায় আমরা লিংক ব্লকটির জন্য ৬০পিক্সেল পরিমাণ জায়গা নিবো যদিও ব্লক সবসময় সম্পূর্ণ জায়গা দখল করে।
Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS শিখুন</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>



হরিজন্টাল ন্যাভিগেশন বার

ইনলাইন লিস্ট পদ্ধতিতে ন্যাভিগেশন বার তৈরির জন্য আমাদের শুধু </li> ট্যাগের স্টাইলের একটা পরিবর্তন করতে হবে।


<head>
<style>
li {
    display: inline;
}
</style>
</head>


সাধারনত লিস্ট স্টাইল এ ডিসপ্লে-ব্লক ডিফল্ট থাকে তাই (display: inline;) ট্যাগের মাধ্যমে এই ডিফল্ট কে পরিবর্তন করে ইনলাইন করা হয়।
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS শিখুন</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>





ফ্লটিং লিস্ট

উপরের উদাহারনে লিংক গুলোর প্রত্যেকের পৃথক পৃথক প্রস্থ থাকবে। কিন্তু সবগুলো লিংকের সমান প্রস্থ এর জন্য লিংক গুলোকে ফ্লট করতে হবে। এর জন্য <li> এর <a> কে স্টাইল করতে হবে।
<head>
<style>
li {
    float: left;
}
</style>
</head>
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS শিখুন</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a href="#about">About</a></li>
</ul>

</body>
</html>

Comments

Popular posts from this blog

How to Show Your Posts on Google's First Page?

31 True Science Facts You Didn't Know...Until Now -

সৌরজগৎ এ প্রথম আন্তঃনাক্ষত্রিক গ্রহাণু