মেনুটি সাইটের বিভাগগুলির মাধ্যমে ব্যবহারকারী নেভিগেশন সুবিধার্থে ব্যবহৃত হয়। দর্শনার্থীর দৃষ্টি আকর্ষণ করার জন্য, মেনুটি কার্যকরী হওয়া উচিত, ব্যবহারে সহজ এবং একই সাথে পুরো সংস্থানটির নকশার সাথে মিলিত হওয়া উচিত।
নির্দেশনা
ধাপ 1
একটি মেনু তৈরি করার আগে, এর ধরণ সম্পর্কে সিদ্ধান্ত নিন। আপনি একটি ড্রপ-ডাউন অনুভূমিক বা উল্লম্ব বাক্স তৈরি করতে পারেন যা যখন ব্যবহারকারী তার উপর মাউস কার্সার নিয়ে ঘুরে বেড়ায় তখন ব্যবহারকারীকে প্রদর্শিত হবে। কোনও নির্দিষ্ট মেনু চয়ন করার সময়, দর্শকদের পক্ষে এটি ব্যবহার করা কতটা সুবিধাজনক হবে এবং কীভাবে এটি নকশার সাথে একত্রিত হবে তা দ্বারা আপনি গাইড করতে পারেন।
ধাপ ২
একটি মেনু প্রকার চয়ন করার পরে, আপনি HTML সম্পাদনা করতে যা কিছু টেক্সট সম্পাদক ব্যবহার করে আপনার পৃষ্ঠা ফাইলটি খুলুন। আপনি যেখানে আপনার ইন্টারফেস উপাদানটি প্রবেশ করতে চান সেখানে কোডের পছন্দসই বিভাগে নেভিগেট করুন ate
ধাপ 3
এর পরে, একটি ব্লক তৈরি করে এবং এটি নির্ধারিত আইডি সহ একটি তালিকাযুক্ত তালিকা তৈরি করে বিকল্পগুলির একটি তালিকা তৈরি করুন। উদাহরণ স্বরূপ:
- লিঙ্ক 1
- লিঙ্ক 2
- লিঙ্ক 3
এই উদাহরণে, আমি তিনটি উপাদানের বুলেটযুক্ত তালিকা তৈরি করেছি এবং এটি আইডি প্যানেল আইডি সহ একটি ডিভ স্তরতে রেখেছি।
পদক্ষেপ 4
আপনার পৃষ্ঠার বিভাগ ব্লকে যান এবং উপযুক্ত ক্যাসকেডিং স্টাইল শীট মেনু তৈরি করুন। যদি আপনি একটি অনুভূমিক মেনু তৈরি করতে চান তবে আপনি ফলাফলের তালিকার জন্য ইনলাইন বৈশিষ্ট্যটি অন্তর্ভুক্ত করতে পারেন:
# প্যানেল উল লি {প্রদর্শন: ইনলাইন; }
পদক্ষেপ 5
পৃষ্ঠার সম্পূর্ণ দৈর্ঘ্য বরাবর একটি অনুভূমিক রেখা তৈরি করতে, আপনি নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:
#panel উল {মার্জিন-বাম: 0; প্যাডিং: 2 পিএক্স 0; }
পদক্ষেপ 6
তারপরে আপনি ভিজ্যুয়াল বিভাগটি আয়তক্ষেত্রগুলিতে করতে পারেন:
#panel ul li a {মার্জিন-বাম: 3px; সীমানা: 1px; প্যাডিং: 2px 3px; পটভূমি: নীল; }
এই কোডটি মার্জিন-বাম এবং প্যাডিং বৈশিষ্ট্যের মাধ্যমে সীমান্ত উপাদানগুলি থেকে পাঠ্য সূচকগুলি সেট করে এবং তালিকাগুলির প্রতিটি আইটেমের জন্য একটি পটভূমি রঙ সেট করে। এই উদাহরণে, রঙটি নীল তবে আপনি নিজের বিবেচনার ভিত্তিতে এটি পরিবর্তন করতে পারেন।
পদক্ষেপ 7
ট্যাবটিতে নির্বাচিত বর্তমান পৃষ্ঠায় থাকা আইটেমটির দিকে ইঙ্গিত করতে, খোলা শ্রেণিতে উপযুক্ত পরামিতিগুলি সেট করুন:
# মেনু উল লি একটি # খোলা {পটভূমি: লাল; সীমানা-নীচে: 1px; }
প্যানেলে নির্বাচিত বর্তমান পৃষ্ঠাটি এখন লাল রঙে প্রদর্শিত হবে।
পদক্ষেপ 8
ফাইলটিতে পরিবর্তনগুলি সংরক্ষণ করুন এবং ব্রাউজারের মাধ্যমে আপনার পৃষ্ঠাটি খোলার মাধ্যমে লিখিত কোডটির কার্যকারিতা পরীক্ষা করুন। অতিরিক্ত প্রদর্শন বিকল্প সেট করতে, আপনি সর্বদা অবজেক্টের উপস্থিতি বাড়ানোর জন্য সিএসএস বা এইচটিএমএল যুক্ত করতে পারেন।
