আপনি কি আপনার ডিভি মেগা মেনুর জন্য একটি হ্যামবার্গার আইকন তৈরি করতে চান?
ডিভি মোবাইলে এবং স্লাইড ইন এবং ফুল স্ক্রিনের মতো নির্দিষ্ট হেডার স্টাইলে আপনার প্রধান মেনু টগল করতে হ্যামবার্গার আইকন ব্যবহার করে।
আজ আমরা আপনাকে দেখাতে যাচ্ছি কিভাবে একটি ক্লিকে একটি মেগা মেনু টগল করতে হ্যামবার্গার আইকন ব্যবহার করবেন। অনেক মেনু বিকল্প সহ ওয়েবসাইটগুলির জন্য এটি একটি দুর্দান্ত সমাধান।
হ্যামবার্গার আইকন হেডার বিশৃঙ্খলা এড়ায়। অধিকন্তু, মেগা মেনুর সংগঠিত 4-কলাম বিন্যাস ব্যবহারকারীদের তাদের যা প্রয়োজন তা দ্রুত এবং দক্ষতার সাথে খুঁজে পেতে দেয়।
জরিপ
আমরা এই টিউটোরিয়ালে ঝাঁপিয়ে পড়ার আগে, আসুন আমরা যে ফলাফল অর্জন করতে চাই তা দেখে নেওয়া যাক।
Divi এর সাথে হ্যামবার্গার আইকন প্রয়োগ করুন
আপনার মেনুকে একটি মেগা মেনুতে রূপান্তর করুন
আপনাকে অবশ্যই প্রথমে একটি মেগা মেনু তৈরি করুন অথবা আপনার বর্তমান মেনুকে একটি মেগা মেনুতে পরিবর্তন করুন। এই অংশটি বেশ সহজ।
ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান উপস্থিতি> মেনু.
দেখার জন্য ক্লিক করুন একটি নতুন মেনু তৈরি করুন, আপনার মেনুতে একটি নাম দিন তারপরে ক্লিক করুন মেনু তৈরি করুন.
ট্যাবে ক্লিক করে CSS ক্লাস মেনু বৈশিষ্ট্য সক্রিয় করতে ভুলবেন না স্ক্রিন অপশন পর্দার উপরের ডানদিকে মেনু এবং টিকিং সিএসএস ক্লাস.
আপনি এখন আপনার তৈরি করা নতুন মেনুতে আপনার মেনু আইটেম যোগ করতে পারেন।
প্রথমে, মেনু আইটেম যোগ করা যাক যা হ্যামবার্গার আইকন হিসাবে কাজ করবে। এই মেনু আইটেমটি অন্য সব মেনু আইটেমের মূল হবে।
এই মেনু আইটেমটি তৈরি করতে, নিম্নলিখিত পরামিতিগুলির সাথে একটি কাস্টম লিঙ্ক তৈরি করুন:
- URL: http//#
- নেভিগেশন শিরোনাম: <div class="hamburger">
- CSS ক্লাস: মেগা-মেনু
URLটি কেবল একটি হ্যাশট্যাগ (#) কারণ এই মেনু আইটেমটি একটি নির্দিষ্ট পৃষ্ঠার সাথে লিঙ্ক করবে না। এক ক্লিকে আমাদের মেগা মেনু স্থাপন করতে আমরা এই মেনু আইটেমটি ব্যবহার করব।
"মেগা মেনু" CSS ক্লাস মেগা মেনু কার্যকারিতা স্থাপন করে। এই CSS ক্লাসটি শুধুমাত্র প্রধান মূল মেনু আইটেম এবং যেকোনো উপ-আইটেমে একবার প্রয়োগ করা উচিত।
এখন মেনু আইটেম যোগ করার সময় যা আপনার মেগা মেনু তৈরি করবে।
এখন চারটি মেনু আইটেম সাজান/টেনে আনুন (প্রত্যেকটি তাদের নিজস্ব তিনটি সাব-আইটেম সহ) প্রধান মূল মেগা মেনু লিঙ্কের সাব-আইটেম হতে।
আপনি মেনু সাজানোর কাজ সম্পন্ন হলে, চেক করতে ভুলবেন না প্রধান সূচি sous রেগেলেস ডু মেনু এবং ক্লিক করুন মেনু সংরক্ষণ করুন
ক্লিকে মেনু দেখানোর জন্য jQuery যোগ করা হয়েছে এবং হোভারে নয়
এখন আপনার মেগা মেনু তৈরি হয়ে গেছে, আমাদের কিছু jQuery যোগ করতে হবে যাতে আমাদের মেগা মেনু প্রদর্শিত হয় যখন আপনি আইকনের উপর ঘোরানোর পরিবর্তে ক্লিক করেন (যা ডিফল্ট)।
এটি করতে, যান Divi > থিম বিকল্প > ইন্টিগ্রেশন
বিভাগে নিম্নলিখিত স্ক্রিপ্ট যোগ করুন "আপনার ব্লগের <head> এ কোডের লাইন যোগ করুন" :
<script>
/*** Open menu itmes with children on click not hover ***/
(function($) {
jQuery(document).ready(function() {
jQuery('#top-menu li.mega-menu > a, #et-secondary-nav li.mega-menu > a').click(function(e) {
e.preventDefault();
jQuery(this).parent().toggleClass('show-submenu');
});
});
jQuery(document).click(function(e) {
if(!$(e.target).closest('.show-submenu').length) {
jQuery('.show-submenu').removeClass('show-submenu');
}
});
})(jQuery);
</script>
কাস্টম সিএসএস যুক্ত করা হচ্ছে
আপনি যখন থিম বিকল্পগুলিতে থাকবেন, ট্যাবে যান৷ সাধারণ
স্ক্রোল করুন 'CSS কাস্টমাইজ করুন' এবং নিচে CSS পেস্ট করুন তারপর ক্লিক করুন 'পরিবর্তনগুলোর সংরক্ষন' :
/*** hides sub-menu on hover ***/
#et-top-navigation #top-menu li.et-hover ul.sub-menu { display: none!important; }
/*** shows submenu on click ***/
#et-top-navigation #top-menu li.show-submenu ul.sub-menu { display: block!important; visibility: visible!important; opacity: 1!important; }
/*** Hide hamburger menu item on mobile ***/
.et_mobile_menu .mega-menu >
a{display:none;}
#top-menu .mega-menu > a, #et-secondary-nav .mega-menu > a {padding-bottom: 24px !important;}
/**** hide down arrow ****/
#top-menu .mega-menu > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {display: none;}
/*** show hamburger icon ***/
.hamburger:before {
font-family: "ETmodules" !important;
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 0.6em;
text-transform: none;
speak: none;
position: relative;
cursor: pointer;
top: 0;
left: 0;
vertical-align: -11px;
padding-right: 3px;
font-size: 32px; /*change size of icon here*/
content: "61"; /*change icon here*/
color: #333; /*change color of icon here*/
}
/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
content: "4d"; /*change x icon here*/
}
হয়ে গেল!
ফল
আসুন এই ধাপের শেষে ফলাফলটি পর্যবেক্ষণ করি।
এখনই ডিভিআই ডাউনলোড করুন!!!
প্রতিক্রিয়াশীল?
মেগা মেনু শুধুমাত্র 980 পিক্সেলের চেয়ে বড় স্ক্রীনের আকারে কাজ করে। 980px (ট্যাবলেট এবং স্মার্টফোন) এর নিচের স্ক্রীনের জন্য, মেনুটি ডিফল্টরূপে মোবাইল মেনু মোডে স্যুইচ করবে।
এখনই ডিভিআই ডাউনলোড করুন!!!
উপসংহার
আপনি যদি মেগা মেনু পছন্দ করেন এবং আপনার হেডারের জন্য একটি পরিষ্কার এবং ন্যূনতম নকশা তৈরি করতে চান, তাহলে আপনার মেগা মেনু প্রদর্শনের জন্য একটি হ্যামবার্গার আইকন যোগ করা একটি দুর্দান্ত সমাধান।
এখন আপনার ব্যবহারকারীরা আপনার সমস্ত নেভিগেশন লিঙ্ক একবারে এক ক্লিকে দেখতে পাবেন। আপনার যদি কোন উদ্বেগ বা পরামর্শ থাকে, তাহলে আমাদের খুঁজুন মন্তব্য বিভাগ এটি আলোচনা করার জন্য।
তবে আপনি পরামর্শ নিতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি পরিচালনা করতে আরও উপাদানগুলির প্রয়োজন হয়, তবে আমাদের গাইডের সাথে পরামর্শ করে ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.
কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.
...