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

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

2020. március 17. - 18:02 • írta: 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

Címkék:

Ezeket láttad már?

A szerző: Pócsik Emese
2007 óta dolgozom webdesignerként. Munkáim nagy részét főleg üzleti weboldalak készítése teszi ki kis- és közép vállalkozásoknak. A tanfolyamon összetettebb weblapok HTML+CSS kódolását oktatom, néhány házi praktikával és gyakorlati tanáccsal megfűszerezve.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük