Barion Pixel
Segédlet

Mega menü készítés WordPressben CSS-el

2020. március 17. | Pócsik Emese

# # # #

Nagyobb, sok funkcióval rendelkező webhelyek esetén a sok szintű legördülő menük általában elrejtik a felhasználók elől a legtöbb lehetőségét. A “megamenü” egy többszintű menütípus, amelyben a legördülő listán belül több oszlopba lehet elrendezni a további almenüpontokat. Kiváló vizuális megoldás nagyszámú almenüpont rendezésére, a webhely struktúrájának rövid áttekintésére.

A megamenük előnye, hogy mindent egy pillanat alatt megmutatnak, így a felhasználók egyben látják a honlap struktúráját, könnyebben tudnak navigálni, anélkül, hogy kattintanának. Emellett ez a megjelenítési forma vizuálisan hangsúlyozza az elemek közötti kapcsolatokat.

A sima szöveg is hatékony lehet gazdagabb tipográfiával (például a linkméretek megkülönböztetésével azok fontossága szerint), de lehet ikonokat, illusztrációkat, képeket is használni menüben.

Hogyan tudunk WordPressben megamenüt készíteni?

Természetesen vannak bővítmények, amik segítségével össze lehet legózni összetett menüket, de ezek kezelése sokszor bonyodalmas, tapasztalat nélkül nem is mindig sikerül. Most egy egyszerű CSS/JS megoldást mutatok nektek, amihez csak be kell állítani egy teljesen egyszerű menüt a WordPress menükezelőjében.

1. Menü létrehozása

3 szinttel fogunk dolgozni, az első szint a főmenü pontok lesznek, azaz, amit vízszintes elrendezésben látsz. Második szint az oszlopok “fejlécei” lesznek, amik lehetnek ugyanúgy hivatkozások, de lehetnek egyszerű szövegek is, amik nem hivatkozások.

2. Menü terület a sablonban

A menü helyét a sablonban a szokott módon tudjuk megadni, két paraméterre kell figyelni. A menü kirajzolásakor ne használjunk konténert, ne legyen a div a struktúrában, mert CSS-ben közvetlen gyermek elemkre fogunk hivatkozni. A másik hogy a linkekhez használjuk a link_before / link_after paramétert, így egy <span> cimkét be tudunk rakni a struktúrába. Ezekkel a beállításokkal sokkal könnyebben formázható lesz a lista CSS-el.

<nav id="mega-menu">
<?php if (has_nav_menu( 'mega-menu' )) {wp_nav_menu(array('theme_location' => 'mega-menu', 'container' => false )); } ?>
</nav>

Ne felejtsd el hozzá adni a functions.php-ban a menüterületet

'mega-menu' => __('Mega Menu', 'text-domain')

3. CSS formázás

A számozatlan lista elemei alapértelemezetten örökölnek, ezért használjuk a > szelektort az elemek között, hogy pontosan hivatkozhassunk egy-egy szintre a menüben. Kezdésnek display: flexet használunk az oszlopok létrehozására, ezzel minden oszlop egymás mellé kerül. Használható egyébként display: grid, vagy “mansory” megoldás column-count: paraméterrel.

4. Responsive formázás

Telefonon a megemamü oszlopos elrendezése sajnos nem a legjobb választás, felhasználó barátabb az egyszerű felsorolás. Ezért egy töréspont alatt egyszerűbb formára hozzuk a menüpontokat.

#mega-menu {
    border-top: solid 1px #222;
    border-bottom: solid 1px #222;
    position: relative;
}

#mega-menu ul li {
    position: relative;
}

#mega-menu ul li a {
    line-height: 1;
    color: inherit;
    padding: 12px 0;
    display: block;
    text-transform: uppercase;
    position: relative;
    white-space: nowrap;
}

@media screen and (min-width: 960px) {
    #mega-menu ul {
        display: flex;
    }

    #mega-menu ul li a {
        margin: 0 10px;

    }

    #mega-menu ul li a:hover {
        color: #9933ff;
    }

    #mega-menu > ul > li > ul {
        z-index: 10;
        position: absolute;
        left: -15px;
        top: 30px;
        background: #fff;
        padding: 15px;
        opacity: 0;
        visibility: hidden;
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    #mega-menu ul > li:hover ul {
        opacity: 1;
        visibility: visible;
        top: 2.2em;
    }

    #mega-menu ul li ul li ul,
    #mega-menu ul li ul li ul li {
        display: block;
    }

    #mega-menu > ul > li > ul > li > a {
        /* második szint */
        padding: 8px 0 4px 0;
        font-size: smaller;
        margin-bottom: 4px;
        font-weight: bold;
    }

    #mega-menu > ul > li > ul > li > a span {
        /* második szint */
        border-bottom: solid 1px #eee;
        display: block;
        padding-bottom: 6px;
    }

    #mega-menu ul li ul li ul li a {
        /* harmadik szint */
        padding: 8px 0;
        font-size: smaller;
        text-transform: none;
    }

}


