উল্লম্ব ন্যাভিগেশন মেনু তৈরি করতে লিংক ব্যবহার করে

আপনি এইচটিএমএল ঘনিষ্ঠভাবে তাকান, আপনি লক্ষ্য করবেন যে "হোম" লিঙ্ক এছাড়াও আপনার আইরে একটি আইডি আছে। এটি আপনাকে একটি মেনু তৈরি করতে দেবে যা আপনার পাঠকদের জন্য বর্তমান অবস্থান সনাক্ত করে। এমনকি যদি আপনি এই মুহূর্তে আপনার সাইটে এই ধরনের ভিজ্যুয়াল কয়েন থাকার পরিকল্পনা না, আপনি যে তথ্য অন্তর্ভুক্ত করতে পারেন আপনি যদি পরবর্তীতে ক্যু যুক্ত করার সিদ্ধান্ত নেন, তাহলে আপনার সাইটটি তৈরি করার জন্য আপনার কম কোডিং থাকবে।

কোন সিএসএস স্টাইলিং ছাড়াই, এই এক্সএইচএইচটিএমএল মেনুটি একটি আদর্শ অনির্ধারিত তালিকার মত দেখাচ্ছে। বুলেট এবং তালিকা আইটেমগুলি সামান্য ইন্ডেন্ট হয়। কারণ আমি স্থানধারক সংযোগ ব্যবহার করছি, অধিকাংশ ব্রাউজারে ক্লিকযোগ্য (নিম্নরেখাঙ্কিত এবং নীল) হিসাবে লিঙ্কগুলি প্রদর্শন করা হবে না। আপনি যদি উপরের ওয়েবপেজে কোনও ওয়েব পেজে আটকে থাকেন, তাহলে আপনার নেভিগেশানটি এইরকম হবে:

• বাড়ি
• পণ্য
• সার্ভিস
• আমাদের সাথে যোগাযোগ করুন

এটি বেশ বিরক্তিকর এবং একটি মেনু মত অনেক দেখতে না। কিন্তু কেবল কয়েকটি সিএসএস শৈলী তালিকাতে যোগ করা হয়েছে, আপনি একটি মেনু তৈরি করতে পারেন যা আপনাকে গর্ব করে।

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

একটি উল্লম্ব নেভিগেশন মেনু লিখতে খুব সহজ কারণ এটি একটি সাধারণ তালিকা হিসাবে একই ভাবে প্রদর্শন করা হয়: আপ এবং নিচে

তালিকা আইটেম উল্লিখিত পৃষ্ঠাটি উল্লিখিত।

যখন আমি মেনেজ স্টাইল করছি, আমি বাইরে থেকে শুরু করি এবং কাজ করি। এর দ্বারা, এর অর্থ হল যে আমি প্রথম উল্লিখিত উল ন্যাভিগেশন করি এবং তারপর li উপাদানগুলিতে যান এবং তারপর লিঙ্কগুলি ইত্যাদি। এই মেনুতে, প্রথম আপনি মেনু প্রস্থ সংজ্ঞায়িত এটি নিশ্চিত করবে যে এমনকি মেনুর আইটেম দীর্ঘ হলেও, তারা লেআউটের বাকি অংশটি ধাক্কা দেবে না বা অনুভূমিক স্ক্রোলিংয়ের কারণ হবে না।

উল # ন্যাভিগেশন {প্রস্থ: 12 এম; }

একবার আমি প্রস্থ সেট পেয়েছি, আমি তালিকা আইটেম সঙ্গে খেলতে পারেন। এটি আমাকে (বুলেটগুলি পরিত্রাণ পেতে), পটভূমির রং, সীমানা, পাঠ্য বিন্যাস এবং মার্জিনগুলির মত জিনিসগুলিকে সেট করার অনুমতি দেয়।

উল # ন্যাভিগেশন li {
তালিকা স্টাইল: কেউ না;
ব্যাকগ্রাউন্ড-রঙ: # 039;
সীমান্ত-শীর্ষ: কঠিন 1px # 039;
পাঠ্য সাইনইন: বাম;
মার্জিন: 0;
}

