সিএসএস ন্যাভিগেশন - Css Navigation



একটি ন্যাভিগেশন বার এর নমুনা দেখুন -



ন্যাভিগেশন বার

যে কোন ওয়েব সাইটের জন্যই ন্যাভিগেশন বার খুব জরুরি ব্যাপার। একটি সাধারন এবং সুন্দর ন্যাভিগেশন বার ওয়েব পেজকে আকর্ষণীয় করে তোলে। সিএসএস ব্যবহার করে ওয়েব পেজের জন্য সাধারন এবং আকর্ষণীয় ন্যাভিগেশন তৈরি করা যায়।


এইচটিএমএল লিস্ট

ন্যাভিগেশন বার তৈরি করার জন্য এইচটিএমএল এর লিস্ট প্রপার্টি এবং হাইপারলিংক ব্যবহার করতে হবে। এইচটিএমএল লিস্ট ট্যাগের উপাদান গুলোকে সিএসএস এর মাধ্যমে styleing করতে হবে।

একটি ন্যাভিগেশন বার হল আসলে কত গুলো লিংকের একটি সুসজ্জিত লিস্ট যা আনুভুমিক বা উলম্ব হতে পারে।

একটি ন্যাভিগেশন বার তৈরি করার জন্য নীচের কোড গুলো ব্যবহার করতে হবে -

কোড দেখুন

<ul>
<li>
<a href="default.asp">Home</a>
</li>
<li>
<a href="news.asp">News</a>
</li>
<li>
<a href="contact.asp">Contact</a>
</li>
<li>
<a href="about.asp">About</a>
</li>
</ul>


এখন সিএসএস ব্যবহার করে আমরা এই এইচটিএমএল লিস্ট থেকে মার্জিন, প্যাডিং এবং বুলেট সরিয়ে দেই। নীচে এর জন্য সিএসএস কোড দেখুন -

কোড দেখুন

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


ন্যাভিগেশন বার এ কোন লিস্ট স্টাইল মার্কার চিহ্নের প্রয়োজন নেই। তাই লিস্ট স্টাইল মার্কার সরিয়ে বা remove করতে "list-style-type" প্রপার্টি ব্যবহার করে তার মান বা value হিসেবে "none" নির্ধারণ করা হয়েছে। ব্রাউজারের স্বয়ংক্রিয় নির্ধারণ বা browser default setting সরিয়ে বা remove করতে "margin" এবং "padding" প্রপার্টি ব্যবহার করে তাদের মান নির্ধারণ করা হয়েছে।

আনুভূমিক বা উলম্ব যে প্রকার ন্যাভিগেশনই তৈরি করতে চান এই পর্যন্ত কোড গুলো অবশ্যই ব্যবহার করতে হবে।


উলম্ব বা Vertical ন্যাভিগেশন বার

Vertical বা উলম্ব ন্যাভিগেশন বার তৈরি করার জন্য শুধুমাত্র লিংক ট্যাগ গুলো সিএসএস এর মাধ্যমে স্টাইলিং করতে হবে।

নীচে সিএসএস এর কোড দেখুন -

কোড দেখুন

a{
display:block;
width:60px;
}


ব্যাখ্যা -
display:block - এই কোডটুকু আমাদের প্রস্থ বা width নির্দিষ্ট করার অনুমতি দেয়।
width:70px - এবং এই কোডটুকুর ফলে আমরা একটি নির্দিষ্ট মানের প্রস্থ বা width নির্ধারণ করতে পারি।

নোট - Vertical বা উলম্ব ন্যাভিগেশন বার এর ক্ষেত্রে সর্বদা <a> এলিমেন্টের width নির্দিষ্ট করে দিতে হয়, নয়তো IE6 এ তা ভালভাবে প্রদর্শিত নাও হতে পারে।


Vertical ন্যাভিগেশন টেমপ্লেট

Vertical বা উলম্ব ন্যাভিগেশন বার সম্পর্কে আরও ভালভাবে জানার জন্য আমাদের Vertical ন্যাভিগেশন মেনু টেমপ্লেটগুলো দেখুন। Vertical ন্যাভিগেশন টেমপ্লেট ডাউনলোড করতে এখানে ক্লিক করুন।


আনুভূমিক বা Horizontal ন্যাভিগেশন বার

দুই ভাবে আনুভুমিক বা Horizontal ন্যাভিগেশন মেনু তৈরি করা যায়। একটি হল inline এবং অপরটি হল floating লিস্ট।

দুটি পদ্ধতিই ভালভাবে কাজ করে তবে যদি একই আকারের লিঙ্ক তৈরি করতে চান আপনাকে floating পদ্ধতিই ব্যবহার করতে হবে।

Inline লিস্ট

আনুভূমিক বা Horizontal ন্যাভিগেশন মেনু তৈরির একটি পদ্ধতি হল লিস্ট আইটেমগুলোকে Inline এ নির্দিষ্ট করে দেয়া। নিচে এর জন্য কোড দেখুন -

কোড দেখুন

li{
display:inline;
}


ব্যাখ্যা -
display:inline - লিস্ট আইটেম অর্থাৎ <li> এলিমেন্টটি হল ব্লক লেভেল এলিমেন্ট। এখানে আমরা প্রতিটি লিস্ট আইটেমের আগে এবং পরে লাইন ব্রেক( line break) remove করেছি অর্থাৎ সরিয়ে বা মুছে দিয়েছি, ফলে সবগুলো লিংক একটি লাইনে প্রদর্শিত হচ্ছে।
এই পদ্ধতিতে ভিন্ন ভিন্ন লিংকের জন্য বিভিন্ন প্রস্থ বা width প্রদর্শিত হয়।

Floating লিস্ট

Horizontal মেনু তৈরি করার অন্য একটি পদ্ধতি হল float প্রপার্টির ব্যবহার করা। এই পদ্ধতিতে সবগুলো লিস্ট আইটেম বা লিংকের জন্য সমান স্থান প্রদর্শন হবে। নীচে একটি কোড দেখুন -

কোড দেখুন

li{
float:left;
}
a{
display:block;
width:60px;
}


ব্যাখ্যা -
float:left - ব্লক এলিমেন্ট অর্থাৎ লিস্ট আইটেমগুলোকে একটি অন্যটির পাশে স্থাপনের জন্য float প্রপার্টি ব্যবহার করা হয়েছে।
display:block - শুধুমাত্র টেক্সট নয় পুরো লিঙ্ক এরিয়া ক্লিকেবল করার জন্য display প্রপার্টি ব্যবহার করা হয়েছে। তাছারা display প্রপার্টি একটি নির্দিষ্ট প্রস্থ বা width নির্ধারণ করার অনুমতি দেয়।
width:70px - width প্রপার্টি ব্যবহার করে একটি নির্দিষ্ট মানের প্রস্থ নির্ধারণ করা হয়েছে।


আনুভূমিক বা Horizontal ন্যাভিগেশন টেমপ্লেট

আনুভূমিক বা Horizontal ন্যাভিগেশন বার সম্পর্কে আরও ভালভাবে জানার জন্য আমাদের Horizontal ন্যাভিগেশন মেনু টেমপ্লেটগুলো দেখুন। Horizontal ন্যাভিগেশন টেমপ্লেট ডাউনলোড করতে এখানে ক্লিক করুন।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.