ওয়েব পৃষ্ঠাগুলির নেভিগেশন ন্যাভিগেশন একটি তালিকা একটি ফর্ম, এবং ট্যাবড ন্যাভিগেশন একটি অনুভূমিক তালিকা মত। সিএসএসের সাথে অনুভূমিক ট্যাবড নেভিগেশান তৈরি করা মোটামুটি সহজ, তবে সিএসএস 3 তাদের আরও নিখরচায় দেখতে আরও কয়েকটি সরঞ্জাম দেয়।
এই টিউটোরিয়ালটি আপনাকে CSS ট্যাবযুক্ত মেনু তৈরি করতে প্রয়োজনীয় HTML এবং CSS এর মাধ্যমে নিয়ে যাবে। এটা দেখতে হবে যে লিঙ্কটি ক্লিক করুন।
এই ট্যাবযুক্ত মেনু ব্যবহার করেকোন ছবি নেই, শুধু এইচটিএমএল এবং CSS 2 এবং CSS 3. এটি আরও ট্যাব যুক্ত করতে বা তাদের মধ্যে পাঠ্য পরিবর্তন করতে সহজেই সম্পাদনা করা যেতে পারে।
ব্রাউজার সমর্থন
এই ট্যাব মেনু কাজ করবেসব প্রধান ব্রাউজার। ইন্টারনেট এক্সপ্লোরার গোলাকার কোণগুলি দেখাবে না, তবে অন্যথায়, এটি ফায়ারফক্স, সাফারি, অপেরা এবং ক্রোমের মতো ট্যাবগুলি দেখাবে।
আপনার মেনু তালিকা লিখুন
সমস্ত ন্যাভিগেশন মেনু এবং ট্যাব সত্যিই একটি unordered তালিকা। তাই আপনি যা করতে চান তা প্রথমটি হল আপনার ট্যাবড নেভিগেশান যেতে চান এমন লিঙ্কগুলির একটি তালিকাভুক্ত তালিকা লিখুন।
এই টিউটোরিয়ালটি ধরে নেওয়া হচ্ছে যে আপনি আপনার HTML টি একটি টেক্সট এডিটরতে লিখছেন এবং আপনি আপনার ওয়েব পৃষ্ঠায় আপনার মেনুতে HTML কোথায় রাখতে হবে তা আপনারা জানেন।
এই মত আপনার unordered তালিকা লিখুন:
বর্গ = "tablist">সিএসএস 3আইডি = "বর্তমান"> ট্যাবজন্যমেনু
বর্গ = "tablist"এবংআইডি = "বর্তমান"।প্রথম প্রয়োজনীয়। যদি আপনি না রাখাtablistআপনার unordered তালিকা ক্লাস, ট্যাব কাজ করবে না। দ্বিতীয় ঐচ্ছিক। স্থাপন করাআইডি = "বর্তমান"যে কোন ট্যাবে আপনি যে পৃষ্ঠায় হাইলাইট করতে চান। আমরা সাধারণত এটির পৃষ্ঠাটি হাইলাইট করার জন্য এটি ব্যবহার করি, তবে আপনি সবচেয়ে গুরুত্বপূর্ণ ট্যাবটি হাইলাইট করতে এটি ব্যবহার করতে পারেন। অথবা আপনি সম্পূর্ণরূপে এটি অপসারণ করতে পারেন।
আপনার স্টাইল শীট সম্পাদনা শুরু করুন
আপনি একটি বহিরাগত স্টাইল শীট বা একটি অভ্যন্তরীণ শৈলী শীট ব্যবহার করতে পারেন। নমুনা মেনু পাতা একটি অভ্যন্তরীণ শৈলী শীট ব্যবহার করে
নথিপ্রথম আমরা নিজেই স্টাইল স্টাইল করব
আমরা ক্লাস ব্যবহার যেখানে এইtablist এইচটিএমএল মধ্যে। UL ট্যাগটি স্টাইল করার পরিবর্তে, আপনার পৃষ্ঠাতে সমস্ত অকার্যকর তালিকাগুলি স্টাইল করবে, আপনাকে কেবলমাত্র UL ক্লাসটি স্টাইল করতে হবে।tablist তাই আপনার CSS এ প্রথম এন্ট্রি হওয়া উচিত:
.tablist {}
আমরা শেষ সময়ের শেষে শেষ কোঁকড়া বন্ধনী (}) রাখতে চাই, তাই আমরা পরে তা ভুলে যাব না।
ট্যাব মেনু তালিকার জন্য আমরা একটি অকার্যকর তালিকা ট্যাগ ব্যবহার করছি, কিন্তু আমরা যে কোনও বুলেট বা সংখ্যা ক্রমানুসারে চাই না। সুতরাং আপনি যে প্রথম শৈলীটি যুক্ত করতে চান তা হল।তালিকা-শৈলী: কেউ না; এটি ব্রাউজারকে বলে যে এটি একটি তালিকা থাকা সত্ত্বেও এটি কোন পূর্বনির্ধারিত শৈলী (বুলেট বা সংখ্যাগুলির মতো) সহ একটি তালিকা।
তারপরে, আপনি যে স্থানটি পূরণ করতে চান তার সাথে মেলে আপনার তালিকার উচ্চতা সেট করতে পারেন। আমরা আমাদের উচ্চতার জন্য 2em বেছে নিলাম, যেটি আদর্শ ফন্ট সাইজের দ্বিগুণ, এবং ট্যাবের পাঠ্যটির উপরে ও নীচের অর্ধেক এমএম দেয়।উচ্চতা: 2em; কিন্তু আপনি আপনার পছন্দমত আকারে আপনার প্রস্থ সেট করতে পারেন। UL ট্যাগগুলি স্বয়ংক্রিয়ভাবে 100% প্রস্থটি গ্রহণ করবে, তাই যদি আপনি এটি বর্তমান কন্টেইনারের চেয়ে ছোট হতে না চান তবে আপনি প্রস্থ ছাড়তে পারেন।
অবশেষে, যদি আপনার মাস্টার স্টাইলশীটটির UL এবং OL ট্যাগগুলির জন্য প্রিসেট থাকে না, তবে আপনি এটিতে রাখতে চাইবেন। এর অর্থ হল আপনার সীমারেখা সীমানা, মার্জিন এবং প্যাডিং বন্ধ করা উচিত। প্যাডিং: 0; মার্জিন: 0; সীমানা: কেউ নেই; যদি আপনি ইতিমধ্যেই UL ট্যাগটি পুনরায় সেট করে থাকেন তবে আপনি আপনার ডিজাইনের সাথে সামঞ্জস্যপূর্ণ এমন কিছুতে মার্জিন, প্যাডিং বা সীমানা পরিবর্তন করতে পারেন।
আপনার চূড়ান্ত। প্রবক্তা বর্গ এই রকম হওয়া উচিত:
.tablist {তালিকা-শৈলী: none; উচ্চতা: 2em; প্যাডিং: 0; মার্জিন: 0; সীমানা: কেউ নেই; }
তালিকা তালিকা আইটেম সম্পাদন
একবার আপনি আপনার unordered তালিকা স্টাইল করেছি, আপনি এটি ভিতরে এলআই ট্যাগ স্টাইল করতে হবে। অন্যথা, তারা আপনার ট্যাব সঠিকভাবে স্থাপন না করেই একটি আদর্শ তালিকা এবং পরবর্তী লাইনের প্রতিটি পদক্ষেপের মত কাজ করবে।
প্রথম, আপনার শৈলী সম্পত্তি সেট আপ করুন:
.tablist li {}
তারপর আপনি আপনার ট্যাব ভাসতে চান যাতে তারা অনুভূমিক প্লেনে লাইন আপ হয়। ভাসা: বামে;
এবং ট্যাবগুলির মধ্যে কিছু মার্জিন যোগ করতে ভুলবেন না, তাই তারা একত্রে মিশে না। মার্জিন ডান: 0.13em;
আপনার লি শৈলী এই মত হওয়া উচিত:
.tablist li {float: বাম; মার্জিন ডান: 0.13em; }
ট্যাবগুলি তৈরি করা CSS এর সাথে ট্যাবগুলির মতো দেখতে 3
এই স্টাইলশীটে ভারী উত্তোলনের বেশিরভাগ কাজ করার জন্য, আমরা তালিকাভুক্ত তালিকাগুলির মধ্যে লিঙ্কগুলি লক্ষ্য করছি। ব্রাউজারগুলি সনাক্ত করে যে লিঙ্ক অন্য ট্যাগের চেয়ে একটি ওয়েব পৃষ্ঠায় আরো বেশি কিছু করে, তাই যদি আপনি অ্যাঙ্কর ট্যাগ (লিঙ্ক) এ সংযুক্ত করেন তবে হোভার স্টেটসগুলির মতো জিনিসগুলি মেনে চলার জন্য পুরানো ব্রাউজারগুলি সহজতর করা সহজ। তাই প্রথমে আপনার শৈলী বৈশিষ্ট্য লিখুন:
.tablist li একটি {}। Tablist li একটি: হভার {}
যেহেতু এই ট্যাবগুলি কোনও অ্যাপ্লিকেশনের ট্যাবগুলির মতো কাজ করতে হবে, তাই আপনি ট্যাবের সমগ্র এলাকাটিকে কেবল লিঙ্কযুক্ত পাঠ্য নয়, ক্লিকযোগ্য হতে চান। এটি করার জন্য, আপনাকে একটি ব্লগের উপাদানতে এটির স্বাভাবিক "ইনলাইন" অবস্থা থেকে একটি ট্যাগ রূপান্তর করতে হবে। প্রদর্শন ব্লক; (যদি আপনি পার্থক্য সম্পর্কে আরও জানতে আগ্রহী হন তবে ব্লক লেভেল বনাম ইনলাইন উপাদানগুলি পড়ুন।)
তারপরে, আপনার ট্যাবগুলিকে একে অপরের সাথে সমান্তরাল হতে বাধ্য করার একটি সহজ উপায়, তবে পাঠ্যটির প্রস্থকে ফিট করার জন্য এখনও ফ্লেক্সটি ডান এবং বাম প্যাডিংটিকে একই করে তৈরি করা। আমরা প্যাডিং শর্ট্যান্ডেন্ড সম্পত্তিটি উপরে এবং নিচের দিকে 0 সেট করতে এবং ডান এবং বামে 1em সেট ব্যবহার করি। প্যাডিং: 0 1em;
আমরা লিঙ্কটি আন্ডারলাইনে সরাতে বেছে নিয়েছি, যাতে ট্যাবগুলি লিঙ্কগুলির মতো কম মনে হয়।কিন্তু যদি আপনার শ্রোতা যে বিভ্রান্ত হতে পারে, এই লাইন ছেড়ে। লিংক-প্রসাধন: কেউ না;
ট্যাবগুলির চারপাশে একটি পাতলা সীমানা স্থাপন করে, এটি তাদের ট্যাবগুলির মতো দেখতে দেয়। আমরা চারপাশে সীমান্ত স্থাপন সীমান্ত shorthand সম্পত্তি ব্যবহৃত সীমানা: 0.06 সমতল # 000; এবং তারপর নীচে থেকে এটি অপসারণ সীমানা-নীচে সম্পত্তি ব্যবহার। সীমান্তে নীচে: 0;
তারপরে আমরা ট্যাবগুলির ফন্ট, রঙ এবং ব্যাকগ্রাউন্ড রঙে কিছু সমন্বয় তৈরি করেছি। আপনার সাইটে মেলে যে শৈলী সেট করুন। ফন্ট: গাঢ় 0.88em / 2em আড়াল, জেনেভা, হেলমেটিিকা, সান-সেরিফ; রঙ: # 000; পটভূমি-রঙ: #ccc;
উপরের সব শৈলী নির্বাচক মধ্যে যেতে হবেলি, নিয়ম যাতে তারা সাধারণত নোঙ্গর ট্যাগ প্রভাবিত। তারপরে ট্যাবগুলি আরো ক্লিকযোগ্য হওয়ার জন্য, আপনাকে কয়েকটি রাজ্য নিয়ম যোগ করা উচিত.tablist li একটি: হভার.
ট্যাবটি পপ করার জন্য আমরা পাঠ্য এবং পটভূমির রঙ পরিবর্তন করতে চাই যখন আপনি ওভার মাউস করেন। পটভূমি: # 3cf; রঙ: #fff;
এবং আমরা ব্রাউজারে আরেকটি অনুস্মারক অন্তর্ভুক্ত করেছি যে আমরা চাই যে লিঙ্কটি আন্ডারলাইন না থাকা উচিত। টেক্সট প্রসাধন: কেউ না; আরেকটি সাধারণ পদ্ধতি হল আপনি যখন ট্যাবটির উপর মাউস চাপবেন তখন নিম্নরেখাটি চালু করুন। যদি আপনি এটি করতে চান, এটি পরিবর্তন করুন টেক্সট প্রসাধন: নিম্নরেখা;
কিন্তু সিএসএস 3 কোথায়?
আপনি যদি মনোযোগ দিচ্ছেন তবে আপনি সম্ভবত লক্ষ্য করেছেন যে স্টাইল শীটে কোন CSS 3 শৈলী ব্যবহার করা হয়নি। এটি ইন্টারনেট এক্সপ্লোরার সহ কোনও আধুনিক ব্রাউজারে কাজ করার সুবিধা রয়েছে। কিন্তু ট্যাবগুলি বর্গক্ষেত্রের বাক্সের চেয়ে আরও বেশি কিছু দেখায় না। একটি সিএসএস 3 স্টাইল কল সীমানা-ব্যাসার্ধ যোগ করে (এবং এটি ব্রাউজারের নির্দিষ্ট কলগুলি যুক্ত) আপনি ম্যানিলা ফোল্ডারে ট্যাবগুলির মত আরো দেখতে, আপনি বৃত্তাকার প্রান্তগুলি তৈরি করতে পারেন।
শৈলী আপনি যোগ করা উচিত লি নিয়ম: -webkit সীমানা-টপ-ডান-ব্যাসার্ধ: 0.50em; -webkit সীমানা-টপ-বাম-ব্যাসার্ধ: 0.50em; -moz-সীমান্তে ব্যাসার্ধ-topright: 0.50em; -moz-সীমান্তে ব্যাসার্ধ-topleft: 0.50em; সীমান্ত-টপ-ডান-ব্যাসার্ধ: 0.50em; সীমান্ত-টপ-বাম-ব্যাসার্ধ: 0.50em;
এই আমরা লিখেছেন চূড়ান্ত শৈলী নিয়ম:
.tablist li একটি {প্রদর্শন: ব্লক; প্যাডিং: 0 1em; টেক্সট প্রসাধন: কেউ না; সীমানা: 0.06 সমতল # 000; সীমান্তে নীচে: 0; ফন্ট: গাঢ় 0.88em / 2em আড়াল, জেনেভা, হেলমেটিিকা, সান-সেরিফ; রঙ: # 000; পটভূমি-রঙ: #ccc; / * সিএসএস 3 উপাদান * / ওয়েবকিট-সীমানা-শীর্ষ-ডান-ব্যাসার্ধ: 0.50em; -webkit সীমানা-টপ-বাম-ব্যাসার্ধ: 0.50em; -moz-সীমান্তে ব্যাসার্ধ-topright: 0.50em; -moz-সীমান্তে ব্যাসার্ধ-topleft: 0.50em; সীমান্ত-টপ-ডান-ব্যাসার্ধ: 0.50em; সীমান্ত-টপ-বাম-ব্যাসার্ধ: 0.50em; } .tablist li একটি: হভার {পটভূমি: # 3 সিএফ; রঙ: #fff; টেক্সট প্রসাধন: কেউ না; }
এই শৈলীগুলির সাথে, আপনার একটি ট্যাবযুক্ত মেনু রয়েছে যা সমস্ত প্রধান ব্রাউজারে কাজ করে এবং CSS 3 টি প্রাসঙ্গিক ব্রাউজারগুলিতে চমৎকার মুদ্রিত ট্যাবগুলির মতো দেখায়। পরের পাতাটি আপনাকে আরও বেশি পোষাক করার জন্য এটি ব্যবহার করতে আরো একটি বিকল্প দেয়।
বর্তমান ট্যাব হাইলাইট
আমরা তৈরি এইচটিএমএল, একটি আইডি সঙ্গে তালিকা তালিকা এল ছিল। এটি আপনাকে এক এলিকে বাকি থেকে একটি ভিন্ন স্টাইল দিতে দেয়। সবচেয়ে সাধারণ পরিস্থিতিটি বর্তমান ট্যাবকে কিছু উপায়ে তৈরি করতে হয়। এই বিষয়ে চিন্তা করার আরেকটি উপায় হল যে আপনি যে ট্যাবগুলি লাইভ নন সেগুলি বাদ দিতে চান। আইডি বিভিন্ন পৃষ্ঠাতে যেখানে আপনি তারপর পরিবর্তন।
আমরা উভয় #current একটি ট্যাগ পাশাপাশি #current এ স্টাইল: হোভার sta যাতে উভয় সামান্য ভিন্ন। আপনি রঙ, পটভূমি রঙ, এমনকি যে উপাদান উচ্চতা, প্রস্থ এবং প্যাডিং পরিবর্তন করতে পারেন। পরিবর্তন যা আপনার নকশা ইন্দ্রিয় তোলে।
.tablist li # বর্তমান একটি {পটভূমি রঙ: # 777; রঙ: #fff; } .tablist li # বর্তমান একটি: হভার {পটভূমি: # 39 সি; }
এবং তুমি করে ফেলেছ! আপনি শুধু আপনার ওয়েবসাইটের জন্য একটি ট্যাবযুক্ত মেনু তৈরি করেছেন।
