Меню сайттагы бөлүмдөр аркылуу колдонуучунун навигациясын жеңилдетүү үчүн колдонулат. Келген адамдын көңүлүн буруу үчүн, меню функционалдуу, колдонууга жеңил жана ошол эле учурда бардык ресурстун дизайны менен айкалыштырылышы керек.
Нускамалар
1 кадам
Меню түзүүдөн мурун, анын түрүн чечип алыңыз. Колдонуучу чычкан курсорунун үстүнөн жылдырганда колдонуучуга көрсөтүлө турган ачылуучу горизонталдык же вертикалдык кутучаны түзсө болот. Белгилүү бир менюну тандап жатканда, келүүчүлөргө аны колдонуу канчалык ыңгайлуу болоорун жана дизайн менен кандайча айкалыштырылгандыгын көрсөтсө болот.
2-кадам
Меню түрүн тандагандан кийин, HTML файлын оңдоо үчүн кандай гана тексттик редакторду колдонуп, баракчаңыздын файлын ачыңыз. Интерфейс элементин киргизгиңиз келген каалаган код бөлүмүнө өтүңүз.
3-кадам
Андан кийин, блок түзүп, ага дайындалган идентификатору менен номерленген тизме түзүп, параметрлердин тизмесин түзүңүз. Мисалы:
- Шилтеме 1
- Шилтеме 2
- Шилтеме 3
Бул мисалда, мен үч элементтин маркерленген тизмесин түзүп, ID панелдин ID менен div катмарына жайгаштырдым.
4-кадам
Баракчаңыздын бөлүмдөр блогуна өтүп, ылайыктуу каскад стилдер барагынын менюсун түзүңүз. Эгер сиз горизонталдык меню түзгүңүз келсе, анда алынган тизмеге сап атрибутун киргизсеңиз болот:
#panel ul li {display: inline; }
5-кадам
Барактын узундугу боюнча горизонталдык сызык түзүү үчүн төмөнкү кодду колдонсоңуз болот:
#panel ul {margin-left: 0; толтуруу: 2px 0; }
6-кадам
Андан кийин визуалдык бөлүүнү төрт бурчтукка бөлсөңүз болот:
#panel ul li a {margin-left: 3px; чек: 1px; толтуруу: 2px 3px; фон: көк; }
Бул код чек ара элементтеринен тексттин чегинүүлөрүн маржа-сол жана толтуруу атрибуттары аркылуу орнотот, ошондой эле тизмектин ар бир элементтери үчүн фон түсүн орнотот. Бул мисалда түс көк, бирок сиз аны өз каалоосу боюнча өзгөртө аласыз.
7-кадам
Өтмөктө тандалган учурдагы нерсени көрсөтүү үчүн, ачык класска ылайыктуу параметрлерди коюңуз:
#menu ul li a # open {background: red; чек-түбү: 1px; }
Панелде тандалган учурдагы барак эми кызыл түс менен көрсөтүлөт.
8-кадам
Өзгөртүүлөрдү файлга сактап, браузер аркылуу баракчаңызды ачуу менен жазылган коддун иштешин текшериңиз. Дисплейдин кошумча параметрлерин орнотуу үчүн, объекттин тышкы көрүнүшүн өркүндөтүү үчүн ар дайым CSS же HTML кошсоңуз болот.
