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