{"id":220,"date":"2023-12-02T02:02:58","date_gmt":"2023-12-02T01:02:58","guid":{"rendered":"https:\/\/intranet.projektninja.com\/?p=220"},"modified":"2024-06-15T17:21:16","modified_gmt":"2024-06-15T15:21:16","slug":"fse-menu-mobilne-z-submenu-w-nowym-blok-edytorze","status":"publish","type":"post","link":"https:\/\/projektninja.com\/devblog\/nawigacja\/fse-menu-mobilne-z-submenu-w-nowym-blok-edytorze\/","title":{"rendered":"Sparkle FSE menu mobilne z submenu w nowym blok edytorze"},"content":{"rendered":"\n

Mobilne menu z submenu w nowym edytorze blok\u00f3w WordPress (FSE) mo\u017ce wydawa\u0107 si\u0119 skomplikowane, ale z odpowiednimi krokami mo\u017cna to osi\u0105gn\u0105\u0107 \u0142atwo i efektywnie. W tym przewodniku poka\u017cemy, jak skonfigurowa\u0107 takie menu, aby by\u0142o funkcjonalne i estetyczne.<\/p>\n\n\n\n

Ustalanie Pr\u00f3g Zawijania Menu<\/h2>\n\n\n\n

Domy\u015blny pr\u00f3g zawijania menu do widoku mobilnego mo\u017cna znale\u017a\u0107 w pliku wp-includes\/blocks\/navigation\/style.min.css<\/code>. Pr\u00f3g ten wynosi mi\u0119dzy 599px a 600px szeroko\u015bci.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

CSS:<\/h2>\n\n\n\n
\n@media(max-width:599px) {\n    #modal-1.is-menu-open {\n\n        height: fit-content;\n        \/* zmniejszenie otwartego menu do potrzebnej wysoko\u015bci \u017ceby nie przys\u0142ania\u0142o ca\u0142ej strony *\/\n        padding-bottom: 15px;\n        box-shadow: rgb(0 0 0 \/ 20%) 0px 9px 20px;\n    }\n    \n    #modal-1-content {\n        gap: 0px;\n        padding-top: 0;\n    }\n    \n    #modal-1-content > ul {\n        \/* wy\u015brodkowanie menu*\/\n        margin: auto;\n    }\n    \n    .wp-block-navigation__responsive-dialog {\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n    }\n    \n    #modal-1-content .wp-block-navigation li {\n        \/* elementy menu rozci\u0105gniecie do mo\u017cliwego miejsca odst\u0119py i podzia\u0142ka borderem*\/\n        width: 100%;\n        border-bottom: 2px #0000002e solid;\n        padding-top: 5px;\n        padding-bottom: 5px;\n    }\n\n    #modal-1-content .wp-block-navigation li > a {\n        width: 100%;\n        \/*rozci\u0105gni\u0119cie klikalnosci na cza\u0142\u0105szeroko\u015b\u0107*\/\n    }\n\n    \/* korekta podzia\u0142ek border\u00f3w *\/\n    #modal-1-content .wp-block-navigation li:first-child {\n        border-top: 2px #0000002e solid;\n    }\n\n    #modal-1-content .wp-block-navigation li:last-child {\n        border-bottom: none;\n    }\n\n    \/* submenu *\/\n    ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {\n        position: relative;\n        padding-top: 0px !important;\n        padding-right: 0 !important;\n        padding-left: 15px !important;\n        padding-bottom: 5px;\n        position: relative !important;\n        top: 7px !important;\n    }\n\n    \/* zaykacz menu wy\u015brodkowanie *\/\n    button.wp-block-navigation__responsive-container-close {\n        position: static;\n        margin: auto;\n        margin-top: 20px;\n    }\n    \n    \/* wy\u0142\u0105czenie sociala z mobilki*\/\n    .wp-block-social-links {\n\n        display: none !important;\n    }\n}<\/code><\/pre>\n\n\n\n
Skonfigurowanie Wygl\u0105du Menu<\/h2>\n\n\n\n
Po dostosowaniu breakpointa, warto zadba\u0107 o estetyk\u0119 menu. Skrypty CSS powy\u017cej pokazuj\u0105, jak mo\u017cna zmodyfikowa\u0107 wygl\u0105d menu, aby by\u0142o dopasowane do mobilnych ekran\u00f3w. Kluczowe jest ustawienie odpowiednich padding\u00f3w, margines\u00f3w i szeroko\u015bci element\u00f3w menu.<\/p>\n\n\n\n
Ukrywanie Element\u00f3w na Mobilnych Ekranach<\/h2>\n\n\n\n
Czasami niekt\u00f3re elementy menu mog\u0105 nie by\u0107 potrzebne na urz\u0105dzeniach mobilnych. Przyk\u0142ad powy\u017cej pokazuje, jak ukry\u0107 elementy social links, kt\u00f3re mog\u0105 zaburza\u0107 przejrzysto\u015b\u0107 menu na ma\u0142ych ekranach.<\/p>\n\n\n\n
Dzi\u0119ki tym krokom, Twoje menu mobilne z submenu b\u0119dzie wygl\u0105da\u0107 dobrze i dzia\u0142a\u0107 sprawnie w nowym edytorze blok\u00f3w WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"
Naucz si\u0119, jak skonfigurowa\u0107 mobilne menu z submenu w nowym edytorze blok\u00f3w WordPress. Sprawd\u017a nasz przewodnik i odkryj, jak \u0142atwo dostosowa\u0107 menu do urz\u0105dze\u0144 mobilnych.<\/p>\n","protected":false},"author":1,"featured_media":562,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[268],"tags":[213,214,102,216,218,211,217,212,215,13],"class_list":["post-220","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nawigacja","tag-blokowy-edytor","tag-edytor-blokow","tag-fse","tag-konfiguracja-css","tag-konfiguracja-menu","tag-menu-mobilne","tag-mobile-menu","tag-responsive-menu","tag-submenu","tag-wordpress"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/comments?post=220"}],"version-history":[{"count":1,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/220\/revisions"}],"predecessor-version":[{"id":540,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/220\/revisions\/540"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media\/562"}],"wp:attachment":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media?parent=220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/categories?post=220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/tags?post=220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}