@media screen and (max-width: 959px) {
    #hamburger {
        height: 38px;
        width: 38px;
        padding: 10px;
        border-radius: 50%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        float: right;
        margin: 0;
        cursor: pointer;
        position: relative;
        z-index: 1;
    }

    #hamburger span {
        position: relative;
        display: block;
        height: 2px;
        background: #333;
        opacity: 1;
        border-radius: 3px;
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

    #hamburger span:nth-child(1) {
        top: 0;

    }

    #hamburger span:nth-child(3) {
        bottom: 0;

    }

    #hamburger.open span:nth-child(1) {
        top: 50%;
        margin-top: -1px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    #hamburger.open span:nth-child(3) {
        bottom: 50%;
        margin-bottom: -1px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }

    #hamburger.open span:nth-child(2) {
        opacity: 0;
    }

    #mega-menu {
        min-height: 38px;
    }

    #mega-menu > ul {
        width: 100%;
        transition: max-height 1s cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-transition: max-height 1s cubic-bezier(0.645, 0.045, 0.355, 1);
        overflow: hidden;
        max-height: 0;
    }

    #mega-menu > ul.open {
        max-height: 600px;
    }

    #mega-menu > ul > li > a {
        display: block;
        padding: 10px 0;
        border-bottom: solid 1px #222;
    }

    #mega-menu .opener {
        display: block;
        position: absolute;
        top: 0;
        height: 38px;
        width: 38px;
        right: 0;
        cursor: pointer;
    }

    #mega-menu .opener:before {
        content: "";
        border: solid black;
        border-width: 0 2px 2px 0;
        display: inline-block;
        position: absolute;
        top: 10px;
        right: 15px;
        padding: 5px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }

    #mega-menu > ul > li > ul {
        padding: 0;
        margin-left: 20px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
        transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
        overflow: hidden;
        max-height: 0;
    }

    #mega-menu > ul > li > ul.open {
        padding: 20px 0px;
        max-height: 800px;
    }

    #mega-menu > ul > li > ul > li > a span {
        border-bottom: solid 1px #eee;
        font-weight: bold;
        display: block;
        padding-bottom: 6px;
    }

    #mega-menu ul li ul li ul li a {
        padding: 4px 0;
        font-size: smaller;
        text-transform: none;
    }
}

5. jQuery hamburger
jQuery segítségével lehet nyitni/zárni az egyes almenüket. Itt a 3. szintet is mutatjuk tehát a főmenüpont lenyitása utána 2. és 3. szint is látható. A scriptben csak osztályokat adunk hozzá kattintás alapon, az animációk és az effektek már a CSS-ben történnek.

// Mega menu
$('#mega-menu').prepend('<div id="hamburger"><span></span><span></span><span></span></div>');
$('#hamburger').click(function () {
$('#mega-menu ul:first').toggleClass('open');
$(this).toggleClass("open");
});
$('#mega-menu > ul > li.menu-item-has-children').append("<span class='opener'></span>");
$('.opener').click(function () {
$(this).siblings('ul').toggleClass("open");
});

Video segédlet

Iratkozz fel 7 napos ingyenes, alapozó webdesign kurzusunkra!

Kipróbálom

blog

Segédlet SEO a Google-ön kívül?

SEO a Google-ön kívül?

2021. július 29.

A SEO (keresőoptimalizálás, Search Engine Optimization) kikerülhetetlen része a webdesignnak, egyszerűen muszáj gondolni rá, hogy az oldalunk kódja megfelelően kedvében járjon a keresőalgoritmusnak meg az ő pici robotjainak. Ha viszont SEO-ról beszélünk, nem is kérdés, hogy melyik is az a keresőmotor, amire mindenki gondol – hát persze, hogy a Google az, akitől kizárólag várhatjuk sorsunk […]

Tovább a cikkre