Saytdagi Menyuni Qanday Tuzish Kerak

Mundarija:

Saytdagi Menyuni Qanday Tuzish Kerak
Saytdagi Menyuni Qanday Tuzish Kerak

Video: Saytdagi Menyuni Qanday Tuzish Kerak

Video: Saytdagi Menyuni Qanday Tuzish Kerak
Video: Sayt yaratish | 5 daqiqada sayt yaratish (Google Sites) 2024, Noyabr
Anonim

Menyu saytdagi bo'limlar orqali foydalanuvchi navigatsiyasini engillashtirish uchun ishlatiladi. Mehmon e'tiborini jalb qilish uchun menyu funktsional bo'lishi, foydalanishda qulay bo'lishi va shu bilan birga butun resurs dizayni bilan birlashtirilishi kerak.

Saytdagi menyuni qanday tuzish kerak
Saytdagi menyuni qanday tuzish kerak

Ko'rsatmalar

1-qadam

Menyu yaratishdan oldin uning turiga qaror qiling. Siz foydalanuvchi sichqoncha kursori bilan uning ustiga siljiganida ko'rsatiladigan ochiladigan gorizontal yoki vertikal katakchani yaratishingiz mumkin. Muayyan menyuni tanlayotganda, tashrif buyuruvchilar uchun uni ishlatish qanchalik qulay bo'lishi va uning dizayni bilan qanday birlashtirilishi haqida sizga ma'lumot berishingiz mumkin.

2-qadam

Menyu turini tanlagandan so'ng, HTML-ni tahrirlash uchun foydalanadigan har qanday matn muharriri yordamida sahifa faylini oching. Interfeys elementini kiritmoqchi bo'lgan kerakli kod bo'limiga o'ting.

3-qadam

Shundan so'ng, blok yaratish va unga tayinlangan id bilan raqamlangan ro'yxatni yaratish orqali variantlar ro'yxatini tuzing. Misol uchun:

  • Aloqa 1
  • Aloqa 2
  • Aloqa 3

Ushbu misolda men uchta elementning markirovka qilingan ro'yxatini yaratdim va ID panel identifikatori bilan div qatlamiga joylashtirdim.

4-qadam

O'z sahifangizning bo'lim blokiga o'ting va tegishli kaskadli uslublar varag'i menyusini yarating. Agar gorizontal menyu yaratmoqchi bo'lsangiz, natijada ro'yxat uchun atributni kiritishingiz mumkin:

#panel ul li {display: inline; }

5-qadam

Sahifaning butun uzunligi bo'ylab gorizontal chiziq yaratish uchun siz quyidagi koddan foydalanishingiz mumkin:

#panel ul {margin-left: 0; to'ldirish: 2px 0; }

6-qadam

Keyin siz vizual bo'linishni to'rtburchaklar shaklida qilishingiz mumkin:

#panel ul li a {margin-left: 3px; chegara: 1px; to'ldirish: 2px 3px; fon: ko'k; }

Ushbu kod chekka elementlardan matn chegaralarini chap va to'ldirish atributlari orqali o'rnatadi, shuningdek, ro'yxat elementlarining har biri uchun fon rangini belgilaydi. Ushbu misolda rang ko'k rangga ega, ammo siz uni o'zingizning xohishingizga ko'ra o'zgartirishingiz mumkin.

7-qadam

Yorliqda tanlangan joriy sahifadagi elementni ko'rsatish uchun tegishli parametrlarni ochiq sinfga qo'ying:

#menu ul li a # open {fon: qizil; chegara-pastki: 1px; }

Panelda tanlangan joriy sahifa endi qizil rangda ko'rsatiladi.

8-qadam

O'zgarishlarni faylga saqlang va brauzer orqali sahifangizni ochish orqali yozilgan kodning ishlashini tekshiring. Qo'shimcha displey parametrlarini o'rnatish uchun har doim ob'ekt ko'rinishini yaxshilash uchun CSS yoki HTML qo'shishingiz mumkin.

Tavsiya: