Menyu, saytdakı bölmələr arasında istifadəçi naviqasiyasını asanlaşdırmaq üçün istifadə olunur. Ziyarətçinin diqqətini cəlb etmək üçün menyu işlək, istifadəsi asan və eyni zamanda bütün mənbənin dizaynı ilə birləşdirilməlidir.
Təlimat
Addım 1
Bir menyu yaratmadan əvvəl onun növünə qərar verin. İstifadəçi siçan imleci ilə üzərinə getdikdə istifadəçiyə göstəriləcək açılır bir üfüqi və ya şaquli qutu yarada bilərsiniz. Müəyyən bir menyu seçərkən ziyarətçilərin istifadə etməsi üçün nə qədər rahat olacağını və dizaynla necə birləşdiriləcəyini rəhbər tuta bilərsiniz.
Addım 2
Bir menyu növü seçdikdən sonra HTML-i düzəltmək üçün istifadə etdiyiniz mətn redaktorundan istifadə edərək səhifənizin sənədini açın. İnterfeys elementinizi daxil etmək istədiyiniz kodun istədiyiniz hissəsinə keçin.
Addım 3
Bundan sonra bir blok yaradaraq ona təyin edilmiş id ilə nömrələnmiş bir siyahı düzəldərək seçimlərin siyahısını hazırlayın. Misal üçün:
- Bağlantı 1
- Bağlantı 2
- Bağlantı 3
Bu nümunədə üç elementdən ibarət bir maddənin siyahısı yaratdım və ID panel ID ilə div qatına yerləşdirdim.
Addım 4
Səhifənizin bölmə blokuna keçin və uyğun kaskad üslub cədvəli menyusu yaradın. Yatay bir menyu yaratmaq istəyirsinizsə, nəticələnən siyahı üçün satır atributunu əlavə edə bilərsiniz:
#panel ul li {display: inline; }
Addım 5
Səhifənin bütün uzunluğu boyunca üfüqi bir xətt yaratmaq üçün aşağıdakı kodu istifadə edə bilərsiniz:
#panel ul {margin sol: 0; dolgu: 2px 0; }
Addım 6
Sonra düzbucaqlılara vizual bölgüsü edə bilərsiniz:
#panel ul li a {margin sol: 3px; sərhəd: 1px; dolgu: 2px 3px; fon: mavi; }
Bu kod, haşiyə solu və doldurulma atributları vasitəsilə sərhəd elementlərindən mətn girintiləri qurur və siyahı elementlərinin hər biri üçün arxa plan rəngi təyin edir. Bu nümunədə rəng mavi rəngdədir, ancaq onu öz mülahizənizə görə dəyişə bilərsiniz.
Addım 7
Nişanda seçilmiş cari səhifədəki elementi göstərmək üçün müvafiq parametrləri açıq sinfə qoyun:
#menu ul li a # open {background: red; sərhəd-alt: 1px; }
Paneldə seçilmiş cari səhifə indi qırmızı rəngdə göstərilir.
Addım 8
Dəyişiklikləri fayla yazın və brauzer vasitəsilə səhifənizi açaraq yazılmış kodun işləkliyini yoxlayın. Əlavə ekran seçimlərini təyin etmək üçün obyektin görünüşünü artırmaq üçün hər zaman CSS və ya HTML əlavə edə bilərsiniz.
