অ্যাকর্ডিয়ন মেনু: 4 টি ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 08:00

শুধুমাত্র HTML এবং CSS ব্যবহার করে একটি মাল্টি লেভেল অ্যাকর্ডিয়ন মেনু তৈরি করুন।

যখন আমি আমার প্রকল্পগুলির জন্য রাস্পবেরি পাই ব্যবহার করি, এটি যে কোনও ওয়েব সার্ভারে চলতে পারে।

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

একটি অ্যাকর্ডিয়ন মেনু একটি কম্পিউটার, প্যাড বা মোবাইল ফোনের মাধ্যমে রাস্পবেরি পাই ডিভাইসের ইন্টারফেস হিসাবে ব্যবহার করা যেতে পারে। আমি একটি রাস্পবেরি পাই চলমান lighttpd ব্যবহার করার সময়, কোন হার্ডওয়্যার এবং ওয়েব সার্ভার ব্যবহার করা যেতে পারে।

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

ওয়েবে অ্যাকর্ডিয়ন মেনুর অনেক উদাহরণ রয়েছে। কারণ আমি ওপেনহ্যাব বা ওপেনস্প্রিঙ্কলারের চেহারা এবং অনুভূতি পছন্দ করি, আমি অনুরূপ কিছু চেয়েছিলাম।

এখন পর্যন্ত, আমার রাস্পবেরি পাই প্রকল্পের মেনুগুলি খুব সহজ হয়েছে। আমি চেহারা এবং অনুভূতিতে খুব বেশি সময় ব্যয় করি নি। আমার বেশিরভাগ ইন্টারফেস শুধুমাত্র এইচটিএমএল -এ লেখা হয়েছিল এবং কোন সিএসএস ব্যবহার করা হয়নি। আমি একজন UI ডিজাইনার নই এবং চেহারা এবং অনুভূতিতে কাজ করা আমার আরাম অঞ্চলের বাইরে। যেহেতু আমি প্রায়ই ওয়েবসাইটে কাজ করি না, তাই আমি একাধিকবার CSS শিখেছি এবং ভুলে গেছি। আমি মেনুটি একবার দেখতে এবং অনুভব করতে চেয়েছিলাম, এটি ঠিক করেছিলাম এবং তারপরে এটি পুনরায় ব্যবহার করেছি।

আমার অ্যাপ্লিকেশনগুলিতে, আমার সমর্থন করার জন্য মেনু প্রয়োজন:

• অন্যান্য ওয়েবসাইট বা ডিভাইসের লিঙ্ক,
• মান বা স্থিতি প্রদর্শন করুন এবং
• মান আপডেট করার অনুমতি দিন।

শেষ দুটি HTML এবং CSS এর চেয়ে বেশি প্রয়োজন।

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

সিএসএস এবং এইচটিএমএল-এ আমার মন্তব্যগুলি কিছুটা উপরে হতে পারে, তবে আমি মন্তব্যগুলি দেখতে পারি এবং সিএসএস পুনরায় শেখা ছাড়াই আমার প্রয়োজন মেটাতে কীভাবে মেনু পরিবর্তন করতে হয় তা জানতে পারি। মন্তব্যগুলি আমার পক্ষে এটি বোঝা সহজ করে দেয় যে কীভাবে CSS এইচটিএমএলকে দুজনের মধ্যে পিছনে পিছনে না ঘুরিয়ে প্রভাবিত করে।

আমার আরও কয়েকটি প্রয়োজনীয়তা ছিল:

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

আমি কয়েক সপ্তাহ কাটিয়েছি বিভিন্ন অ্যাকর্ডিয়ন মেনু বাস্তবায়নের চেষ্টা করে। তাদের সম্পাদনা, তাদের মানিয়ে নেওয়া এবং তাদের উপর ছেড়ে দেওয়া। ওয়েবসাইট, সিএসএস স্ক্রিপ্ট, একটি বহু-স্তরের মেনু রয়েছে যা আমার সমস্ত প্রয়োজনীয়তা পূরণ করে এবং এই নির্দেশের ভিত্তি গঠন করে।

ধাপ 1: ধাপে ধাপে ইনস্টল করুন

একটি ম্যাকবুক বা পিসিতে টার্মিনাল উইন্ডো খুলুন এবং নিম্নলিখিত কমান্ডগুলি চালান:

আইটেমগুলিকে প্রকৃত মান দিয়ে প্রতিস্থাপন করুন।

রাস্পবেরি পাইতে লগইন করুন

$ ssh pi@♣ raspberry-pi-ip-address

প্রধান ডিরেক্টরিতে পরিবর্তন করুন

$ cd /var /www

Index.html ডাউনলোড করুন এবং অনুমতি এবং ফাইলের মালিক পরিবর্তন করুন

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/index.html"

$ sudo chmod 774 index.html $ sudo chown pi index.html

ছবির জন্য একটি ডিরেক্টরি তৈরি করুন এবং সেই ডিরেক্টরিতে যান

$ mkdir img

$ cd img

ছবিগুলি ডাউনলোড করুন এবং মালিক পরিবর্তন করুন।

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/tv.png"

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/menu-icon.png" $ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/ raspberry-pi-p.webp

প্রধান ডিরেক্টরিতে ব্যাকআপ করুন, এবং CSS ডিরেক্টরি তৈরি করুন এবং এটিতে যান

$ সিডি..

$ mkdir css $ cd css

স্টাইল শীট ডাউনলোড করুন, এবং অনুমতি এবং ফাইলের মালিক পরিবর্তন করুন

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/style.css"

$ sudo chmod 744 style.css $ sudo chown pi style.css

আপনার যদি রাস্পবেরি পাই না থাকে তবে আপনি এই ফাইলগুলি ম্যাক বা পিসিতে ডাউনলোড করতে পারেন। ম্যাক বা পিসি থেকে মেনু চালানোর জন্য, হয়

• index.html এ ডাবল ক্লিক করুন, অথবা
• index.html নির্বাচন করুন, ডান ক্লিক করুন এবং আপনার পছন্দের ব্রাউজার দিয়ে খুলুন।

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

♣ রাস্পবেরি-পাই-আইপি-ঠিকানা index/index.html

আমার সার্ভারের জন্য একটি নিরাপদ সংযোগ প্রয়োজন (কোলনের চারপাশের স্থানগুলি সরান):

♣raspberry-pi-ip-address♣/index.html

এবং এটি কাজ করে!

ধাপ 2: পরিশিষ্ট: তথ্যসূত্র

• CSS স্ক্রিপ্ট মাল্টিলেভেল অ্যাকর্ডিয়ন মেনু শুধুমাত্র HTML এবং CSS ব্যবহার করে
• W3Schools Accordion মেনু
• W3Schools CSS
• W3Schools HTML

ধাপ 3: পরিশিষ্ট: আপডেট

ধাপ 4: পরিশিষ্ট: সমস্যা সমাধান

এখানে কিছু ধারণা আছে যা সাহায্য করতে পারে:

• পিএইচপি ইকো স্টেটমেন্টে এইচটিএমএল ফরম্যাট করার জন্য, রিটার্ন ক্যারেক্টারে রাখার জন্য শেষে "\ r" যোগ করুন
• সাব-মেনুর জন্য গ্রুপ-আইডি অবশ্যই অনন্য হতে হবে। যদি একটি সাব-মেনুর গ্রুপ-আইডি অনন্য না হয় তবে তার সাব-মেনু আইটেমগুলি গ্রুপ-আইডির প্রথম দৃষ্টান্তে অন্তর্ভুক্ত করা হবে