Tag: mobile

Opublikowane w

FSE menu mobile skryptozakładka

Jako że w FSE menu mobilne gdy traci foxus zamyka się to trudno się z nim pracuje. Nacienięcie na konsole powoduje zwinięcie się menu.
Poniższa wtyczka na hama dodaje klasy otwarcia menu i podmenu co ułatwia robotę.

javascript: (() => {
     document.getElementById('modal-1').classList.add("is-menu-open");
     document.getElementsByClassName('wp-block-navigation-submenu__toggle')[1].setAttribute("aria-expanded", "true");
})();
Opublikowane w

Sparkle FSE menu mobilne z submenu w nowym blok edytorze

Próg zawijania menu do mobilki można ustalić w:
wp-includes/blocks/navigation/style.min.css
Domyślny próg jest między 599px a 600px with.

Opcja z podstronami ze wszystkim rozwiniętym, mieszczącym się w pionie na mobile’u.

Menu mobilne w modelu fse z bloków ma dość skomplikowaną strukturę, i trzeba się czasem nieźle namęczyć żeby zdefinoiować sobie odpowiedni wygląd.


@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;
    }
}