Addım-addım guide
Naviqasiya menyusunun yuxarıdan yuxarı və ya şaquli bir sıra arasında yatay bir sıra olsun, hələ də yalnız siyahıdır. Web naviqasiyasını hazırlayarkən, bir naviqasiya menyusunun sadəcə izzətlənmiş bir əlaqə qrupu olduğunu unutmaq çox vaxt asandır. XHTML + CSS-də naviqasiyanı proqramlaşdırırsanız, yükləmək üçün kiçik (XHTML) və asanlaşdırmaq üçün asan bir menyu yarada bilərsiniz (CSS).
Başlanğıc
Naviqasiya üçün siyahı hazırlamağa başlamaq üçün siyahıdan istifadə etməlisiniz.
Naviqasiya kimi təyin edilmiş standart bir sıra siyahı ola bilər:
HTML-yə yaxından baxdığınız təqdirdə "Əsas" linkində sizdə başqa bir şəxsiyyət var. Bu, oxucularınız üçün cari yeri müəyyən edən bir menyu yaratmağa imkan verir. Sitenizde bu cür vizual replika malik olmağı planlaşdırmırsınızsa belə, həmin məlumatları daxil edə bilərsiniz. Daha sonra tapşırıq əlavə etməyi qərara alırsanız, sitenizi hazırlamaq üçün kodlaşdırma az olacaq.
Hər hansı bir CSS formatı olmadan, bu XHTML menyusu standart bir sıralanmamış siyahı kimi görünür. Güllələr var və siyahı elementləri bir qədər indented. Yer tutucu bağlantılarını istifadə etdiyim üçün, brauzerlərin əksəriyyəti əlaqələri tıklanabilir (altı rəngli və mavi) şəklində göstərməyəcəkdir. Yuxarıdakı HTML-də bir Web səhifəsinə yapışdırırsanız, naviqasiya bu kimi görünür:
- Ev
- Məhsullar
- Xidmətlər
- Bizimlə əlaqə saxlayın
Bu olduqca darıxdırıcıdır və bir menyu kimi çox görünmür. Lakin siyahıya əlavə edilən bir neçə CSS üslubu ilə, siz qürur verən bir menyu yarada bilərsiniz.
Dikey Naviqasiya Menyu
Dikey naviqasiya menyusu yazmaq üçün çox asandır, çünki normal bir siyahı kimi eyni şəkildə göstərilir: yuxarı və aşağı.
Siyahıdakı əşyalar, səhifənin şaquli olaraq aşağıya baxır.
Mən menyular üslubu olduğumda, kənarda başlamağı və işləməyi sevirəm. Bu məncə ilk növbədə UL # naviqasiyanı tərtib edir və daha sonra li elementlərinə, sonra isə əlaqələrə və s. əvvəlcə menyunun genişliyini təyin edərsiniz. Bu, menyu elementləri uzun olsa belə, düzənin qalan hissəsini itələməyəcək və ya üfüqi kaydırmaya səbəb olmayacaqdır.
ul # naviqasiya {width: 12em; }
Genişlik dəstini aldıqdan sonra, siyahıdakı maddələrlə oynaya bilərəm. Bu məni (güllələrdən qurtarmaq), arxa plan rənglərini, sərhədlərini, mətn hizalamasını və marjinlərini təyin etməyə imkan verir.
ul # naviqasiya li {
siyahısı tərzi: none;
fon-rəng: # 039;
sərhədsiz: bərk 1px # 039;
text-align: sol;
margin: 0;
}
Siyahı elementləri üçün əsasları qurduqdan sonra, menyunun bağlantılar sahəsində necə göründüyünə görə oynaya başlaya bilərsiniz. Birinci stil UL # naviqasiya LI A və sonra A: link, A: ziyarət et, A: hover və A: aktiv (istəsəniz). Bağlantılar üçün bağlantıları blok elementi etmək istəyirəm (default in-line deyil). Bu, onları Lİ-nin bütün yerini götürməyə məcbur edir və onlar daha çox menyular kimi asanlaşdırmaq üçün bir paraqraf kimi hərəkət edirlər. Həmişə edəcəyim başqa bir şey vurğulamaqdır (mətn dekorasiyası: heç biri;), bu da düymələri mənə daha çox düymələrə bənzəyir.
Əlbəttə, dizaynınız fərqli ola bilər.
ul # naviqasiya a {
ekran: blok;
mətn dekorasiyası: none;
padding: .25em;
sərhəd altındakı: solid 1px # 39f;
sərhəd-sağ: solid 1px # 39f;
}
Göründüyü kimi: blok; Bağlantılar üzərində qurulmuşdur, menyu bəndinin bütün qutusu yalnız məktublar deyil tıklanabilir. Bu da mümkündür. Müəllif mavi, qırmızı və bənövşəyi fərqli olmasını istəyirsinizsə, link rənglərini (link, ziyarət, hover və aktiv) təyin etdiyinizə əmin olun.
a: link, a: ziyarət {color: #fff; }
a: hover, a: aktiv (rəng: # 000; }
Mən də fon rəngini dəyişdirərək hover vəziyyətinə bir az daha çox diqqət vermək istərdim.
a: hover {background-color: #fff; }
Şaquli menyulardan daha çox nümunə istəyirsinizsə, aşağıdakı siyahıya müraciət edin.
- A Styled Şaquli Menyu
- A Əsas Şaquli Menyu şablonu
- Buradakı Stilli Dik Menyu
- Burada bir təməl Şaquli Menyu şablonu var
Horizontal Naviqasiya Menyu
Horizontal naviqasiya menyusunu yaratmaq, şaquli naviqasiya menyusundan daha çətindir, çünki HTML siyahıları dikey olaraq görünməyi üstün tutur. Horizontal menyuda olduğu kimi, əvvəl naviqasiya menyusunu yaradın:
Yatay bir menyu yaratmaq üçün, şaquli menyu ilə etdiyiniz qədər işləyin. Mənim naviqamanın sol küncdə başlamasını istədiyimdən sonra, mən 0 kənar margin və padding ilə qurdum və onu sola saldım. Ayrıca, menyusunuz niyyətinizdən çox və ya daha az yer tutmadığı üçün genişliyi qurma vərdişinə sahib olmalısınız. Üfüqi menyular üçün bu, ümumiyyətlə dizaynın tam genişliyidir. Oxumağı asanlaşdırmaq üçün bütün siyahıya fon rəngini də əlavə etdim.
ul # naviqasiya {
float: sol;
margin: 0;
padding: 0;
genişlik: 100%;
fon-rəng: # 039;
}
Lakin üfüqi naviqasiya menyusunun sirri siyahıdakı maddələrdir. Siyahıdakı əşyalar normalda blok elementləridir, yəni hər birinə əvvəl və sonra yerləşdirilən yeni bir xətt olacaqdır. Ekranı blokdan satıra keçid edərək, siyahı elementlərini yatay olaraq bir-birinin yanında yerləşdirməyə məcbur edirsiniz.
ul # naviqasiya li {display: inline; }
Mən eyni rəngləri və mətn bəzəkləri ilə mən şaquli naviqasiya menyusunda müalicə etdiyim kimi əlaqələri müalicə edirdim. Düymələri üzərinə girdikləri zaman təyin etmək üçün bir üst sərhəd əlavə etdim. Silinən tək şey ekran idi: blok; bu yeni xəttləri yenidən yerə qoyacaq və üfüqi menyunu məhv edəcək.
ul # naviqasiya a {
mətn dekorasiyası: none;
padding: .25em 1em;
sərhəd altındakı: solid 1px # 39f;
sərhədsiz: bərk 1px # 39f;
sərhəd-sağ: solid 1px # 39f;
}
a: link, a: ziyarət {color: #fff; }
ul # naviqasiya li: hover {
fon-rəng: #fff;
rəng: # 000;
}
Buradasınız Location Information
HTML-nin başqa bir cəhəti də sizin identifikatorunuzdur. Istifadəçilərinizin cari yerini göstərmək üçün menyu dəyişmək istəyirsinizsə, fərqli bir fon rəngi və ya digər tərzi müəyyən etmək üçün sadəcə bu ID istifadə edin. Cari səhifənin həmişə vurğulanması üçün bu şəxsiyyət identifikatını digər səhifələrdə düzgün menyu elementinə daşıyın.
Ulduz # naviqasiya # bir yerə {background-color: # 09f; }
Bu üslubları səhifənizdə birləşdirirsinizsə, sitenizle işləyən, lakin yükləməyiniz və gələcəkdə yeniləmək üçün çox asan olan bir üfüqi və ya şaquli menyu çubuğunu yarada bilərsiniz. XHTML + CSS istifadə edərək, siyahıların dizayn üçün çox güclü bir alətə çevrilir.
Horizontal menyulardan daha çox nümunə istəyirsinizsə, aşağıdakılara baxın.
- Styled Horizontal Menyu
- Temel Yatay Menyu Şablonu
- Burada Styled Horizontal Menu var
- Buradakı Temel Yatay Menyu Şablonu