Qadam-qadam yo'lboshchi
Sizning navigatsiya menyusingiz yuqori yoki yuqoridagi vertikal satr bo'ylab gorizontal satr bo'ladimi, bu hali hammasi. Veb-navigatsiya tizimini yaratishda, navigatsiya menyusi faqatgina ulug'langan guruhlar ekanligini unutish oson. Lekin agar siz navigatsiyani XHTML + CSS yordamida programlasangiz, yuklab olish uchun kichik (XHTML) menyu va sozlashni osonlashtirishingiz mumkin (CSS).
Ishni boshlash
Navigatsiya uchun ro'yxat tuzish uchun ro'yxatni ishlatish kerak.
Navigatsiya sifatida aniqlangan standart tartiblangan ro'yxat bo'lishi mumkin:
Agar siz HTML-ga diqqat bilan qarasangiz, "Home" havolasida sizda boshqacha ID borligini ko'rasiz. Bu sizning o'quvchilaringiz uchun joriy manzilni aniqlaydigan menyuni yaratishga imkon beradi. Saytingizda hozirgi vaqtda ushbu turdagi ingl. Belgilarga ega bo'lishni rejalashtirmagan bo'lsangiz ham, ushbu ma'lumotni qo'shishingiz mumkin. Agar siz keyinroq belgini qo'shishga qaror qilsangiz, saytingizni tayyorlash uchun kodlash kodi kamroq bo'ladi.
Hech qanday CSS uslubi bo'lmasa, bu XHTML menyusi standart tartibli ro'yxatga o'xshaydi. Parmaklar bor va ro'yxat elementlari biroz chuqurlashadi. Ildiz aloqasi havolasini ishlatganim sababli, brauzerlarning ko'pchiligi havolalarni tıklanabilir (alttli va ko'k) sifatida ko'rsatmaydi. Agar yuqoridagi HTML-da veb-sahifaga joylashtirsangiz, navigatsiya shu tarzda bo'ladi:
- Bosh sahifa
- Mahsulotlar
- Xizmatlar
- Biz bilan bog'lanish
Bu juda zerikarli va menyuda juda o'xshamaydi. Lekin ro'yxatga qo'shilgan bir nechta CSS uslubi bilan siz g'ururlanadigan menyu yaratishingiz mumkin.
Portret navigatsiya menyusi
Vertikal navigatsiya menyusi juda oddiy, chunki u oddiy ro'yxatga o'xshash ko'rinadi: yuqoriga va pastga.
Ro'yxat elementlari vertikal ravishda sahifada ko'rsatiladi.
Menyularni bezovta qilayotib, tashqaridan boshlashni va ishlaymanni yoqtiraman. Demak, avval men ul-navigatsiya uslubini birinchi bo'lib targ'ib qilaman, keyin li elementlarga, so'ngra havolalarga va boshqalarga o'tishni bildiraman. Ya'ni, Avval siz menyuning kengligini aniqlaysiz. Bu menyu elementlari uzoq bo'lsa ham, tartibning qolgan qismini itarish yoki gorizontal aylantirishga yo'l qo'ymasligini ta'minlaydi.
ul # navigatsiya {kenglik: 12em; }
Kenglik o'rnatilgandan so'ng men ro'yxat elementlari bilan o'ynashim mumkin. Bu menga (o'qlardan qutilish uchun), fon ranglarini, chegaralarni, matnni to'g'ri belgilash va chegaralarni belgilash imkonini beradi.
ul # navigatsiya li {
list-style: none;
fon-rangi: # 039;
chegara yuqori: qattiq 1px # 039;
matnni aylantirish: chap;
margin: 0;
}
Ro'yxat elementlari uchun asoslarni belgilab qo'yganingizdan so'ng, menyuning ulanishlar sohasida qanday ko'rinadiganligi bilan o'ynashni boshlashingiz mumkin. Birinchi uslub UL # navigatsiya LI A va keyin A: link, A: ziyorat qilingan, A: hover va A: faol (agar xohlasangiz). Ulanish uchun men aloqalarni blok elementni (standart in-layn o'rniga) amalga oshirishni yaxshi ko'raman. Bu ularni LIning barcha maydonlarini egallashga majbur qiladi va ular menyular tugmalari kabi uslubni osonroq qilishni ta'minlaydigan xat kabi xatti-harakatlar qiladilar. Men doim qilmoqchi bo'lgan narsalar pastki chiziqni (matnni bezatish: yo'q); chunki bu tugmachalarni menga o'xshash tugmalarga o'xshashroq qiladi.
Lekin, albatta, sizning dizayningiz boshqacha bo'lishi mumkin.
ul # navigatsiya a {
displey: blok;
matnni bezash: yo'q;
to'ldirish: .25em;
chegara osti: qattiq 1px # 39f;
border-o'ng: qattiq 1px # 39f;
}
E'tibor bering: displeyda: blok; yo'nalishlarga o'rnatilsa, menyu punktining butun qutisi harflarni emas, balki tıklanabilir. Bu ham qulaylik uchun yaxshi. Agar siz aslida ko'k, qizil va binafsha ranglardan farq qilishni xohlasangiz , aloqa ranglarini (havola, tashrif buyurish, hover va faol) aniqlang.
a: havola, a: tashrif qilingan {color: #fff; }
a: hover, a: faol {rangi: # 000; }
Shuningdek, fon rangini o'zgartirib, hover holatiga biroz ko'proq e'tibor berishni xush ko'raman.
a: hover {fon-rang: #fff; }
Agar siz vertikal menyularning ko'proq misollaridan foydalanmoqchi bo'lsangiz, quyidagi ro'yxatga qarang.
- Styled vertikal menyusi
- Asosiy vertikal menyu shablonni
- Siz bilan birga tikilgan vertikal menyu
- Bu erda siz bilan birga asosiy vertikal menyu shablonni
Landshaft Navigatsiya menyusi
Gorizontal navigatsiya menyusini yaratish vertikal navigatsiya menyusiga qaraganda biroz ko'proq qiyinchilik tug'diradi, chunki HTML ro'yxatlar vertikal ko'rinishni afzal ko'radi. Gorizontal menyuda bo'lgani kabi, oldin navigatsiya menyusi ro'yxatini yarating:
Gorizontal menyu yaratish uchun vertikal menyu bilan bir xil ishlang. Men tashqaridan boshlang va ishlayman. Men navigatsiyani chap burchakda boshlashini istaganim uchun, men uni chap burchak va padding bilan belgilab qo'ydim va uni chapga aylantirdim. Bundan tashqari, siz menyu siz istaganingizdan ko'ra ko'proq yoki kamroq joyga ega bo'lmasligi uchun kengligi sozlash odatiga ega bo'lishingiz kerak. Landshaft menyular uchun, bu odatda dizaynning to'liq kengligi. Bundan tashqari, o'qishni osonlashtirish uchun butun ro'yxatga fon rangi qo'shdim.
ul # navigatsiya {
float: chap;
margin: 0;
padding: 0;
kengligi: 100%;
fon-rangi: # 039;
}
Biroq, gorizontal navigatsiya menyusidagi maxfiy ma'lumotlar ro'yxati tarkibida. Ro'yxat elementlari odatda blok elementlari bo'lib, ularning har biri oldin va keyin joylashtirilgan yangi qatorga ega bo'lishi kerak. Displeyni blokdan satrlarga ko'chirish orqali siz ro'yxat elementlarini gorizontal ravishda bir-birining yonida joylashtirishga majbur qilasiz.
ul # navigatsiya li {displey: inline; }
Men ularga vertikal navigatsiya menyusida, xuddi shu ranglar va matn bezaklari bilan muomala qilgandek munosabatlarni mujassamladim. Men tugmachalarni belgilab qo'yish uchun yuqori chegara qo'shdim. Men chiqargan yagona narsa ekran edi: blok; chunki yangi satrlarni qaytarib qo'yish va gorizontal menyuni yo'q qilish.
ul # navigatsiya a {
matnni bezash: yo'q;
to'ldirish: .25em 1em;
chegara osti: qattiq 1px # 39f;
chegara yuqori: qattiq 1px # 39f;
border-o'ng: qattiq 1px # 39f;
}
a: havola, a: tashrif qilingan {color: #fff; }
ul # navigatsiya a: hover {
fon-rang: #fff;
rang: # 000;
}
Siz shu yerdamisiz Joylashuv ma'lumoti
HTMLning yana bir jihati - sizning identifikatoringiz. Foydalanuvchilaringizning joriy manzilini ko'rsatish uchun sizning menyuingizni o'zgartirmoqchi bo'lsangiz, boshqa identifikatorni boshqa fon rangini yoki boshqa uslubni aniqlash uchun foydalaning. Joriy identifikatorning boshqa sahifalardagi to'g'ri menyudagi elementiga o'tishi va joriy sahifaning har doim ta'kidlangan bo'lishi kerak.
ul-# navigatsiya # sizda {background-color: # 09f; }
Agar siz ushbu uslublarni sahifangizga qo'shsangiz, saytingiz bilan ishlaydigan gorizontal yoki vertikal menyu paneli yaratishingiz mumkin, lekin tezda yuklab olish va kelajakda yangilashni juda oson. XHTML + CSS-dan foydalanib ro'yxatingizni ro'yxatlar uchun juda kuchli vositaga aylantiradi.
Agar siz gorizontal menyularning ko'proq misollaridan foydalanmoqchi bo'lsangiz, quyida ko'rib chiqing.
- Styled Horizontal Menu
- Asosiy Horizontal Menu Shabloni
- Bu yerda sizning stilli gorizontal menyuda
- Siz bilan birga bo'lgan asosiy Landshaft Menu shablonini