Bevezető
Az egyedi menü létrehozása az Elementor segítségével remek módja annak, hogy professzionális megjelenést biztosítsunk weboldalunknak, miközben a navigációt is intuitívabbá tesszük. Ebben az útmutatóban bemutatom, hogyan készíthetünk egy különleges oldalsó menüt, amely követi a modern dizájn trendeket, és a látogatóknak egyszerű hozzáférést biztosít a fontos oldalakhoz.
Mielőtt belevágnánk a menü tervezésének lépéseibe, nézd meg ezt a videót, amely részletesen bemutatja az egyedi menü létrehozásának folyamatát: Hogyan készíts Dinamikus, ANIMÁLT MENÜT Az Elementor Segítségével | WordPress Navigációs Dizájn.
1. Flexbox beállítása
Első lépésként létrehozunk egy Flexbox konténert. Ennek szélességét állítsuk teljes szélességre és a magasságát 115 pixelre. Minden elemet középre igazítunk ebben a konténerben, hogy a menü esztétikus és jól elrendezett legyen. Állítsuk a konténer pozícióját fixre és margóját -115 pixelre (lentre), valamint a z-indexét 100-ra, hogy a menü mindig előtérben maradjon.
CSS osztály: mdw-side-menu-area
2. Logó elhelyezése
A header-be helyezzünk el egy képet, amely az oldal logóját jeleníti meg. Állítsuk be a kép hivatkozását az oldal kezdőoldalának URL-jére, hogy a logóra kattintva a látogató a főoldalra kerüljön.
- Magasság: 100 px
- Szélesség: Auto
CSS osztály: mdw-hide-on-scroll
3. Gomb hozzáadása a menü indításához
Most helyezzünk el egy új konténert a logó mellé. Állítsuk teljes szélességűre, 110 px szélességgel és 45 px magassággal. A konténer pozícióját abszolútra állítsuk, majd vízszintesen jobbra és 35 px-re, függőlegesen fentre és szintén 35 px-re helyezzük el. A z-index értékét állítsuk 20-ra, és adjunk hozzá egy egyedi CSS osztályt.
CSS osztály: mdw-side-menu-botton
4. Menü gomb testreszabása
A menü gomb szövege lehet “Menu” vagy bármi, amit szeretnénk. Példánkban kék színűre állítjuk, 18 px-es betűmérettel, szegély- és belső margók nélkül. Az Elementor navigátorában kettőzzük meg a gombot, és az egyiknek állítsuk be az eredeti gomb inverzét.
5. Menüháttér konténer
A logó mellé húzzunk be egy újabb konténert, amelyet teljes szélességűre, 480 px-es szélességgel állítunk. A konténer pozícióját abszolútra állítjuk, és jobbra 10 px-re, fentre szintén 10 px-re helyezzük. A háttérszín a gomb színével megegyező kék árnyalat, és a szegély sugarát 23 px-re állítjuk be, hogy lekerekített sarkokat kapjon.
6. Menüelemek hozzáadása
A következő lépésben helyezzünk el egy ikonlistát a menüoldalon belül, amely tartalmazza az oldal különböző részeinek linkjeit (pl. Kezdőlap, Ajánlatkérés, Rólunk, Blog). A listában használhatunk kis nyíl ikont az egyes menüpontok elé.
- Betűtípus: DM Sans
- Betűméret: 48 px
- Térköz: 20 px
7. Közösségi média linkek
A menü alsó részébe adjunk hozzá egy újabb ikonlistát, amely a közösségi média profilokra irányít (Facebook, Instagram, stb.). Ezt állítsuk kisebb, 18 px-es betűméretűre és 7 px-es térközzel.
CSS osztály: mdw-side-menu-social
8. CSS stílus hozzáadása
Végül illesszünk be egy HTML kódot a konténerbe, amely tartalmazza az alábbi CSS kódot, ezzel még különlegesebb hatást érhetünk el a menü megjelenésében.
<style>
.mdw-side-menu-area{
--hide-on-scroll: true;
--hide-on-scroll-amount: 100;
--menu-icon-width: 48px;
--menu-icon-gap: 15px;
}
.mdw-side-menu-area .mdw-hide-on-scroll{
transition: all 0.3s ease-in-out;
}
.mdw-side-menu-area .mdw-hide-on-scroll.hide{
opacity: 0;
pointer-events: none;
}
.mdw-side-menu-area .mdw-side-menu-button{
cursor: pointer;
height: var(--min-height,45px);
overflow: hidden !important;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-widget-button{
transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.mdw-side-menu-area.open .mdw-side-menu-button .elementor-widget-button{
transform: translateY(-100%);
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-button{
height: var(--min-height,45px);
display: flex;
align-items: center;
justify-content: center;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-button-icon{
margin: 0;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-button-content-wrapper{
perspective: 6em;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-button-text:nth-child(1){
transform-origin: top;
transition: transform .55s cubic-bezier(.645,.045,.355,1), opacity .35s linear .2s;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-widget-button.open .elementor-button-text:nth-child(1){
opacity: 0;
transform: rotateX(90deg) scaleX(.9) translate3d(0, -10px, 0);
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-button-text:nth-child(2){
position: absolute;
opacity: 0;
transform: rotateX(-90deg) scaleX(.9) translate3d(0, 10px, 0);
transform-origin: bottom;
transition: transform .55s cubic-bezier(.645,.045,.355,1), opacity .35s linear .2s;
}
.mdw-side-menu-area .mdw-side-menu-button .elementor-widget-button.open .elementor-button-text:nth-child(2){
opacity: 1;
transform: rotateX(0deg) scaleX(1) translateZ(0);
transition: transform .75s cubic-bezier(.645,.045,.355,1), opacity .35s linear .3s;
}
.mdw-side-menu-area:not(.open-arrow) .mdw-side-menu{
pointer-events: none;
}
.mdw-side-menu-area .mdw-side-menu:before{
top: 0;
right: 0;
left: unset;
transition: all 0.75s cubic-bezier(.76,0,.24,1);
}
.mdw-side-menu-area:not(.open) .mdw-side-menu:before{
height: var(--button-height,45px);
width: var(--button-width,110px);
transform: translate(calc(-1*var(--button-right,25px)), var(--button-top,25px));
}
.mdw-side-menu-area:not(.anim) .mdw-side-menu:before{
transition: none;
opacity: 0;
}
.mdw-side-menu-area .mdw-side-menu .e-con::-webkit-scrollbar,
.mdw-side-menu-area .mdw-side-menu .e-container::-webkit-scrollbar{
display: none;
}
.mdw-side-menu-area .mdw-side-menu .e-con,
.mdw-side-menu-area .mdw-side-menu .e-container{
overflow-y: auto;
max-height: calc(100vh - 20px - var(--margin-block-start,113px));
-ms-overflow-style: none;
scrollbar-width: none;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item,
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item a{
perspective: calc(3*48px);
perspective-origin: bottom;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item{
margin-top: 0 !important;
padding-top: var(--padding-top);
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item:first-child{
padding-top: 0;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item a{
outline: none;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon{
width: var(--menu-icon-width,48px);
height: calc(0.6*var(--menu-icon-width,48px));
align-items: center;
padding-right: var(--menu-icon-gap,15px);
overflow: hidden;
opacity: 0;
box-sizing: content-box;
}
.mdw-side-menu-area.open-arrow .mdw-side-menu .elementor-icon-list-icon{
opacity: 1;
transition: all 0s cubic-bezier(.215,.61,.355,1) calc(var(--index,0) * .1s + 0.55s);
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon i{
width: 100% !important;
height: 0.1em;
background: currentColor;
position: relative;
margin-left: calc(0px - var(--menu-icon-width,48px) - var(--menu-icon-gap,15px));
transition: all .65s cubic-bezier(.215,.61,.355,1) !important;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon svg{
display: none;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item:hover .elementor-icon-list-icon i{
margin-left: -0.07em;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon i:before,
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon i:after{
content: "";
position: absolute;
width: 40%;
transform: rotate(45deg) translateX(0.05em);
transform-origin: right center;
height: 0.1em;
background: currentColor;
right: 0;
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon i:after{
transform: rotate(-45deg) translateX(0.05em);
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-text{
transform: rotateX(90deg) translate3d(0,60px,0);
opacity: 0;
transition: transform 0s linear .45s, opacity 0.3s linear !important;
transform-origin: center bottom;
padding-left: 0 !important;
max-width: calc(100% - var(--menu-icon-width,48px) - var(--menu-icon-gap,15px));
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-icon + .elementor-icon-list-text{
margin-left: calc(0px - var(--menu-icon-width,48px) - var(--menu-icon-gap,15px));
}
.mdw-side-menu-area .mdw-side-menu .elementor-icon-list-item:hover .elementor-icon-list-text{
margin-left: 0;
}
.mdw-side-menu-area.open-instant .mdw-side-menu .elementor-icon-list-text{
transform: rotateX(0deg);
opacity: 1;
transition: transform .65s cubic-bezier(.215,.61,.355,1) calc(var(--index,0) * .1s + .55s), opacity .35s linear calc(var(--index,0) * .1s + .55s), margin-left .65s cubic-bezier(.215,.61,.355,1) !important;
}
.mdw-side-menu-area .mdw-side-menu-social{
display: block;
background: none;
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-widget-empty-icon{
display: none;
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-item{
width: 47%;
float: left;
}
.mdw-side-menu-area .mdw-side-menu-social a{
display: inline-block;
width: auto;
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-text{
transform: translate3d(0,100%,0);
transition: transform 0s linear .45s, opacity 0.3s linear;
max-width: 100%;
}
.mdw-side-menu-area.open-instant .mdw-side-menu-social .elementor-icon-list-text{
transition: opacity .45s linear 0s, transform .65s cubic-bezier(.215,.61,.355,1) 0s !important;
transition-delay: calc(var(--index)*.1s + .7s) !important;
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-text:after{
content: "";
height: 1px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: currentColor;
transform: scaleX(0%);
transform-origin: left;
transition: all 0.75s cubic-bezier(.645,.045,.355,1);
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-item:hover .elementor-icon-list-text:after{
transform: scaleX(100%);
}
@media (max-width:767px){
.mdw-side-menu-area{
--menu-icon-width: 38px;
--menu-icon-gap: 10px;
}
.mdw-side-menu-area .mdw-side-menu-social .elementor-icon-list-item {
width: 50%;
}
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
if(!MDWNonce108){
var MDWNonce108 = true
var $ = jQuery
$(document).ready(function(){
function getCSS(el, property){
return getComputedStyle(el.get(0)).getPropertyValue(property)
}
function setCSS(el, property, value){
el.each(function(i){
el.get(i).style.setProperty(property, value)
})
}
function setSmallState($this){
var button = $this.find('.mdw-side-menu-button'),
mainMenu = $this.find('.mdw-side-menu'),
buttonRight = (parseFloat(getCSS(button, 'right')) - parseFloat(getCSS(mainMenu, 'right'))) + 'px',
buttonTop = (parseFloat(getCSS(button, 'top')) - parseFloat(getCSS(mainMenu, 'top'))) + 'px',
buttonHeight = button.height(),
buttonWidth = button.width()
setCSS($this, '--button-right', buttonRight)
setCSS($this, '--button-top', buttonTop)
setCSS($this, '--button-height', buttonHeight + 'px')
setCSS($this, '--button-width', buttonWidth + 'px')
$this.find('.mdw-side-menu .elementor-widget-icon-list').each(function(i){
var paddingBottom = getCSS($(this).find('.elementor-icon-list-item').eq(0), 'padding-bottom')
setCSS($(this).find('.elementor-icon-list-item'), '--padding-top', paddingBottom)
})
}
$(window).on('load resize', function(){
$('.mdw-side-menu-area').each(function(){
setSmallState($(this))
})
})
$('.mdw-side-menu-area').each(function(){
var $this = $(this)
setSmallState($this)
setTimeout(function(){
$this.addClass('anim')
},100)
$(this).find('.mdw-side-menu .elementor-icon-list-item').each(function(i){
setCSS($(this), '--index', i)
var icon = $(this).find('.elementor-icon-list-icon')
if(icon.length && !icon.find('i').length){
icon.append('<i aria-hidden="true" class="fas fa-arrow-right"></i>')
}
})
})
$('.mdw-side-menu-button .elementor-widget-button').each(function(){
var wrapper = $(this).find('.elementor-button-content-wrapper'),
text = $(this).find('.elementor-button-text')
text.clone().appendTo(wrapper)
})
var clickLock = false
$('.mdw-side-menu-button').on('click', function(){
if(clickLock) return
var $this = $(this),
menu = $this.closest('.mdw-side-menu-area'),
button = $this.find('.elementor-widget-button')
clickLock = true
if(menu.hasClass('open')){
button.eq(1).removeClass('open')
menu.removeClass('open-arrow')
setTimeout(function(){ menu.removeClass('open-instant') },300)
setTimeout(function(){ menu.removeClass('open') },500)
setTimeout(function(){ button.eq(0).removeClass('open') },750)
}else{
button.eq(0).addClass('open')
setTimeout(function(){ menu.addClass('open open-instant open-arrow') },500)
setTimeout(function(){ button.eq(1).addClass('open') },750)
}
setTimeout(function(){ clickLock = false },750)
})
$('.mdw-side-menu-button a').on('click', function(e){
e.preventDefault()
})
$('body').on('click', function(e){
$('.mdw-side-menu-area').each(function(){
if($(this).hasClass('open-instant') && !$(e.target).closest('.mdw-side-menu').length && !$(e.target).closest('.mdw-side-menu-button').length){
$(this).find('.mdw-side-menu-button').trigger('click')
}
})
})
$(window).on('scroll', function(){
$('.mdw-hide-on-scroll').each(function(){
var offset = isNaN(parseFloat(getCSS($(this), '--hide-on-scroll-amount'))) ? parseFloat(getCSS($(this), '--hide-on-scroll-amount')) : 100
if(getCSS($(this), '--hide-on-scroll').trim() == 'true'){
if($(window).scrollTop() > offset){
$(this).addClass('hide')
}else{
$(this).removeClass('hide')
}
}
})
})
})
}
</script>
Összefoglaló
A menü megtervezésekor fontos, hogy figyelembe vedd a látogatók igényeit és elvárásait. Különböző kategóriák, aloldalak és szolgáltatások világos és logikus bemutatása segíti a felhasználókat a tartalmak gyors és hatékony megtalálásában.
A megfelelő menü nemcsak a felhasználói élményt javítja, hanem hozzájárul a weboldal céljainak eléréséhez is. Ha szeretnéd, hogy weboldalad menüje a legjobban szolgálja a látogatókat és a márkádat, vedd fel velünk a kapcsolatot, és segítünk a tervezésben!