آموزش ساخت فهرست‌های واکنش‌گرا Burger Menu در وردپرس

1 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 5
Loading...
آموزش ساخت فهرست‌های واکنش‌گرا Burger Menu در وردپرس

سلام خدمت دوستان همیشگی رایا وردپرس

امروزه بیشتر افراد اکثر کارهایشان را با موبایل یا تبلت انجام می دهند به همین دلیل  قالب وب سایت شما باید ریسپانسیو باشد تا در این دستگاه ها نیز به خوبی نمایش داده شود.

اما گاهی با وجود ریسپانسیو بودن قالب سایت، منو یا فهرست در تلفن همراه یا تبلت خوب نمایش داده نمی شود در این موقع بهتر است از فهرست واکنش گرا یا Burger Menu استفاده شود.

منو برگر دقیقاً به صورت یک آیکون کوچک در بالای سایت نشان داده می شود که کاربر وقتی روی آیکون می رود فهرست برای اون نشان داده می شود و با این کار فضای کمتری نیز گرفته خواهد شد.

نمایش آیکون فهرست واکنش گرا

برای نمایش آیکون فهرست واکنش گرا در سایت کافی است وارد هاست سپس وارد فایل header.php شوید و قطعه کد زیر را بعد از منوی سایت اضافه کنید.

<?php wp_nav_menu(array( 'container_class' =>'main-nav', 'theme_location'=> 'primary' )); ?>
<a class="toggle-nav" href="#">☰</a>

 

پنهان کردن آیکون فهرست واکنش گرا در لپ تاپ یا کامپیوتر

با اضافه کردن قطعه کد زیر در قالب سایت فهرست واکنش گرا تنها در تلفن همراه یا تبلت برای شما نشان داده خواهد شد و در لپ تاب یا کامپیوتر نمایش داده نمی شود.

.toggle-nav {
display: none !important;
}

 

نمایش فهرست واکنش گرا برای دستگاه های با حداکثر سایز ۴۸۰px

برای نمایش منو واکنش گرا در دستگاه هایی با صفحه نمایش نهایت ۴۸۰px قطعه کد زیر را به قالب سایت اضافه کنید ( اگر هم می خواهید در دستگاه های با اندازه ی صفحه نمایش بزرگتر نشان دهید عدد را تغییر دهید)

@media screen and ( max-width: 480px) {
 
 
}

 

تعیین رنگ و نمایش موقعیت منو واکنش گرا در سایت

برای تغییر رنگ و موقعیت منو واکنش گرا در سایت وردپرسی قطعه کد زیر را به قالب سایت اضافه کنید حتی شما می توانید مطابق میل خود آن را سفارشی کنید.

.toggle-nav {
padding: 15px;
margin: 15px;
display: inline-block !important;
color: #8D7F68;
color: #fff;
transition: color linear 0.15s;
}
 
.toggle-nav:hover, .toggle-nav.active {
    text-decoration: none;
    color: #8D7F68;
}

نمایش منو واکنش گرا به صورت تمام صفحه با پس زمینه سفید

قطعه کد زیر را در درون کد کوئری  media قرار دهید.

.menu.main {
display: inline-block;
position: relative;
background: #fff;
}
.menu.main ul {
display: none;
position: absolute;
top: 80%;
left: 0px;
padding-left: 15px;
background: #fff;
}
.menu.main li {
display: block;
float: none;
}

با قرار دادن کد بالا وقتی کاربری روی آیکون منو کلیک می کند منو به صورت تمام صفحه با پس زمینه ی سفید به او نمایش داده خواهد شد. منو شما دیگر شناور نیستند و به صورت بلاک ثابت می باشند.

نمایش منو واکنش گرا به صورت زیباتر

برای زیباتر کردن منو واکنش گرا قطعه کد زیر را به فایل Function.php اضافه کنید.

function wpmu_burger_menu_scripts() {   
wp_enqueue_script( 'burger-menu-script', get_stylesheet_directory_uri() . '/scripts/burger-menu.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpmu_burger_menu_scripts' );

در ادامه کد زیر را قرار دهید تا منو به شکل زیباتری برای کاربران باز شود و از حالت ساده و خسته کننده خارج شود.

jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery('.menu.main ul').slideToggle(500);
e.preventDefault();
});

تمامی قطعه کدهای بالا را ذخیره کنید.

برای نمونه وقتی سایز صفحه نمایش سایت کوچک می شود منو به صورت زیر نمایش داده خواهد شد البته آیکون به صورت ۳ خطی نمایش داده می شود که وقتی روی آن آیکون کلیک کنید به صورت زیر نشان داده می شود.

نمایش فهرست واکنش گرا در سایت

 

جمع بندی!

در برخی سایت ها مشاهده کرده اید که منو به صورت آیکون کوچک است و شما وقتی روی آیکون می روید فهرست برای شما نشان داده خواهد شد.

نمایش فهرست به صورت واکنش گرا یکی از کارهایی است که به شما پیشنهاد می کنیم حتماً برای سایت وردپرسی تان انجام دهید چون هم سایت شما را زیباتر می کند و فضای کمتری اشغال می کند و هم اینکه منوها در تلفن همراه یا تبلت به هم ریخته نیست و با رفتن کاربر روی آیکون برای او نمایش داده خواهد شد.

امیدواریم آموزش امروز برای شما مفید بوده باشد…

مطالعه بیشتر