একবার আপনি তালিকা আইটেমের জন্য মৌলিক সেট করা হলে আপনি মেনু লিঙ্ক এলাকায় দেখায় কিভাবে সঙ্গে খেলা শুরু করতে পারেন। প্রথম শৈলী উল # ন্যাভিগেশন লাইভ এ এবং তারপর একটি: লিঙ্ক, একটি: পরিদর্শন, একটি: হভার, এবং একটি: সক্রিয় (যদি আপনি তাদের চান)। লিঙ্কগুলির জন্য, আমি একটি ব্লক উপাদান (পরিবর্তে ডিফল্ট ইন লাইন) লিঙ্ক করতে চাই এটি তাদের পুরো জায়গাটি লইতে নিয়ে যায় এবং তারা অনুচ্ছেদের মত আরো কাজ করে, যা তাদের মেনু বোতাম হিসাবে শৈলীতে সহজ করে তোলে.আমরা যা সবসময় করছি তা হল নিম্নরেখা (টেক্সট-প্রসাধন: কেউ নয়); এই হিসাবে তোলে বোতাম আমার মত বোতাম মত আরো।

কিন্তু অবশ্যই, আপনার নকশা বিভিন্ন হতে পারে।

উল # ন্যাভিগেশন একটি একটি {
প্রদর্শন ব্লক;
পাঠ্য-প্রসাধন: কেউ না;
প্যাডিং: .25 এম;
সীমান্তের নীচে: কঠিন 1px # 39f;
সীমানা-ডান: কঠিন 1px # 39f;
}

প্রদর্শন সঙ্গে যে বিজ্ঞপ্তি: ব্লক; লিংক সেট, মেনুর আইটেমের সম্পূর্ণ বক্স ক্লিকযোগ্য, শুধু অক্ষর নয়। এটি ব্যবহারযোগ্যতা জন্য ভাল। যদি আপনি ডিফল্ট নীল, লাল এবং বেগুনি থেকে পৃথক হতে চান তবে লিঙ্ক রং (লিঙ্ক, পরিদর্শিত, হভার এবং সক্রিয়) সেট করতে ভুলবেন না

