Cavab verən naviqasiya menyusunun yaradılması Codepen Make Naviqasiya menyusu ilə gözəl laylı menyulara əla baxış

Massiv( => menyu elementi => menyu elementi-type-post_type => menyu elementi-obyekt səhifəsi => menyu elementi-265) $item (WP_Post)

Cari menyu elementinin obyekti. Misal:

WP_Post Obyekt ( => 265 => 1 => 2018-04-07 09:45:46 => 2018-04-07 06:45:46 => => Əlaqə => => dərc => bağlandı => qapalı = > => 265 => => => 2018-04-19 00:20:29 => 2018-04-18 21:20:29 => => 0 => http://wp-test.ru/ ? p=265 => 1 => nav_menu_item => => 0 => xam => 265 => 0 => 214 => səhifə => post_type => Səhifə => http://wp-test.ru/post- 99 => Əlaqə => => => => Massiv ( => => menyu elementi => menyu elementi növü-post_type => menyu elementi-obyekt səhifəsi) => => => =>) $args (stdClass)

wp_nav_menu() funksiyasından arqumentləri olan obyekt. Misal:

StdClass Obyekt ( => WP_Term Obyekt ( => 21 => Mənim ilk menyum => moe-pervoe-menu => 0 => 21 => nav_menu => => 0 => 3 => xam) => div => = > => əsas menyu => => 1 => wp_page_menu => => => => => => qoruyun => 0 => => əsas) $dərinlik (nömrə) Menyu elementi səviyyəsi. 4.1.0 versiyasında əlavə edilib. Girişlər üçün istifadə olunur. Üst menyu elementlərində $depth = 0, iç içə $depth = 1 və s. var.

Nümunələr

#1 Yalnız müəyyən menyu elementinə CSS sinfi əlavə edin

Tutaq ki, "Əlaqə" menyusuna (id=265) əlavə CSS sinfi əlavə etməliyik və yalnız bu element əsas menyu sahəsinə əlavə edilmiş menyuda göstərilərsə, o zaman:

Əlavə_filtre("nav_menu_css_class", "dəyişiklik_menu_element_css_classes", 10, 4); funksiyanın dəyişdirilməsi_menu_item_css_classes($classes, $element, $args, $depth) ( if($item->ID === 265 && $args->theme_location === "əsas")( $classes = "xüsusi-css-class" "; ) $sınıfları qaytarın; )

Layoutda alırıq:

• Əlaqə
• Bütün məqalələr
• Sayt xəritəsi

#1 Bütün menyu elementlərindən CSS siniflərini çıxarın

Saytın bütün menyu elementlərindən bütün CSS siniflərini çıxaraq.

Əlavə_filtr("nav_menu_css_class", "__boş_massivi qaytar");

Planı əldə edək:

• Əlaqə
• Bütün məqalələr
• Sayt xəritəsi

Həmçinin, birinci nümunədə olduğu kimi, şərtlərdən istifadə edə bilərsiniz. Gəlin bütün menyu elementlərindən CSS siniflərini çıxaraq və əsas menyu sahəsindən menyu elementlərinə öz css sinifimizi əlavə edək:

Əlavə_filtre("nav_menu_css_class", "dəyişiklik_menu_element_css_classes", 10, 4); funksiyanı dəyişdirmək_menu_item_css_classes($classes, $element, $args, $depth) ( if ($args->theme_location === "əsas") ( $classes = [ "my-css" ]; ) else ( $classes = ; ) $sınıfları qaytarın;)

Planı əldə edək:

• Əlaqə
• Bütün məqalələr
• Sayt xəritəsi

Qeydlər

• 4.1.0 versiyasından bəri $depth parametri əlavə edilmişdir.

Dəyişikliklərin siyahısı

Hər bir İnternet saytının əsas elementlərindən biri nədir? Əlbəttə, naviqasiya menyusu. Hər bir menyu vebsaytın faydalı hissəsidir, çünki onun vasitəsilə istifadəçi saytın digər bölmələrinə keçə bilər. Ziyarətçinin vebsaytla əsas qarşılıqlı əlaqəsi naviqasiya menyusu vasitəsilə həyata keçirilir. İndiki vaxtda saytların səhifələrində getdikcə daha cəlbedici və rahat naviqasiya menyularına rast gəlmək olar.

Bu gün sizə təqdim edirik 62 cəlbedici naviqasiya menyusu CSS, javascript və ya Flash texnologiyasına əsaslanır.

CSS naviqasiya menyusu

Gözəl rəngli menyu ilə bəzədilmiş kazino və ya ilan və nərdivan kimi oyunlar.

Burada alt menyunu açarkən əla yumşaq rəng sxemi və maraqlı effekt görürük.

Steven Wittens bizə bu menyuya fərqli bir perspektiv təklif edir.

UX Booth saytında siz qəşəng, lakin çox sadə menyu görə bilərsiniz.

MacRabbit saytı yəqin ki, MAC OS və ya Apple stil menyusundan istifadə edir.

Joyent-in saytında şirkətin işlərini sadalayan sadə, işgüzar görünüşlü menyudan istifadə edilir.

Bu portfelin incəliyi və sadəliyi sizi mütləq cəlb edəcək.

Şəkillər şəklində böyük menyular mütləq diqqətinizi çəkəcək. Gördüyünüz kimi, menyu tərtib etməyin çox ənənəvi yolu deyil.

Aktiv menyu elementini və qeyri-aktivi simvollaşdıran 2 rəngdən istifadə edən açılan menyu.

Amerika səsyazma şirkəti Small Stone qeydləri radio şəklində və ya Space Echo Roland SE-201 şəklində menyudan istifadə edirdi.

Bütün veb saytı "kəşf edə" biləcəyiniz xəritə kimi bir şey.

iPhone proqramlarından ibarət Apple tərzində dəyirmi menyu.

Clearleft menyu kimi planlaşdırılmış tapşırıqları olan təqvim kimi bir şey istifadə etdi.

Seçilmiş menyu elementi sıxılmış vəziyyətdə görünür.

Menyu elementinin üzərinə klikləməklə əlavə alt menyu genişləndirilir. Menyu qara rəngə boyansa da, olduqca sadə görünür.

Bu menyu sadə və gözəl sərin hover effektindən istifadə edir.

Hərflərin ölçüsü çox şirin və qeyri-adidir və diqqətinizi çəkən budur.

Böyük hover effekti ilə blok naviqasiyasından istifadə üçün əla həll.

Möhtəşəm yaşıl rəng və yarpaqlı menyu görünüşü diqqətinizi cəlb edəcək. O, həmçinin hazırda hansı alt bölmədə olduğunuzu müəyyən etməyə kömək edəcək böyük effektə malikdir.

Ronny Pries-in veb-sayt dizaynerləri əla naviqasiya menyusu konsepsiyasından yararlandılar. İstifadəçilər mərtəbədəki plana uyğun olaraq istiqamətləndirilir.

Naviqasiya menyusunu həyata keçirməyin başqa bir yaradıcı yolu, digər alt bölmələrə keçə biləcəyiniz meyvə ağacının təsvirindən istifadə etməkdir.

Matt Dempseyin fırça vuruşlarından yaradıcı istifadəsinə baxın.

Naviqasiya menyusunun əla tətbiqi.

Birbaşa vebsaytda işləyən qovluqlara bənzəyən şaquli nişanlar. Bu üsul nadir hallarda istifadə olunur, lakin işləyir və əla görünür.

Pank rok musiqisi üslubunda həyata keçirilən naviqasiya menyusu. Görün Jeff Sarmiento bu ideyanı necə həyata keçirdi.

Bir növ iyerarxiya kimi. Naviqasiya menyusunu həyata keçirməyin başqa bir yaradıcı yolu.

Nişanlar menyu ilə qarşılıqlı əlaqə hissini artırır.

Bu naviqasiya menyusu çox maraqlı hover effektinə malikdir.

Xüsusi sürgülərdən istifadə edərək bəzi düzəlişlər etməyə imkan verən naviqasiya.

Tarot kartları üslubunda maraqlı və cəlbedici menyu. Kartın üzərinə klikləsəniz, o, dərhal yanğına gedəcək.

Sizə göldə hərəkət edən dalğalar hissini verəcək maye naviqasiya menyusu.

Nick Jones veb saytı portfeldə naviqasiya etmək üçün sadə, lakin dinamik naviqasiya menyusundan istifadə edir.

Marc Ecko saytında naviqasiya şəkil qalereyası şəklində təqdim olunur. Bu, ziyarətçilərə sənət və fəlsəfə səhifələrində gəzməyə imkan verir.

HBO bir film sənəd arxividir. Naviqasiya menyusu vasitəsilə filmlərin interaktiv seçimi edilir.

Sadə hover effekti ilə maraqlı naviqasiya menyusu. İmzanın üzərinə siçanı gətirdiyiniz zaman menyunun məzmunu göstərilir.

Nyu-York və Fort Lauderdeyldə yerləşən naviqasiya menyusu dizayn agentliyi.

Fresk fonu ilə qəşəng neo-antik naviqasiya dizaynı.

Nick Ad veb-saytı çevik, lakin istifadəsi asan naviqasiya menyusundan istifadə edir. Səhifənin istənilən yerinə klikləyin və maraqlı effekt görəcəksiniz.

Yaradıcı insan portfelinə ziyarətçi cəlb etmək üçün öz işindən istifadə edir.

Yeddinci Bölmədə alt menyuları olan maraqlı broşür stili menyusu var.

Müəyyən elementlər seçildikdə açılan və bağlanan naviqasiya menyusu.

Beside veb saytında naviqasiya menyusu göy qurşağı üslubunda həyata keçirilir.

Karton portfel konsepsiyası. Çox maraqlı hover effekti.

Bir yerə yığılmış kiçik kublar naviqasiya menyusu kimi çıxış edir.

Bütün insanların qürur duyduğu milli Havay terliklərinin teksturasını əks etdirən rənglərlə zəngin xəritə.

Menyu simvolizə edən əşyaların olduğu masa: administrasiya ilə əlaqə saxlamaq üçün telefon, portfelə getmək üçün jurnal, xəbərləri izləmək üçün qəzet və s.
Real şeylərdən naviqasiya kimi istifadə edildikdə çox maraqlıdır.

Naviqasiya menyusunu həyata keçirmək üçün əla yaradıcı yol. Hər bir element özünəməxsus şəkildə gözəldir, hamısı bütün vebsayta həyat verir. Çox nadir hallarda belə üsullardan istifadə edin, lakin bu, həqiqətən sehrlidir.

Müxtəlif rənglərdə sadə və göz oxşayan naviqasiya menyusu.

Deyəsən, menyu Flask ilə həyata keçirilir, lakin belə deyil. Siçan üzərinə sürüşdürmə effektləri ilə səliqəli, sərin və qəşəng naviqasiya menyusu.

Davamlı oxucularımdan və sadəcə maraqlanan istifadəçilərdən gələn çoxsaylı istəklər öz nəticəsini verdi. Nəhayət, basılan düymələrin təsiri ilə dinamik Vkontakte menyusunu necə edəcəyimizi öyrənəcəyimiz bir dərs yaratdım! Adi İnternet saytları ilə bənzətmə ilə, ziyarət edilən bir keçid xüsusi bir şəkildə qeyd edildikdə (düyməni sıxmaq, altını çəkmək və s.) - yaradılmış səhifələrdən və qrafik dizayndan istifadə edərək eyni Vkontakte dizaynını yaradacağıq. Başlamaq üçün Photoshop-da qrafik blanklar edəcəyik - iki növ menyu başlığı və düymələr yaradacağıq. Sonra menyumuzdakı maddələrə uyğun olaraq bir neçə Vkontakte səhifəsi yaradacağıq. Və nəhayət, gəlin, əslində, linki izləmək illüziyası yaradacaq çətin bir hiylə edək. Dərs olduqca çətin və Vkontakte-nin funksionallığına arxayın olanlar üçün uyğundur. Bir nümunədən istifadə edərək bütün manipulyasiyaları yerinə yetirəcəyəm Vkontakte qrupunuz bu effektin canlı həyata keçirildiyi yerdə. Beləliklə, biznesə!

Addım 1: Photoshop-da Menyu Başlığını yaradın
Photoshop-da 600px geniş sənəd yaradın. Hündürlük sizin mülahizənizlə fərqli ola bilər. Başlıqda istənilən görünüş şəklini, kollajı, məlumat bannerini və digər qrafik şəkilləri yerləşdirə bilərsiniz. Bu halda mən 600x172 piksel ölçüsündə belə bir reklam bannerindən istifadə etdim.

Addım 2 Photoshop-da naviqasiya paneli yaradın
İndi naviqasiya çubuğu yaratmalıyıq. Bu nümunədə düymələr kimi yalnız mətndən istifadə etdim. Ancaq öz istəyinizlə rəngli düymələr yarada və onlara mətn yaza bilərsiniz. Bunu edirik - Photoshop-da 600x56 piksel düzbucaqlı yaradın və bu halda onu ağ rənglə doldurun. Sonra menyu elementlərini bir sətirdə yazırıq - təxminən 5-6 maddə, daha çox deyil. Daha çox xal sıx görünəcək.

Addım 3 Photoshop-da sıxılmış naviqasiya paneli yaradın
İndi biz aktiv linklər yaratmalıyıq, sanki onlara klik edilib. Mən müntəzəm olaraq altdan xətt çəkməkdən istifadə etdim, lakin ziyarət edilən linki qeyd etmək üçün fərqli mətn və ya fon rəngindən istifadə edə bilərsiniz.

Addım 4. Hazır şəkilləri kəsin
Bu mərhələdə biz 2-ci addım və 3-cü addımdan şəkilləri kəsməliyik. Sonda beş düymədən ibarət iki dəst əldə etməliyik - bir düymənin altından xətt çəkilməyən, digər düymənin altından xətt çəkilən. Hər bir fərdi elementin düymələri (altdan xətt çəkilmiş və çəkilməmiş) eyni ölçüdə olmalıdır. Aşağıdakı şəkil bütün qrafik dizaynımızı göstərir - on düymə və bir menyu başlığı.

Addım 5. Vkontakte menyu səhifəsi yaradın
İndi VKontakte-ə gedək. Bizim vəzifəmiz "Menyu" adlı ayrıca səhifə yaratmaqdır. Bunun üçün aşağıdakı kodu istifadə edəcəyik
http://vk.com/pages?oid=-XXX&p=Page_name
burada XXX əvəzinə qrupumuzun id-sini, “Səhifə adı” mətninin yerinə isə Menyu yazacağıq. İndi qrup identifikatorunu tapmalıyıq. Bunu necə etmək olar? Qrupun əsas səhifəsinə daxil oluruq və divardakı yazılarımıza baxırıq - düz "Yazı əlavə et" blokunun altında "Bütün yazılar" yazacaq - bu linki vurun.

Addım 6. Qrup identifikatorunu təyin edin və kodu redaktə edin
Səhifəyə keçin və url-ə belə baxın https://vk.com/wall-78320145?own=1, burada bu nümunədəki 78320145 nömrələri qrupun id-dir. Məlumatlarımızı mənbə kodunda əvəz edirik və belə bir qeyd əldə edirik:
http://vk.com/pages?oid=-78320145&p=Menyu(nömrələrinizlə!). Bu sətri brauzerinizin ünvan çubuğuna yapışdırın və Enter düyməsini basın. Beləliklə, biz yeni bir Vkontakte səhifəsi yaratdıq və əvvəlcə belə görünür.

Addım 7. Vkontakte-nin qalan naviqasiya səhifələrini yaradın
Eynilə, biz daha dörd naviqasiya səhifəsi yaradırıq: Qiymətlər, Necə sifariş etmək olar, Texniki Tapşırıqlar və Suallar. Yəni, daha dörd dəfə müvafiq kodu brauzerin ünvan çubuğuna kopyalayırıq (aşağıdakı nümunədə id nömrələrinizlə, mənim nömrələrim):

http://vk.com/pages?oid=-78320145&p=Qiymətlər

http://vk.com/pages?oid=-78320145&p=Sifariş_necə

http://vk.com/pages?oid=-78320145&p=İstifadə şərtləri

http://vk.com/pages?oid=-78320145&p=Suallar
Nəzərə alın ki, iki sözdən ibarət səhifənin başlığında (Necə sifariş etməli) sözlər arasındakı boşluq necə_sifariş vermək üçün alt xətt işarəsi ilə əvəz edilmişdir. İndi hər menyu elementi üçün hazır beş səhifəmiz var. Menyu səhifəsində yerləşdiyi üçün Portfolio səhifəsini yaratmadıq

Addım 8. Şəkilləri menyunun ilk səhifəsinə yükləyin
Yaradılmış, hələ də boş səhifədə (bax. Addım 6) Menyuda Redaktə et linkinə və ya Məzmunla doldurun linkinə klikləyin. Bundan sonra redaktə panelini görürük. Burada foto yükləmə funksiyası ilə kamera simgesini klikləməliyik. Vacibdir! Nəzərə alın ki, sizdə wiki işarələmə rejimi var. Rejimlərin dəyişdirilməsi səhifənin sağ kənarındakı işarə ilə idarə olunur.

Addım 9. Şəkilləri yüklədikdən sonra nəticə
Addım 1 və Addım 2-də yaratdığımız şəkillərimizi yükləyirik. Yüklədikdən sonra aşağıdakı şəkildəki kimi aşağıdakı kodu görürük və menyunun özü belə görünür. Hər kod dəyişikliyindən sonra, Səhifəni Saxla düyməsini sıxmağı və nəticəni görmək üçün Önizləmə düyməsini sıxmağı unutmayın.

Addım 10. Şəkil kodunu redaktə etmək
İndi bizim vəzifəmiz bütün noborder xassələrini nopadding xüsusiyyəti ilə əvəz etməkdir. Və ilk şəklin real ölçülərini yazın, çünki Vkontakte yükləyərkən şəkli 400 pikselə qədər kiçiltdi. Bütün dəyişikliklərdən sonra belə bir kod və belə bir menyu almalıyıq.

Addım 11. Şəkillər üçün keçidlərin qoyulması
İndi hər bir şəkil üçün linklər qoymalıyıq. Link nopadding|-dən sonra daxil edilməlidir bağlanan mötərizələrdən əvvəl boşluq əvəzinə. Birinci şəkil üçün (1-ci addımdakı menyu başlığı) siz qrupun əsas səhifəsinə keçid verə bilərsiniz və ya nolink xassəsindən istifadə edə bilərsiniz (boşluq olmadan doldurduqdan sonra təyin edin). İkinci kart üçün format səhifəsinin ünvanını daxil edin səhifə-78320145_49821289. Bu, şəklin tam url-dir https://vk.com/page-78320145_49821289, domen ilə birinci hissə buraxılana qədər. Lakin xarici saytlara keçidlər üçün linkin url-i tam göstərilməlidir.

Addım 12 Kodu naviqasiya səhifələrinin qalan hissəsinə köçürün
Bu kifayət qədər sadə addımda biz əvvəlki addımdan sonuncu kodu kopyalayırıq və onu yaradılmış səhifələrin qalan hissəsinə yapışdırırıq - Qiymətlər, Necə sifariş etmək olar, Texniki Tapşırıqlar və Suallar. Səhifədəyik, Redaktə et və ya Məzmunu doldur (wiki işarələmə rejimindəyik), kodu yerləşdirin və Saxla düyməsini basın. Və sonra növbəti səhifədə. Yəni, indi beş səhifəmiz var, hər birində menyu tam olaraq eyni görünür. Ancaq digər tərəfdən, siz artıq menyudan keçə bilərsiniz - bir keçidə kliklədiyiniz zaman, məsələn, Qiymətlər, biz Qiymətlər səhifəsinə keçəcəyik və s.

Addım 13: Basılan Düymə Effektinin Edilməsi
İndi biz beş səhifənin hər birində bir şəkil dəyişdirməliyik (altdan xətt olmadan düyməni alt xəttli düymə ilə əvəz edəcəyik). Məsələn, Menyunun birinci səhifəsində yeni şəkil yükləyirik və sonra kodda köhnə şəklin ünvanını yenisi ilə əvəz edirik (altı qırmızı rənglə çəkilir). Daha sonra Qiymətlər səhifəsinə keçib, qiymətləri altından xətt çəkilmiş şəkli yükləyirik və kodda yeni şəklin ünvanına dəyişirik. Sonra Necə Sifariş etməli, Texniki Tapşırıqlar və Suallar səhifələrinə keçirik və eyni əməliyyatı eyni şəkildə edirik.

Son.
Nəticə olaraq, siz menyu linkinə kliklədiyiniz zaman naviqasiya effekti əldə edirik və o, aktivləşir. Ancaq aktiv keçid istisna olmaqla, bütün səhifələrdə qrafik dizayn demək olar ki, eyni olduğundan, əslində başqa bir səhifəyə keçid olsa da, naviqasiya illüziyası yaradılır.

Bu şəkildə tərtib edilmiş menyu mobil cihazlar üçün uyğunlaşdırılmayıb. Ekran ölçüsü kiçildildikdə şəkillər bir-birinin altında hərəkət etməyə başlayır. Uyğunlaşan bir dizayn etmək üçün, sərt bir layout üçün masalardan istifadə etməlisiniz. Ancaq bu başqa hekayə və daha təkmil bir texnikadır. Bu vaxt qrafik menyu dizaynının müxtəlif variantlarına baxın.