Sparkle FSE menu mobilne z submenu w nowym blok edytorze

Mobilne menu z submenu w nowym edytorze bloków WordPress (FSE) może wydawać się skomplikowane, ale z odpowiednimi krokami można to osiągnąć łatwo i efektywnie. W tym przewodniku pokażemy, jak skonfigurować takie menu, aby było funkcjonalne i estetyczne.

Ustalanie Próg Zawijania Menu

Domyślny próg zawijania menu do widoku mobilnego można znaleźć w pliku wp-includes/blocks/navigation/style.min.css. Próg ten wynosi między 599px a 600px szerokości.

CSS:


@media(max-width:599px) {
    #modal-1.is-menu-open {

        height: fit-content;
        /* zmniejszenie otwartego menu do potrzebnej wysokości żeby nie przysłaniało całej strony */
        padding-bottom: 15px;
        box-shadow: rgb(0 0 0 / 20%) 0px 9px 20px;
    }
    
    #modal-1-content {
        gap: 0px;
        padding-top: 0;
    }
    
    #modal-1-content > ul {
        /* wyśrodkowanie menu*/
        margin: auto;
    }
    
    .wp-block-navigation__responsive-dialog {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    
    #modal-1-content .wp-block-navigation li {
        /* elementy menu rozciągniecie do możliwego miejsca odstępy i podziałka borderem*/
        width: 100%;
        border-bottom: 2px #0000002e solid;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    #modal-1-content .wp-block-navigation li > a {
        width: 100%;
        /*rozciągnięcie klikalnosci na czałąszerokość*/
    }

    /* korekta podziałek borderów */
    #modal-1-content .wp-block-navigation li:first-child {
        border-top: 2px #0000002e solid;
    }

    #modal-1-content .wp-block-navigation li:last-child {
        border-bottom: none;
    }

    /* submenu */
    ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
        position: relative;
        padding-top: 0px !important;
        padding-right: 0 !important;
        padding-left: 15px !important;
        padding-bottom: 5px;
        position: relative !important;
        top: 7px !important;
    }

    /* zaykacz menu wyśrodkowanie */
    button.wp-block-navigation__responsive-container-close {
        position: static;
        margin: auto;
        margin-top: 20px;
    }
    
    /* wyłączenie sociala z mobilki*/
    .wp-block-social-links {

        display: none !important;
    }
}

Skonfigurowanie Wyglądu Menu

Po dostosowaniu breakpointa, warto zadbać o estetykę menu. Skrypty CSS powyżej pokazują, jak można zmodyfikować wygląd menu, aby było dopasowane do mobilnych ekranów. Kluczowe jest ustawienie odpowiednich paddingów, marginesów i szerokości elementów menu.

Ukrywanie Elementów na Mobilnych Ekranach

Czasami niektóre elementy menu mogą nie być potrzebne na urządzeniach mobilnych. Przykład powyżej pokazuje, jak ukryć elementy social links, które mogą zaburzać przejrzystość menu na małych ekranach.

Dzięki tym krokom, Twoje menu mobilne z submenu będzie wyglądać dobrze i działać sprawnie w nowym edytorze bloków WordPress.

Wróć