Аккордеон менюсу: 4 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:39

HTML жана CSSти гана колдонуп, көп деңгээлдүү аккордеон менюсун түзүңүз.

Мен долбоорлорум үчүн Raspberry Pi колдонуп жатканымда, бул каалаган веб -серверде иштей алат.

Белгилүү бир веб -элементти кантип түзүүнүн мисалдарын берүүнүн ордуна, менин долбоорлорумда колдонулган ар бир элементтин иштөө мисалдарын камтыган шаблон болушу керек. Иштей турган нерсени өзгөртүү оңоюраак, анан аны иштетүүгө аракет кылуу.

Аккордеон менюсу компьютер, блокнот же уюлдук телефон аркылуу Raspberry Pi түзмөгүнүн интерфейси катары колдонулушу мүмкүн. Мен lighttpd иштеп жаткан Raspberry Pi колдонуп жатканымда, ар кандай аппараттык жана веб -серверди колдонсо болот.

Ар бир Raspberry Pi долбоорунун интерфейси болушу керек. Салыштырмалуу дисплей өлчөмү кичине болгондуктан, уюлдук телефондор эң чектөөчү болуп саналат. Аккордеон менюсу телефондун чектерин тегеретет (+) жана кулатуу (-) вертикалдуу түрдө менюга керектүү нерселерди киргизүүгө мүмкүндүк берет.

Интернетте аккордеон менюларынын көптөгөн мисалдары бар. Мен OpenHAB же OpenSprinklerдин сырткы көрүнүшүн жакшы көргөндүктөн, мен окшош нерсени кааладым.

Буга чейин менин Raspberry Pi долбоорумдун менюсу абдан жөнөкөй болчу. Көрүнүшкө көп убакыт короткон жокмун. Менин интерфейстеримдин көбү HTMLде гана жазылган жана CSS колдонулган эмес. Мен UI дизайнери эмесмин жана сырткы көрүнүштө иштөө менин ыңгайлуу зонамдан тышкары. Мен веб -сайттарда көп иштебегендиктен, CSSти бир нече жолу үйрөндүм жана унутуп койдум. Менюну бир жолу карап, сезип, туура кабыл алып, анан кайра колдонгум келди.

Менин тиркемелеримде, мен колдоо үчүн менюга муктажмын:

• башка вебсайттарга же түзмөктөргө шилтемелер,
• маанилерди же абалды көрсөтүү жана
• баалуулуктарды жаңыртууга уруксат берүү.

Акыркы экөө HTML жана CSSтен көбүрөөк талап кылат.

Мен алдын ала билбегендиктен, мага канча меню керек болот, аккордеон менюсу ийкемдүүлүккө жараша менюну кеңейтүүгө мүмкүндүк берет.

CSS жана HTMLдеги менин комментарийлерим бир аз жогору болушу мүмкүн, бирок мен комментарийлерди карап, CSSти кайра үйрөнбөстөн, менюну менин муктаждыктарымды канааттандыруу үчүн кантип өзгөртүүнү билем. Комментарийлер CSSтин HTMLге кандай таасир этерин түшүнүүмдү жеңилдетет, экөөнүн ортосунда ары-бери жылбастан.

Менде дагы бир нече талаптар бар болчу:

• Кээде менин үйүм интернетке кирбей калат. Ошентип, меню системасы тышкы шрифттерди, APIлерди же javascriptти камтыган тышкы веб -сайттарга шилтемелерден көз каранды боло албайт
• Менин үй -бүлөм компьютердин эклектикалык табитине ээ жана iPhone, Android, MAC, PC жана iPad, планшеттерди, ошондой эле Chrome, Firefox, Safari жана IE колдонот. Меню мунун баарына иштеши керек

Мен бир нече жума ар кандай аккордеон менюсун ишке ашырууга аракет кылдым. Аларды оңдоо, ылайыкташтыруу жана алардан баш тартуу. Веб-сайт, CSS Scripts, менин бардык талаптарыма жооп берген көп баскычтуу менюга ээ жана бул көрсөтмөнүн негизин түзөт.

1-кадам: Этап-этабы менен орнотуу

MacBook же PCте терминал терезесин ачыңыз жана төмөнкү буйруктарды аткарыңыз:

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 же PCке жүктөп алсаңыз болот. Менюну Mac же PCтен иштетүү үчүн

• index.html же эки жолу чыкылдатыңыз
• index.html тандап, оң баскыч менен чыкылдатыңыз жана тандаган браузериңиз менен ачыңыз.

Эгерде Raspberry Pi колдонулса, анда ал веб -серверди иштетип жаткан болушу керек. Компьютериңизде же Mac компьютериңизде браузерди ачыңыз жана URL терезесине киргизиңиз:

♣ малина-pi-ip-дареги ♣/index.html

Менин серверим коопсуз туташууну талап кылат (жоон ичегинин айланасындагы боштуктарды алып салуу):

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

Жана иштейт!

2 -кадам: Тиркеме: Шилтемелер

• CSS скрипти HTML жана CSSти колдонуу менен көп деңгээлдүү аккордеон менюсу
• W3Schools аккордеон менюсу
• W3Schools CSS
• W3Schools HTML

3 -кадам: Тиркеме: Жаңыртуулар

4 -кадам: Тиркеме: Мүчүлүштүктөрдү оңдоо

Бул жерде жардам бере турган кээ бир идеялар:

• HTMLди php echo билдирүүлөрүндө форматтоо үчүн, аягына "\ r" кошуп, кайтаруу белгисин коюңуз
• Суб-меню үчүн топ-id уникалдуу болушу керек. Эгерде суб-менюнун group-id уникалдуу болбосо, анын суб-меню пункттары group-id биринчи инстанциясына кошулат