Жакшы HTML кодунун жана жөнөкөй CSS эрежелеринин жардамы менен оңой өзгөртүлүп жана толукталып турган жакшы калкыма меню түзсө болот. Белгилөө тили жана Каскаддык стиль баракчаларын колдонуу менен, менюлардын бардык браузерлерде туура иштешин камсыздай аласыз.
Нускамалар
1 кадам
Биринчиден, менюңуздун негизги түзүмүн түзүңүз. Тексттик редакторду ачып, ата-энелер тизмесинин пункту катары иштей турган кичи меню менен номерленген тизме түзүңүз. Мисалы:
-
Биринчи элемент
- Ачып түшүүчү нерсе
- Dropdown2
2-кадам
Түзүлгөн тизмени өзүнчө HTML файлында сактаңыз. Андан кийин.css кеңейтүүсү бар файл түзүп, стилдердин бардык параметрлерин киргизиңиз.
3-кадам
Ок тизмесинде колдонулган бардык толтурмаларды жана окторду алып салыңыз жана CSS инструменттеринин жардамы менен менюнун туурасын орнотуңуз: ul {list-style: none;
туурасы: 200px; }
4-кадам
Позиция атрибутун колдонуп, тизмедеги бардык нерселердин салыштырма абалын коюңуз: ul li {position: nispi; }
5-кадам
Андан кийин, суб-меню түзүшүңүз керек, анын элементтеринин ар бири ата-эненин оң жагында чычкан көрсөткүчү пунктта турган учурда пайда болот: li ul {абалы: абсолюттук;
солдо: 199px;
top: 0;
көрсөтүү: жок; } Сол атрибут менюнун туурасынан бир пикселге аз. Бул калкып чыкма нерселерди эки чек араны түзбөй акылдуу жайгаштырууга мүмкүндүк берет. Дисплей атрибуту баракты ачууда кичи менюну жашыруу үчүн колдонулат.
6-кадам
Тийиштүү CSS параметрлерин колдонуп, шилтемелерди каалаганча стилдеңиз. Дисплейди камтыңыз: блок параметрин, ар бир шилтеме ал үчүн ээлеген бардык мейкиндикти ээлейт.
7-кадам
Меню курсордун үстүндө турганда пайда болушу үчүн (hover) кодду киргизүү керек: li: hover ul {display: block; }
8-кадам
Шилтемелерди көрсөтүү үчүн кошумча параметрлерди орнотуңуз жана элементтерди каалаганыңыздай тизмеңиз.
9-кадам
Калкыма меню даяр. Эми атрибутту.html файлына кошуу кала берет: Калкыма меню
