Калкып чыкма менюну кантип түзүү керек

Мазмуну:

Калкып чыкма менюну кантип түзүү керек
Калкып чыкма менюну кантип түзүү керек

Video: Калкып чыкма менюну кантип түзүү керек

Video: Калкып чыкма менюну кантип түзүү керек
Video: ? АКЫСЫЗ МОКУПТАРДЫ кантип жасоого болот ? АКЫСЫЗ МО 2024, Ноябрь
Anonim

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

Калкып чыкма менюну кантип түзүү керек
Калкып чыкма менюну кантип түзүү керек

Нускамалар

1 кадам

Алгач негизги меню тилкесин кармаңыз. Тексттик редактордогу подменю менен атайын номерленген тизме түзүңүз. Адатта, ушул максаттар үчүн "Блокнот" колдонулат. Ички меню ата-энелер тизмесинин элементи катары иштейт. Мисалы: First ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5

2-кадам

Бул тизмени өзүнчө HTML файлында сактаңыз. Андан кийин.css файлын түзүңүз. Бардык керектүү стилдер барагынын параметрлерин киргизиңиз. Муну өтө кылдаттык менен жасаңыз, анткени бир ката кетсе, калкып чыккан меню туура көрсөтүлбөйт же таптакыр иштебей калат.

3-кадам

Ок тизмесинде колдонулган бардык окторду жана төшөмөлөрдү алып салыңыз. CSS инструменттерин колдонуп менюнун туурасын орнотуңуз: ul -style: none; туурасы: 200px; }

4-кадам

Тизмедеги бардык элементтердин салыштырмалуу ордун позиция деп аталган атрибут менен белгилеңиз: ul li: салыштырмалуу; }

5-кадам

Андан кийин кичи менюдан чычкан курсору пункттун үстүнөн чыкканда, анын элементтери ата-эненин менюсунан оң жагына пайда болот: li ul: Absolute; left: 199px; top: 0; display: none; }

6-кадам

Сол атрибут менюнун туурасынан бир пикселге аз. Бул эки чек араны түзбөй туруп, калкыма терезелерди туура жайгаштырууга мүмкүндүк берет. Дисплей атрибуту баракты ачууда кичи менюну жашыруу үчүн колдонулат.

7-кадам

Тийиштүү CSS параметрлерин колдонуп, шилтемелерди керектүү стилдеңиз. Шилтемелер алар үчүн бөлүнгөн бардык орунду ээлеши үчүн дисплейди: блок параметрин кошуңуз. Чычкан курсорунун үстүндө жылып турганда меню пайда болушу үчүн, төмөнкү кодду киргизиңиз: li: hover ul: block; }

8-кадам

Тизме элементтерин жана шилтемелерди каалагандай көрсөтүү үчүн кошумча параметрлерди коюңуз. Атрибутту.html файлына кошуңуз. Калкыма меню колдонууга даяр.

Сунушталууда: