منوی آکاردئون: 4 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:54

فقط با استفاده از HTML و CSS یک منوی آکاردئونی چند سطحی ایجاد کنید.

در حالی که من از Raspberry Pi برای پروژه های خود استفاده می کنم ، این برنامه می تواند بر روی هر سرور وب اجرا شود.

به جای ارائه نمونه هایی از نحوه ایجاد یک عنصر وب خاص ، هدف این است که یک الگو داشته باشید که شامل نمونه های کاربردی هر عنصر مورد استفاده در پروژه های من باشد. آسان تر است چیزی را که کار می کند تغییر دهید ، سپس سعی کنید آن را به کار اندازید.

منوی آکاردئونی را می توان به عنوان رابط دستگاه رزبری پای از طریق رایانه ، پد یا تلفن همراه استفاده کرد. در حالی که من از Raspberry Pi با lighttpd استفاده می کنم ، از هر سخت افزار و سرور وب می توان استفاده کرد.

هر پروژه رزبری پای باید دارای یک رابط باشد. به دلیل اندازه صفحه نمایش نسبتاً کوچک ، تلفن های همراه محدود کننده ترین هستند. منوی آکاردئونی با گسترش (+) و جمع شدن (-) به صورت عمودی اجازه می دهد تا تعداد موارد منو را به میزان لازم محدود کند.

نمونه های زیادی از منوهای آکاردئونی در وب وجود دارد. از آنجا که من ظاهر و ظاهر OpenHAB یا OpenSprinkler را دوست دارم ، من چیزی مشابه آن می خواستم.

تا کنون ، منوهای پروژه Raspberry Pi من بسیار ساده بوده است. من زمان زیادی را برای ظاهر و ظاهر صرف نکردم. اکثر رابط های کاربری من فقط در HTML نوشته شده اند و از CSS استفاده نمی کنند. من طراح UI نیستم و کار روی ظاهر و ظاهر خارج از محدوده راحتی من است. از آنجا که من اغلب در وب سایت ها کار نمی کنم ، CSS را چندین بار یاد گرفته و فراموش کرده ام. من می خواستم منو را یکبار ظاهر و احساس کنم ، آن را درست کرده و سپس دوباره از آن استفاده کنم.

در برنامه های کاربردی من ، منو برای پشتیبانی نیاز دارم:

• پیوندها به وب سایت ها یا دستگاه های دیگر ،
• نمایش مقادیر یا وضعیت و
• اجازه به روز رسانی مقادیر

دو مورد آخر بیش از HTML و CSS نیاز دارند.

از آنجا که من از قبل نمی دانم ، به چند مورد منو نیاز دارم ، منوی آکاردئونی به شما امکان می دهد تا منو را در صورت لزوم گسترش دهید.

ممکن است نظرات من در CSS و HTML کمی بالاتر باشد ، اما من می توانم به نظرات نگاه کنم و بدانم چگونه می توان بدون یادگیری مجدد CSS منو را برای برآوردن نیازهایم تغییر داد. این نظرات همچنین برای من آسان می کند که بفهمم CSS چگونه بر HTML تأثیر می گذارد بدون اینکه بین این دو حرکت کند.

من چند الزام دیگر داشتم:

• بعضی اوقات خانه من دسترسی به اینترنت را از دست می دهد. بنابراین ، من نمی توانم سیستم منو وابسته به پیوندهای وب سایت های خارجی باشد ، که شامل فونت های خارجی ، API ها یا جاوا اسکریپت است
• خانواده من دارای سلایق رایانه ای متفاوت هستند و از iPhone ، android ، MAC ، PC و iPad ، رایانه لوحی و کروم ، firefox ، safari و IE استفاده می کنند. منو باید روی همه این موارد اجرا شود

من چند هفته ای را صرف آزمایش انواع مختلف منوی آکاردئونی کردم. ویرایش آنها ، تطبیق آنها و کنار گذاشتن آنها. وب سایت CSS Scripts دارای منوی چند سطحی است که تمام نیازهای من را برآورده می کند و اساس این دستورالعمل را تشکیل می دهد.

مرحله 1: نصب مرحله به مرحله

پنجره ترمینال را در MacBook یا PC باز کنید و دستورات زیر را اجرا کنید:

مقادیر واقعی را در ♣ ها جایگزین کنید.

وارد Raspberry Pi شوید

$ ssh pi@address آدرس raspberry-pi-ip

تغییر به فهرست اصلی

$ 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

اگر تمشک pi ندارید ، می توانید این فایل ها را در Mac یا PC بارگیری کنید. برای اجرای منو از Mac یا PC ، یا

• روی index.html یا. دوبار کلیک کنید
• index.html را انتخاب کنید ، راست کلیک کرده و با مرورگر دلخواه خود باز کنید.

اگر از Raspberry Pi استفاده می کنید ، باید از وب سرور استفاده کنید. مرورگری را در رایانه شخصی یا Mac خود باز کنید و در پنجره URL آدرس زیر را وارد کنید:

♣ آدرس raspberry-pi-ip ♣/index.html

سرور من به یک اتصال امن نیاز دارد (فضاهای اطراف روده بزرگ را حذف کنید):

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

و کار می کند!

مرحله 2: ضمیمه: منابع

• منوی آکاردئونی چند سطحی CSS فقط با استفاده از HTML و CSS
• منوی آکاردئونی W3Schools
• WSSchools CSS
• W3Schools HTML

مرحله 3: ضمیمه: به روز رسانی

مرحله 4: ضمیمه: عیب یابی

در اینجا ایده هایی وجود دارد که ممکن است به شما کمک کند:

• برای قالب بندی HTML در دستورات php echo ، "\ r" را در انتها اضافه کنید تا یک کاراکتر بازگشتی قرار دهید
• شناسه گروه برای زیر منو باید منحصر به فرد باشد. اگر شناسه گروه زیر منو منحصر به فرد نباشد ، موارد زیر منوی آن در اولین نمونه شناسه گروه قرار می گیرد