একটি: লিঙ্ক, একটি: পরিদর্শন {রঙ: #fff; }
একটি: হভার, একটি: সক্রিয় {রঙ: # 000; }

আমি পটভূমির রঙ পরিবর্তন করে হভার স্টেটকে একটু বেশি মনোযোগ দিতে চাই।

একটি: হভার করুন {ব্যাকগ্রাউন্ড-রঙ: #fff; }

আপনি উল্লম্ব মেনু আরও উদাহরণ চাই, নীচের তালিকার সাথে পরামর্শ।

• একটি স্টাইলযুক্ত উল্লম্ব মেনু
• একটি বেসিক উল্লম্ব মেনু টেমপ্লেট
• আপনার সাথে একটি শৈলী উল্লম্ব মেনু এখানে আছেন
• আপনার সাথে একটি বেসিক উল্লম্ব মেনু টেমপ্লেট এখানে আছেন

অনুভূমিক নেভিগেশন মেনু

অনুভূমিক নেভিগেশন মেনু তৈরি করা উল্লম্ব ন্যাভিগেশন মেনুগুলির তুলনায় সামান্য বেশি কঠিন কারণ আপনি এই সত্যটি অফসেট করতে পারেন যে HTML তালিকা উল্লম্বভাবে প্রদর্শন করতে পছন্দ করে। অনুভূমিক মেনু সহ, প্রথমে আপনার নেভিগেশন মেনু তালিকার তৈরি করুন:

<এনএভি>

একটি অনুভূমিক মেনু তৈরি করতে, একইভাবে কাজ করুন যেটি আপনি উল্লম্ব মেনুতে করেছেন। বাহিরের সাথে শুরু করুন এবং কাজ করুন। যেহেতু আমি বাম দিকের কোণে আমার ন্যাভিগেশন শুরু করতে চাই, আমি সেটাকে 0 বাম মার্জিন এবং প্যাডিং দিয়ে সেট করেছিলাম, এবং আমি বাম দিকে এটি তোলার চেষ্টা করেছি। আপনি প্রস্থ সেট করার অভ্যাস পেতে চান যাতে আপনার মেনু আপনার চেয়ে বেশি বা কম জায়গা নেয় না। অনুভূমিক মেনু জন্য, এটি সাধারণত নকশা পূর্ণ প্রস্থ। আমি সম্পূর্ণ তালিকায় একটি পটভূমির রঙ যোগ করেছি যাতে এটি সহজে পড়তে পারে।

উল # গৌণ
ভাসা: বাম;
মার্জিন: 0;
প্যাডিং: 0;
প্রস্থ: 100%;
ব্যাকগ্রাউন্ড-রঙ: # 039;
}

কিন্তু অনুভূমিক গৌণ মেনুর গোপন তালিকা আইটেমগুলির মধ্যে রয়েছে। তালিকা আইটেমগুলি সাধারণত উপাদানগুলিকে ব্লক করে থাকে, যার মানে হল যে তাদের প্রত্যেকের আগে এবং পরে একটি নতুন লাইন থাকে। ব্লক থেকে ইনলাইন প্রদর্শন স্যুইচ করার মাধ্যমে, আপনি তালিকা উপাদানগুলি অনুভূমিকভাবে একে অপরের পাশে লাইন করতে বাধ্য করেন।

উল # ন্যাভিগেশন li {প্রদর্শন: ইনলাইন; }

আমি লিঙ্কগুলি যথোপযুক্তভাবে ঠিক করেছি যেমনটি আমি উল্লম্বভাবে ন্যাভিগেশন মেনুতে তাদের একই রং এবং টেক্সট অলঙ্করণের সাথে ব্যবহার করেছি। আমি বোতামকে অঙ্কন করার জন্য একটি শীর্ষ সীমানা যোগ করেছিলাম যখন তাদের উপর চাপ পড়ে। আমি সরানো শুধুমাত্র জিনিস প্রদর্শন ছিল: ব্লক; যেহেতু newlines ফিরে আসা এবং অনুভূমিক মেনুটি ধ্বংস করবে।

উল # ন্যাভিগেশন একটি একটি {
পাঠ্য-প্রসাধন: কেউ না;
প্যাডিং: .25 এম 1em;
সীমান্তের নীচে: কঠিন 1px # 39f;
সীমান্ত-শীর্ষ: কঠিন 1px # 39f;
সীমানা-ডান: কঠিন 1px # 39f;
}
একটি: লিঙ্ক, একটি: পরিদর্শন {রঙ: #fff; }
উল # ন্যাভিগেশন একটি: হভার {
পটভূমি-রঙ: #fff;
রঙ: # 000;
}

আপনি এখানে অবস্থান তথ্য আছে

এইচটিএমএল এর আরেকটি দিক হল হরারইয়ার আইডেন্টিফায়ার। যদি আপনি আপনার ব্যবহারকারীর বর্তমান অবস্থানটি নির্দেশ করতে আপনার মেনুটি পরিবর্তন করতে চান, তবে একটি পৃথক পটভূমির রঙ বা অন্য শৈলী সংজ্ঞায়িত করতে এই আইডিটি ব্যবহার করুন। যে আইডি অ্যাট্রিবিউটটিকে অন্য পৃষ্ঠায় সঠিক মেনু আইটেমে সরান যাতে বর্তমান পৃষ্ঠাটি সবসময় হাইলাইট করা হয়।

উল # ন্যাভিগেশন li # আপনি একটি {ব্যাকগ্রাউন্ড-রঙ: # 09f; }

আপনি যদি আপনার পৃষ্ঠায় এই শৈলীগুলিকে একত্রিত করেন, তবে আপনি আপনার সাইটের সাথে কাজ করে একটি অনুভূমিক বা উল্লম্ব মেনু বার তৈরি করতে পারেন কিন্তু ভবিষ্যতে দ্রুত ডাউনলোড করতে এবং খুব সহজেই আপডেট করতে পারেন। XHTML + CSS ব্যবহার করে আপনার তালিকাগুলি ডিজাইনের জন্য একটি খুব শক্তিশালী টুল হিসাবে পরিণত করে।

যদি আপনি অনুভূমিক মেনুর আরও উদাহরণ চান, তাহলে নিম্নলিখিতগুলি দেখুন।

• একটি স্টাইল্ড অনুভূমিক মেনু
• একটি মৌলিক অনুভূমিক মেনু টেমপ্লেট
• আপনার সাথে একটি স্টাইল্ড অনুভূমিক মেনু এখানে আছেন
• আপনার সাথে একটি মৌলিক অনুভূমিক মেনু টেমপ্লেট এখানে আছেন