Аккордеон мәзірі: 4 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:24

Тек HTML мен CSS көмегімен көп деңгейлі аккордеон мәзірін жасаңыз.

Мен өз жобаларым үшін Raspberry Pi қолданғаныммен, бұл кез келген веб -серверде жұмыс істей алады.

Белгілі бір веб -элементті құру туралы мысал келтірудің орнына, менің жобаларымда қолданылатын әрбір элементтің жұмыс мысалдарын қамтитын үлгі болуы керек. Жұмыс істейтін нәрсені өзгерту оңай, содан кейін оны іске қосуға тырысады.

Аккордеон мәзірі Raspberry Pi құрылғысының интерфейсі ретінде компьютер, тақта немесе ұялы телефон арқылы қолданыла алады. Мен lighttpd жұмыс істейтін Raspberry Pi қолданған кезде кез келген аппараттық және веб -серверді қолдануға болады.

Әрбір Raspberry Pi жобасының интерфейсі болуы керек. Ұялы телефондар дисплей өлшемінің салыстырмалы түрде кішігірім болуына байланысты. Аккордеон мәзірі телефонның шектеулерін айналдырады (+) және құлату (-) тігінен, қажет болғанша мәзір элементтеріне мүмкіндік береді.

Интернетте аккордеон мәзірлерінің көптеген мысалдары бар. Маған OpenHAB немесе OpenSprinkler көрінісі ұнайды, сондықтан мен ұқсас нәрсені алғым келді.

Осы уақытқа дейін менің Raspberry Pi жобасының мәзірлері өте қарапайым болды. Мен сыртқы келбетке көп уақыт жұмсамадым. Менің интерфейстерімнің көпшілігі тек HTML -де жазылған және CSS қолданылмаған. Мен интерфейс дизайнері емеспін және сыртқы көрініспен жұмыс істеу менің жайлылық аймағымнан тыс. Мен веб -сайттарда жиі жұмыс жасамайтындықтан, мен CSS -ті бірнеше рет үйрендім және ұмытып кеттім. Мен мәзірді бір рет қарап шығуды, түзетуді, содан кейін қайта қолдануды қалаймын.

Менің қосымшаларымда маған қолдау көрсету үшін мәзір қажет:

• басқа веб -сайттарға немесе құрылғыларға сілтемелер,
• мәндерді немесе күйді көрсету және
• құндылықтарды жаңартуға мүмкіндік береді.

Соңғы екеуі HTML мен CSS -тен көп талап етеді.

Маған қанша мәзір қажет болатынын алдын ала білмегендіктен, аккордеон мәзірі икемділікке қажеттілікке қарай мәзірді кеңейтуге мүмкіндік береді.

Менің CSS және HTML-дегі түсініктемелерім біршама жоғары болуы мүмкін, бірақ мен түсініктемелерді қарай аламын және CSS-ті қайта үйренбей, қажеттіліктерімді қанағаттандыру үшін мәзірді қалай өзгерту керектігін білемін. Түсініктемелер CSS-тің HTML-ге қалай әсер ететінін түсінуді жеңілдетеді, екеуінің арасын айналдырмай.

Менде бірнеше басқа талаптар болды:

• Кейде менің үйім интернетке қосылмай қалады. Сонымен, менде мәзір жүйесі сыртқы қаріптерді, API немесе javascript бар сыртқы веб -сайттарға сілтемелерге тәуелді бола алмайды
• Менің отбасымда компьютердің эклектикалық талғамы бар және iPhone, android, MAC, PC және iPad, планшет, сонымен қатар хром, firefox, safari және IE қолданады. Мәзір осының бәрінде жұмыс істеуі керек

Мен бірнеше апта бойы әр түрлі аккордеон мәзірлерін сынап көрдім. Оларды өңдеу, бейімдеу және олардан бас тарту. CSS Scripts веб-сайтында менің барлық талаптарымды қанағаттандыратын және осы нұсқаулықтың негізін құрайтын көп деңгейлі мәзір бар.

1-қадам: Қадам бойынша орнату

MacBook немесе компьютерде терминал терезесін ашып, келесі пәрмендерді орындаңыз:

In элементтерін нақты мәндермен ауыстырыңыз.

Raspberry Pi жүйесіне кіріңіз

$ ssh pi@♣ таңқурай-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/ таңқурай-pi-p.webp

Негізгі каталогқа сақтық көшірме жасаңыз және CSS каталогын жасаңыз және оған өтіңіз

$ cd..

$ 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

Егер сізде таңқурай пи болмаса, онда сіз бұл файлдарды Mac немесе компьютерге жүктей аласыз. Мәзірді Mac немесе компьютерден іске қосу үшін

• index.html немесе екі рет нұқыңыз
• index.html таңдаңыз, тінтуірдің оң жақ түймесімен нұқыңыз және таңдаған шолғышпен ашыңыз.

Егер Raspberry Pi қолданылса, ол веб -серверде жұмыс істеуі керек. Компьютерде немесе Mac компьютерінде шолғышты ашыңыз және URL терезесінде мынаны енгізіңіз:

Asp таңқурай-pi-ip-адресі ♣/index.html

Менің серверім қауіпсіз қосылымды қажет етеді (қос нүктенің айналасындағы бос орындарды алып тастаңыз):

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

Және ол жұмыс істейді!

2 -қадам: Қосымша: Әдебиеттер

• CSS сценарийі Көп деңгейлі аккордеон мәзірі тек HTML мен CSS көмегімен
• W3Schools аккордеон мәзірі
• W3Schools CSS
• W3Schools HTML

3 -қадам: Қосымша: Жаңартулар

4 -қадам: Қосымша: Ақаулықтарды жою

Міне, көмектесетін бірнеше идеялар:

• PHP echo операторларында HTML форматтау үшін, қайтару таңбасын қою үшін соңына «\ r» белгісін қосыңыз
• Ішкі мәзірге арналған топ идентификаторы бірегей болуы керек. Егер ішкі мәзірдің топ идентификаторы бірегей болмаса, оның ішкі мәзірінің элементтері топтық идентификатордың бірінші данасына қосылады.