{"id":9422,"date":"2022-02-28T15:45:50","date_gmt":"2022-02-28T13:45:50","guid":{"rendered":"https:\/\/zeni.cz\/blog\/custom-menu-for-engeto-without-the-use-of-javascript\/"},"modified":"2024-07-10T10:56:07","modified_gmt":"2024-07-10T08:56:07","slug":"custom-menu-for-engeto-without-the-use-of-javascript","status":"publish","type":"post","link":"https:\/\/zeni.cz\/en\/blog-o-wordpress-woocommerce\/web-optimization\/custom-menu-for-engeto-without-the-use-of-javascript\/","title":{"rendered":"Custom Menu For Engeto Without The Use Of JavaScript"},"content":{"rendered":"<div class=\"gb-container gb-container-d8187d17\">\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\"><strong><strong>We have recently created an interesting solution for our client Engeto &#8211; a custom menu without the use of JavaScript. This way, we did not slow down the performance of their website. In today&#8217;s article, you can read about how we worked on the menu and about the benefits of a menu without JavaScript.<\/strong><\/strong><\/p>\n\n<\/div>\n\n<div class=\"gb-container gb-container-2316cb63\">\n\n<h2 class=\"wp-block-heading\">Meet Engeto<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\"><a target=\"_blank\" href=\"https:\/\/engeto.cz\/\" rel=\"noreferrer noopener nofollow\">Engeto&nbsp;<\/a>organizes&nbsp;<strong>IT courses<\/strong>&nbsp;for beginners and advanced, helping people find a job in the IT industry. They cooperate with partner companies and on their website, you will find&nbsp;<strong>stories told by<\/strong>&nbsp;their&nbsp;<a href=\"https:\/\/engeto.cz\/absolventi\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">graduates<\/a>&nbsp;about how&nbsp;Engeto basically <strong>started their IT career<\/strong>,&nbsp;sometimes even<strong> with no prior experience.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">We already&nbsp;<strong>helped them create&nbsp;<\/strong>their&nbsp;<a target=\"_blank\" href=\"https:\/\/engeto.cz\/absolventi\/\" rel=\"noreferrer noopener nofollow\">Absolventi&nbsp;<\/a>and&nbsp;<a target=\"_blank\" href=\"https:\/\/engeto.cz\/terminy\/\" rel=\"noreferrer noopener nofollow\">Term\u00edny&nbsp;<\/a>pages. Its graphics was based on theirs and we&nbsp;<strong>added filtering<\/strong>&nbsp;that wasn&#8217;t possible before. Their customers can now filter courses and graduates&nbsp;<strong>more easily.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">Engeto asked for<strong>&nbsp;different options for both individuals and corporate visitors on their website.<\/strong>&nbsp;This wasn&#8217;t entirely possible on their previous website and its template. So we have started working on a&nbsp;<strong>custom&nbsp;<\/strong>solution for them.<\/p>\n\n<\/div>\n\n<div class=\"gb-container gb-container-86897d64\">\n\n<h2 class=\"wp-block-heading\">Benefits Of A Menu Without JavaScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">As I already mentioned, the menu is working even without the use of JavaScript. We decided not to use JavaScript because it is not always necessary and only&nbsp;<strong>slows down the website loading<\/strong>. It was also quite a challenge for us. I am personally very proud of the menu in the&nbsp;<strong>mobile version<\/strong>, including a&nbsp;<strong>back button<\/strong>&nbsp;used to redirecting from a&nbsp;<strong>submenu<\/strong>&nbsp;to a main menu.<\/p>\n\n\n<div class=\"gb-container gb-container-52f91f04\">\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"376\" height=\"587\" src=\"https:\/\/zeni.cz\/app\/uploads\/2022\/02\/Mobile-version-menu.png\" alt=\"Mobile version - menu\" class=\"wp-image-6983\" srcset=\"https:\/\/zeni.cz\/app\/uploads\/2022\/02\/Mobile-version-menu.png 376w, https:\/\/zeni.cz\/app\/uploads\/2022\/02\/Mobile-version-menu-192x300.png 192w, https:\/\/zeni.cz\/app\/uploads\/2022\/02\/Mobile-version-menu-300x468.png 300w\" sizes=\"auto, (max-width: 376px) 100vw, 376px\" \/><figcaption class=\"wp-element-caption\">Mobile version &#8211; menu<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>A loading speed of the website is&nbsp;<strong>not unnecessarily slowed down<\/strong>.<\/li>\n\n\n\n<li>This adjustment allows the customer to create a&nbsp;<strong>menu exactly according to their ideas<\/strong>&nbsp;and thus display their course offers and web content.<\/li>\n\n\n\n<li>Each&nbsp;<strong>page&nbsp;<\/strong>has an option in its administration to&nbsp;<strong>set&nbsp;<\/strong>which menu&nbsp;<strong>should be displayed in the header.<\/strong>&nbsp;<strong>Two menus<\/strong> are then managed in the settings. One for individual visitors, one for corporate visitors. This allows&nbsp;<strong>very simple administration&nbsp;<\/strong>and possible&nbsp;<strong>exchanges of menus&nbsp;<\/strong>for others.<\/li>\n\n\n\n<li>The main menu is<strong>&nbsp;<\/strong>very<strong>&nbsp;easy to edit<\/strong>. All its elements are configurable via&nbsp;<strong>WordPress administration<\/strong>, so there is&nbsp;<strong>no need for a programmer to intervene in the code&nbsp;<\/strong>when any change is requested.<\/li>\n<\/ul>\n\n\n<div class=\"gb-container gb-container-bdbdfc6b\">\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"465\" height=\"829\" src=\"https:\/\/zeni.cz\/app\/uploads\/2022\/02\/WordPress-administration-custom-menu.png\" alt=\"WordPress administration custom menu\" class=\"wp-image-6980\" srcset=\"https:\/\/zeni.cz\/app\/uploads\/2022\/02\/WordPress-administration-custom-menu.png 465w, https:\/\/zeni.cz\/app\/uploads\/2022\/02\/WordPress-administration-custom-menu-168x300.png 168w, https:\/\/zeni.cz\/app\/uploads\/2022\/02\/WordPress-administration-custom-menu-300x535.png 300w\" sizes=\"auto, (max-width: 465px) 100vw, 465px\" \/><figcaption class=\"wp-element-caption\">WordPress administration custom menu<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">In order not to deceive you, I actually wrote one JavaScript code. The Divi template used on this website blocked the mobile access. Therefore, we had to write JavaScript that will bypass their JavaScript. The menu actually works best if you turn off JavaScript on the entire website, however, the rest of the website will refuse to work properly then.<\/p>\n\n<\/div>\n\n<div class=\"gb-container gb-container-059e5569\">\n\n<h2 class=\"wp-block-heading\">How The Custom Menu Was Created<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">To create the menu, I used a&nbsp;<strong>combination of the<\/strong>&nbsp;<code>&lt;label&gt;<\/code>&nbsp;<strong>element<\/strong>&nbsp;and checkbox inputs. Thanks to their naming, these two elements can be<strong>&nbsp;linked<\/strong>, even if they are placed on different places on the page. Even better, it works the same way for multiple<code>&nbsp;&lt;label&gt;<\/code>&nbsp;elements linked to a single input. Thus, I achieved an opportunity to switch between a submenu and a main menu in the mobile version.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">To fit all this information into a standard WordPress menu, I needed to write my&nbsp;<strong>own MenuWalker<\/strong>. That is a&nbsp;class&nbsp;that you assign to your menu and the individual parts of the menu are then listed accordingly. In the&nbsp;class,&nbsp;we can then modify its functions and add some custom items to the menu.<\/p>\n\n<\/div>\n\n<div class=\"gb-container gb-container-c3af0d49\">\n\n<h3 class=\"wp-block-heading\"><strong><strong>Use Of The WordPress Plugin<\/strong><\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">The last technology that I used for this project was the&nbsp;<a target=\"_blank\" href=\"https:\/\/www.advancedcustomfields.com\/\" rel=\"noreferrer noopener nofollow\">Advance Custom Fields<\/a>&nbsp;(ACF)&nbsp;<strong>WordPress plugin<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">I still enjoy the possibility to add custom items to different WordPress administration parts. However, I ran into a small problem.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">ACF&nbsp;<strong>cannot define<\/strong>&nbsp;at which menu level you want to add new editable items.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">So,&nbsp;I created a code that&nbsp;detects the level in which the menu is currently at, and then enables or disables ACF items.&nbsp;This way, it is easier&nbsp;for the administrator to&nbsp;make certain adjustments,&nbsp;working only with specific items that they are supposed to set at the moment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:16px\">If you are also interested in a&nbsp;<strong>custom solution,&nbsp;<\/strong>or you need to&nbsp;<strong>speed up<\/strong>&nbsp;your website or an&nbsp;<strong>advice<\/strong>,&nbsp;<a href=\"https:\/\/zeni.cz\/en\/contact\/\">contact us<\/a>,&nbsp;we are here for you.<\/p>\n\n<\/div>","protected":false},"excerpt":{"rendered":"<p>We have recently created an interesting solution for our client Engeto &#8211; a custom menu without the use of JavaScript. This way, we did not slow down the performance of their website. In today&#8217;s article, you can read about how we worked on the menu and about the benefits of a menu without JavaScript.<\/p>\n","protected":false},"author":29,"featured_media":9423,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[311,310],"tags":[],"class_list":["post-9422","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-study","category-web-optimization","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"author_meta":{"display_name":"rjurinek","author_link":"https:\/\/zeni.cz\/en\/blog-o-wordpress-woocommerce\/author\/rjurinek\/"},"featured_img":"https:\/\/zeni.cz\/app\/uploads\/2023\/02\/Custom-Menu-For-Engeto-Without-The-Use-Of-JavaScript-300x200.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/zeni.cz\/en\/blog-o-wordpress-woocommerce\/.\/case-study\/\" class=\"advgb-post-tax-term\">Case Study<\/a>","<a href=\"https:\/\/zeni.cz\/en\/blog-o-wordpress-woocommerce\/.\/web-optimization\/\" class=\"advgb-post-tax-term\">Web Optimization<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Case Study<\/span>","<span class=\"advgb-post-tax-term\">Web Optimization<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 4 years ago","modified":"Updated 2 years ago"},"absolute_dates":{"created":"Posted on 28.2.2022","modified":"Updated on 10.7.2024"},"absolute_dates_time":{"created":"Posted on 28.2.2022 15:45","modified":"Updated on 10.7.2024 10:56"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/posts\/9422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/comments?post=9422"}],"version-history":[{"count":3,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/posts\/9422\/revisions"}],"predecessor-version":[{"id":12412,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/posts\/9422\/revisions\/12412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/media\/9423"}],"wp:attachment":[{"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/media?parent=9422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/categories?post=9422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/tags?post=9422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}