{"id":14012,"date":"2020-10-09T15:00:52","date_gmt":"2020-10-09T13:00:52","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=14012"},"modified":"2022-05-13T11:58:19","modified_gmt":"2022-05-13T09:58:19","slug":"examples-of-fullscreen-navigation-menus","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/examples-of-fullscreen-navigation-menus\/","title":{"rendered":"34 Impressive Examples of Fullscreen Navigation Menus"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Navigation is one of the most important elements of a website because it guides users to the content they are interested in. Considering its importance, we could even call it the backbone of a site. When you organize and design it well, it will ensure excellent website usability and a smooth navigation experience for your users. And at the end of the day, that is exactly what you need. If people can\u2019t find what they want in a matter of seconds, the way your website looks won\u2019t matter much. They\u2019ll be gone in a blink of an eye. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We all have preconceptions about user experience as well as some expectations from it. The moment we visit a website, we instantly presume where the menu may be placed and what its icon could look like. But as designers, we always need to be mindful of our users. While striking animations and cool micro-interactions can give a navigation its character, it primarily needs to be intuitive and logical. It should always tread the line between familiar and creative, regardless of how experimental we want to make it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Since fullscreen navigations are initially hidden, it may seem that they don&#8217;t exactly stick to these guidelines. But there&#8217;s a reason why they&#8217;ve become dominant on the web in recent years. They allow for experimentation without jeopardizing a website\u2019s functionality or confusing the user. And since they are accessed through a single icon, there\u2019s a lot of room for other page elements. Users can access such menus anytime, no matter which section of a site they may be browsing. They can also see the entire menu structure splayed over the whole screen and easily reach the section that interests them. Everything looks simple, effective, logical, and is easy to use. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we will introduce you to the power of a fullscreen navigation menu and share with you some beautiful examples from the web:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#canals-amsterdam\">Canals Amsterdam<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#oui-will\">Oui Will<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#wannabe\">Wannabe<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#badass\">Badass<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#culture-manual\">Culture Manual<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#ussr-design-almanac\">USSR Design Almanac<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#mixlegno-group\">Mixlegno Group<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#cusp\">Cusp<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#pol-studio\">Pol Studio<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#ashley-co\">Ashley &amp; Co<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#klim-type-foundry\">Klim Type Foundry<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#mathieu-l\u00e9vesque\">Mathieu L\u00e9vesque<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#everyday-needs\">Everyday Needs<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#fpp\">FPP<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#violence-conjugale\">Violence Conjugale<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#square\">Square<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#zipeng-zhu\">Zipeng Zhu<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#furrow-studio\">Furrow Studio<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#dogstudio\">Dogstudio<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#mirage-festival\">Mirage Festival<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#bounds-studio\">Bounds Studio<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#the-artery\">The Artery<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#a-is-for-albert\">A Is for Albert<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#color-of-the-year\">Color of the Year<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#prior-holdings\">Prior Holdings<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#animal\">Animal<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#carl-nielsen-international-competition\">Carl Nielsen International Competition<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#brandstudio\">BrandStudio<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#teatr-lalka\">Teatr Lalka<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#stedelijk-museum-amsterdam\">Stedelijk Museum Amsterdam<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#basic\">Basic<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#barkli-gallery\">Barkli Gallery<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#oto-nove-swiss\">Oto Nove Swiss<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#bruno-simon\">Bruno Simon<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Fullscreen-Navigation-Menus.jpg\" class=\"attachment-full size-full\" alt=\"Fullscreen Navigation Menus\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Fullscreen-Navigation-Menus.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Fullscreen-Navigation-Menus-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Fullscreen-Navigation-Menus-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Before we start with examples, let\u2019s see what elements are paramount for a good fullscreen menu.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Key Elements of a Good Fullscreen Menu Navigation<\/h2>\n<p>[\/vc_column_text][vc_column_text]To make your fullscreen menu work like a charm, there are several things you need to ensure. [\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Simplicity<\/h3>\n<p>[\/vc_column_text][vc_column_text]Navigation mustn\u2019t be complicated. <strong>Every site, without exception, should come with the simplest possible navigation structure to ensure users can get around the content with ease<\/strong>. Your navigation should reflect your website and contain only those pages that are absolutely necessary.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Clarity<\/h3>\n<p>[\/vc_column_text][vc_column_text]<strong>The structure of a fullscreen navigation menu needs to be clear, without any additional explanations needed<\/strong>. Users must know at all times how to get from point A to point B.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">User Orientation<\/h3>\n<p>[\/vc_column_text][vc_column_text]<strong>Users always need to know where they are and how to navigate back to the pages they\u2019ve previously browsed. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Consistency<\/h3>\n<p>[\/vc_column_text][vc_column_text]<strong>A good menu navigation system needs to look the same on all pages, with no exceptions. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now that you\u2019re familiar with the key characteristics of a great fullscreen menu, let\u2019s explore the websites that have perfected the fullscreen navigation. [\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;fullscreen-menu-themes&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"canals-amsterdam\"><\/a>Canals Amsterdam<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Canals-Amsterdam.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Huge fonts and great microinteractions are a pairing we\u2019ll often see on this list, but both are very prominent on the <a href=\"https:\/\/canals-amsterdam.nl\/\" target=\"_blank\" rel=\"noopener noreferrer\">Canals Amsterdam<\/a>\u2019s website. <strong>The entire project is about contrasting colors and sizes, and the same principle is obvious in the fullscreen menu, too<\/strong>. The menu background is in fiery red while the letters are black. The name of the page you\u2019re currently browsing becomes strikethrough, and as you hover over other menu items, the color of the numbers placed next to their name turns from black to white. The menu is animated in a beautiful, subtle way (just like the rest of the website), and exploring it surely is an enjoyable experience.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"oui-will\"><\/a>Oui Will<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Oui-will.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/disrupt.ouiwill.com\" target=\"_blank\" rel=\"noopener noreferrer\">Oui Will<\/a> is a digital agency that opted for a fullscreen menu on their \u201cDisrupt\u201d project. They created a great, unusual menu that reflects their creativity. <strong>When you open it, the menu items appear written in simple, small letters on the left-hand side of the screen. As you hover over every item, its name also shows up on the right side in a much larger font, along with a mysterious 3D object<\/strong>. On the far right, there are also vertically-placed helpful links, such as <em>Close<\/em> (to close the menu), <em>Sound On\/Off<\/em> (to turn on or off the background music), and<em> Contact<\/em> (it enables users to reach out to the brand), which is always good to include in the menu. The shapes, animations, interactions, and the color palette used in the menu are the continuation of what you can see on the rest of the website, and this cohesive union guarantees a good user experience.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"wannabe\"><\/a>Wannabe<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Wannabe.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.wannabe.toys\/\" target=\"_blank\" rel=\"noopener noreferrer\">Wannabe<\/a>\u2019s website comes with two types of menus. One is the always-visible horizontal header menu, and the other one is a fullscreen menu that includes more <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-wordpress-menu-items-without-link\/\">menu items<\/a> than the classic counterpart. <strong>The distinction between primary and secondary links is highlighted in two ways. Firstly, the fonts used for the two are not the same size, and secondly, they\u2019re organized into two columns split by a vertical line and a huge \u201cX\u201d (Close) button placed at the center of the screen<\/strong>. So internal links that take you to various sections of the website are positioned on the left, while external links such as the brand\u2019s email address and social media accounts are on the right.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"badass\"><\/a>Badass<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Badass.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The entire <a href=\"https:\/\/www.badass35.com\/en\/home\" target=\"_blank\" rel=\"noopener noreferrer\">Badass<\/a> website looks fantastic and the fullscreen menu is not any different. The menu icon has the form of an illustrated eye that follows your cursor movement the entire time. It even blinks! The only time the eye is closed is when you open the menu. Huge, black letters and the contrasting yellow background are an attractive pairing that has been used throughout the whole site to capture the visitor\u2019s attention. <strong>On the left side of the fullscreen menu, there\u2019s a large logo of the brand. The links that help you navigate the website are centrally placed. On the right, you have the option to close the menu, choose a language, or visit the brand\u2019s social media channels<\/strong>. Badass has made sure to incorporate every element a photography and film services website should have into this online presentation.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"culture-manual\"><\/a>Culture Manual<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Culture-manual.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/culture.basicagency.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Culture Manual<\/a>\u2019s website is another example of a website with two menus. The top navigation menu is not sticky, but the fullscreen menu placed on the left side of the screen is. This means you can access whatever section of the site you want at all times. Both menus come with short textual explanations telling you what each page of the website is about. <strong>The fullscreen menu is designed and animated in a lovely way. It\u2019s very easy to understand thanks to the pictograms placed next to the name of each item menu<\/strong>. The letters are outlined, but as you hover over them, they gain color and become black.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"ussr-design-almanac\"><\/a>USSR Design Almanac<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Ussr-design.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <a href=\"http:\/\/ussr.obys.agency\/\" target=\"_blank\" rel=\"noopener noreferrer\">USSR Design Almanac<\/a> website comes with a <strong>fullscreen menu that contains only numbers representing decades from the 20s to 90s<\/strong>. But, since this project is all about celebrating USSR design from 1922 to 1991, this kind of a menu makes perfect sense. The decades are listed chronologically and the sections dedicated to each decade are placed in a one-page layout. This website looks very striking, vividly depicting the atmosphere of those years. The designers have achieved that by combining the elements of pop-art and brutalism with beautiful animation effects making the site look like a collage.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"mixlegno-group\"><\/a>Mixlegno Group<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Mixlegno.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.mixlegno.com\/en\/home\" target=\"_blank\" rel=\"noopener noreferrer\">Mixlegno Group<\/a>\u2019s website is a great example that demonstrates how <strong>different font sizes help distinguish primary menu items from the secondary ones<\/strong>. While this is something you\u2019ve probably noticed on other websites from the list as well, that distinction is the most obvious on Mixlegno\u2019s site. Because of that, it\u2019s easier for users to navigate the website. <strong>The overlay menu looks rich, adorned with interesting graphic solutions that represent each menu item<\/strong>. The whole site is wonderfully animated, with great transition effects and microinteractions. There\u2019s even a background video depicting how they make products at Mixlegno. Everything is minimal, clean, easy to use, and perfectly in sync with the company\u2019s values.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"cusp\"><\/a>Cusp<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Cusp.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/heycusp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Cusp<\/a>\u2019s website is stunningly animated and the wave effect that\u2019s applied to images when you hover on them is particularly prominent. <strong>The site implements an infinite scroll, making your browsing adventure seem never-ending. The same effect is visible in the fullscreen menu, too, even though there are only four links in it<\/strong>. Next to each link you\u2019ll notice Roman numerals (I, II, III, and IV). And while you scroll, the same four numerals show up on the screen over and over again, further indicating that the menu items appear on loop. At the bottom left corner of the menu, there\u2019s an icon that, when clicked, redirects you to the brand\u2019s image gallery. You can explore it by using the infinite scroll or with the drag of your mouse. The infinite scroll effect is dominant on the whole site, and because of it, everything looks soft, fluid, and very pleasing on the eye.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"pol-studio\"><\/a>Pol Studio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Pol-studio.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Thanks to their size, <strong>fullscreen menus allow for experimentation with different elements, including pictures, videos, or anything else you wish to add to a menu. That way, you can make it look more striking, but without jeopardizing its usability<\/strong>. <a href=\"https:\/\/pol-studio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pol Studio<\/a>\u2019s website is a great example of that. Next to each link in the menu, there is a corresponding image. And thanks to the attractive imagery, this fullscreen menu doesn\u2019t look that different from any other page on the site. The menu consists of five links, and the page that you\u2019re currently browsing is marked with a big black circle on the left side of the menu item. The menu looks clear, minimal, and in line with the vibe of the entire website.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"ashley-co\"><\/a>Ashley &amp; Co<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Ashley-co.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/ashleyandco.co\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ashley &amp; Co<\/a> is a minimal online shop filled with alluring imagery that suits the tone of the brand. <strong>Their fullscreen menu has two layers<\/strong>. The first one contains a list of all the pages of the site. And when you select any page, a second layer appears introducing you to the sections that page includes. For example, if you choose <em>Products<\/em>, numerous product categories will appear. And not only that. As you move from <em>Wash<\/em>, <em>Body<\/em>, and <em>Hair<\/em> to <em>Accessories<\/em> and <em>Kits<\/em>, images that correspond to each category change on the right side of the screen. Another interesting menu item is <em>Scents<\/em>. <strong>Here, the designers have used not only imagery that reminds you of some smells, but the background menu color also changes as you move from one scene to the next<\/strong>. The whole website, including the menu, is made using a pastel color palette.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"klim-type-foundry\"><\/a>Klim Type Foundry<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Kilim-Type-Foundry.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019re thinking of including a lot of links in your fullscreen menu, that\u2019s perfectly fine. The <a href=\"https:\/\/klim.co.nz\/\" target=\"_blank\" rel=\"noopener noreferrer\">Klym Type Foundry<\/a> <strong>overlay menu features numerous links, but it doesn\u2019t look overcrowded at all<\/strong>. The designers have, once again, played with the typeface sizes, which allowed them to separate the primary links from the secondary ones. The four main links are on the left, written in <a href=\"https:\/\/qodeinteractive.com\/magazine\/large-typography-web-design\/\">large typography<\/a>. As you hover over them, the background images that match the atmosphere of each link change. On the right, there\u2019s a collection of secondary links divided into three categories. The font size is significantly smaller, so the links will not distract you, but they\u2019re still prominent enough for you not to miss them. This menu is very clear, easy to navigate, and its colors are unobtrusive, making it look very eye-pleasing.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"mathieu-l\u00e9vesque\"><\/a>Mathieu L\u00e9vesque<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Mathieu-Levesque.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/mathieulevesque.com\/en\" target=\"_blank\" rel=\"noopener noreferrer\">Mathieu L\u00e9vesque<\/a>\u2019s portfolio website is all about minimalism. The fullscreen menu features a list of all the projects Mathieu has worked on. Next to the name of each work, you can see a number indicating how many photographs the selected project features. <strong>On hover, an image or a video representing that work appears. It covers up the names of surrounding works, making you focus solely on the project at hand. The animation timing is spotless<\/strong>. While you move the mouse cursor over menu items, the time frame between one animation ending and the other one starting lets you easily choose the project you&#8217;d like to see, despite the accompanying images covering a large part of the menu. On the right from the menu items, there is a rotating black circle with Video Reel written on it. To see a video presentation of Mathieu\u2019s works, simply hover your pointer over the button. Some other internal and external links are placed on the far-right side of the screen, too, such as social network links, etc.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"everyday-needs\"><\/a>Everyday Needs<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Everyday-needs.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.everyday-needs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Everyday Needs<\/a> is an online shop that beautifully demonstrates how you can showcase your products within the fullscreen menu itself. This is something you\u2019re probably used to seeing within header or side navigation menus, but it looks even better within the overlay menu, as this site shows. <strong>When users hover over the listed menu items, they can see a preview image of what awaits inside without even opening the link<\/strong>. The Everyday Needs\u2019 menu features a wide variety of links organized into multiple categories. But you don\u2019t get overwhelmed by that amount because, again, the difference between primary and secondary links is very clear. The typefaces they\u2019ve used also look delicate and the colors are very subtle. <strong>The menu icon is particularly interesting<\/strong>. On the first slide, you don\u2019t even see it. However, as you begin to explore the page and scroll down, the name of the brand (written in the top left corner) morphs into three lines that symbolize the menu. And it\u2019s not very often we see the brand logo disappear in favor of a navigation favicon, which only further tells you how important a fullscreen menu is.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"fpp\"><\/a>FPP<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Fpp.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.fpp.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">FPP<\/a> is a shopper marketing agency with <strong>a stunning website that shows how animations and micro-interactions can turn a simple fullscreen menu into an impressive work of art<\/strong>. Everything about this website is very simple yet so effective. As you move your mouse pointer over menu items, the color of the letters changes from black to white and a wavy underline appears below the selected item name. Simultaneously, corresponding background images appear. They consist of rotating 3D elements that follow the movement of the user&#8217;s cursor.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"violence-conjugale\"><\/a>Violence Conjugale<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Violence-conjugale.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/itsnotviolent.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Violence Conjugale<\/a>\u2019s website is yet another example that shows how stellar animations and <a href=\"https:\/\/qodeinteractive.com\/magazine\/websites-with-inspiring-micro-interactions\/\">micro-interactions<\/a> can help deepen the connection between a brand and a user. <strong>This interactive project is all about introducing people to the most common forms of violence that happen in relationships<\/strong>. There are five \u201ctextversations\u201d you can engage in. They\u2019re showcased on the homepage in the form of clickable animated stickers or within the fullscreen menu, in textual form. The menu is simple, with a black background, and the names of each scenario are written in bright colors. <strong>On hover, parts of textversations start to float around the letters, giving you a preview of what awaits inside<\/strong>. This astounding project helps people not only realize what other people may be going through but also recognize the shapes of violence they might\u2019ve been enduring without even realizing it. After every textversation, you\u2019ll see links encouraging you to seek help if you need it.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"square\"><\/a>Square<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Square.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/square.geex-arts.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Square<\/a> is a platform where designers from all over the globe gather and exhibit their works. The whole website looks experimental, with interesting imagery, lots of flashy elements, and retro music playing in the background. <strong>The fullscreen menu is equally cool and quirky. It consists of designers\u2019 names written in outlined letters. On hover, they fill with color and begin to float from one side of the screen to the other in an unusual, slightly curved way<\/strong>. Next to the name of each designer, you can see their picture as well as an image from one of their projects (you can explore projects by clicking on the preview image). The way the names of designers appear on scroll makes you feel as if you\u2019re in some kind of a virtual cylinder that looks unlike anything you\u2019ve seen before and is very fun to explore.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"zipeng-zhu\"><\/a>Zipeng Zhu<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Zipeng-Zhu.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first thing we notice about <a href=\"http:\/\/zz-is.it\/\" target=\"_blank\" rel=\"noopener noreferrer\">Zipeng Zhu<\/a>\u2019s website are the bold colors and its idiosyncrasy. The website is rich in simple, all-caps typography, with a unique-looking fullscreen menu. <strong>The menu appears to be divided into 8 black and white columns, each representing one of Zhu\u2019s projects. On hover, the columns \u201ccome to life\u201d, with lots of flashy colors and animations ambushing the screen, inviting you to explore his works<\/strong>. When you click on any of them, you can start browsing the gallery. If you move your pointer to the left or the right side of the screen, the names of the previous and next project appear, respectively. This horizontal way of exploring Zhu\u2019s portfolio is a beautiful continuation of the fullscreen menu\u2019s horizontal logic. Together, the two create a lovely, cohesive website experience for users to enjoy.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-theme-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"furrow-studio\"><\/a>Furrow Studio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Furrow.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/furrow.studio\/\" target=\"_blank\" rel=\"noopener noreferrer\">Furrow Studio<\/a> is a video production studio with a <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-black-websites\/\">black website<\/a> that is very creative and fun. As you move your mouse over the dark backdrop, you slowly reveal a video displayed in the background. <strong>The fullscreen menu is vibrant red, with bold, black letters. But once you place your cursor on any of the listed works, the screen splits in two \u2013 a smaller portion of the screen on the left stays red while a video introducing you to that particular project takes up the rest of the screen<\/strong>. This site is wonderfully designed and it leaves a strong impression on all visitors.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"dogstudio\"><\/a>Dogstudio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Dogstudio.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/dogstudio.co\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dogstudio<\/a>\u2019s website features <strong>a fantastic 3D wolf in the background that is a constant on this site, even in the overlay menu. Depending on the position of the mouse pointer, the perspective from which you observe the wolf will slightly change<\/strong>. The color palette used on the site, the graphics, the bird song, and the eerie melody in the background together create the feeling of magical realism on the site that leaves no one indifferent. The entire website is aesthetically pleasing on the eye and quite striking, perfectly conveying the Dogstudio\u2019s vibe.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"mirage-festival\"><\/a>Mirage Festival<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Mirage-festival.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Every year, the <a href=\"https:\/\/www.miragefestival.com\/2020\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mirage Festival<\/a> launches a new website to introduce their program to the public. And each time, they come up with a site that exudes brutalism and minimalism. The 2020 edition is possibly the version where those two styles are the most obvious, which especially shows in the overlay menu. <strong>The menu comes with a white background and black letters, divided into multiple rows, with textual content in a loop. When you place your mouse over a row, the letters become colorful, while the row\u2019s hue turns to black<\/strong>. The way you move from one row to the next feels very rigid and sharp, which complements the overall brutalist vibe of the site. This kind of a menu gives us a glimpse into the creativity of the people behind the Mirage Festival. Each year, they manage to push the creative boundaries and introduce unique projects to the public.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"bounds-studio\"><\/a>Bounds Studio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Bounds.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The fullscreen menu on the <a href=\"https:\/\/bounds.agency\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bounds Studio<\/a>\u2019s website looks simple but effective. The colors are dark and perfectly complemented by spectral background music. <strong>The menu items are positioned horizontally and they subtly change their hue when you move your mouse over them. No matter the element you click on, the action is followed by a \u201cwoosh\u201d kind of sound that follows the switch from one section of the website to the next<\/strong>. The menu is clean, easy to navigate, practical, and also amusing thanks to the accompanying audio effects.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"the-artery\"><\/a>The Artery<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/The-artery.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.the-artery.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Artery<\/a>\u2019s website is a terrific example that shows us how a fullscreen menu and a grid layout can be a winning combination. <strong>This pairing can be seen throughout the whole site, but the menu section is particularly fun. The menu is split into 8 squares, each with a menu link inside and a 3D animation that appears on hover<\/strong>. In fact, the whole site is divided into squares, with rotating 3D objects that show up on scroll symbolizing the company\u2019s multidisciplinary work.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"a-is-for-albert\"><\/a>A Is for Albert<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/A-is-for-albert.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/www.aisforalbert.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">A Is for Albert<\/a> is an interactive alphabetical website that was developed as a side project by one dad. Every letter is showcased using comical and cute animations, accompanied by fun sound effects. <strong>The overlay menu consists of \u201cFull Video\u201d and \u201cAbout\u201d sections, along with the 26 letters of the alphabet, each placed in a separate box<\/strong>. Since the letters are so beautifully laid out, you can jump straight to the letter that interests you the most. <strong>On hover, a sliding animation appears, splitting a box into four triangles while the letter stays firmly placed in the middle<\/strong>. The site is bursting with colors and cute animation effects, and kids are guaranteed to love it.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"color-of-the-year\"><\/a>Color of the Year<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Color-of-the-year.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Each year, the website <a href=\"https:\/\/color-of-the-year.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Color of the Year<\/a> announces the most popular hue during the previous 12 months, and in 2019, that was the color \u201cLiving Coral\u201d. The fullscreen menu is designed using hues similar to the winning one, and the way it appears on the screen is particularly interesting. <strong>When you click on the menu icon, the menu starts to build up from the bottom left corner of the screen, with rectangles and square shapes slowly filling out the entire screen<\/strong>. Each menu item has its own designated box. The cursor is shaped like a small green dot, but when you move it over the menu items, it becomes bigger and acts as a magnifying glass enlarging the letters.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"prior-holdings\"><\/a>Prior Holdings<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Prior.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <a href=\"https:\/\/prior.co.jp\/discover\/en\" target=\"_blank\" rel=\"noopener noreferrer\">Prior Holdings<\/a> website comes with an interactive animation that suits the idea behind this brand, which is to connect hearts and minds. <strong>There\u2019s some sort of a virtual ribbon that travels through a starry universe, following the movement of the cursor, immersing users in this terrific online experience. The ribbon is present at all times, even when you open the overlay menu<\/strong>. The menu links are written using elegant, serif letters. When you place your mouse over a menu link, the other items become translucent while the selected one remains in full color. Browsing this website is a pleasant experience, made all the more enjoyable by the accompanying soft music.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"animal\"><\/a>Animal<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Animal.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/animal.cc\/\" target=\"_blank\" rel=\"noopener noreferrer\">Animal<\/a>\u2019s website is proof of how less is definitely more. It\u2019s fun from the get-go, with various words written across the screen that disperse as soon as you place your pointer over them. As you start to explore the site, you\u2019ll see some examples of their work and also meet the people behind this agency. <strong>The fullscreen menu is divided into two sections, each containing just one link \u2013 \u201cOur Work\u201d and \u201cAbout Us\u201d. At the bottom of the screen, there are also three secondary links written in significantly smaller letters<\/strong>. The menu looks clean and simple. But most importantly, it is highly functional.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"carl-nielsen-international-competition\"><\/a>Carl Nielsen International Competition<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Carl-Nielsen-competition.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Sound on a music website is what video on a video production company\u2019s site is. <a href=\"https:\/\/carlnielsencompetition.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Carl Nielsen International Competition<\/a> is a competition for the clarinet, violin, and flute, and the sounds of these instruments are imbued into this site. <strong>The fullscreen menu appears and disappears with an interesting audio-visual transition. The menu items are vertically placed, and the movement of your mouse over them is followed by pleasant clarinet sounds<\/strong>. The way the website makers have incorporated music into this site is smart, as the melodies give visitors a hint of what the whole thing is about (even if they have never heard about this competition).[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"brandstudio\"><\/a>BrandStudio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Brand-studio.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/brandstudio.ru\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">BrandStudio<\/a>\u2019s site is astounding and quite experimental-looking. You navigate through the site by clicking and dragging through remarkable illustrations while eccentric, circus-like music playing in the background. The cursor is shaped like an animated cut-off arm that makes grabby movements when you click on any element. <strong>The sounds and illustrations are implemented in the menu as well, except that the music is more silent compared to the rest of the site. On hover, menu items start to make xylophone-like noises<\/strong>. Our attention is fully drawn to the links displayed in the menu, but thanks to its interactivity and the authors\u2019 experimentation with interesting graphic and audio elements, this studio has managed to create a memorable website that showcases the creative genius of its team.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"teatr-lalka\"><\/a>Teatr Lalka<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Teatr-Lalka.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/teatrlalka.pl\/en\" target=\"_blank\" rel=\"noopener noreferrer\">Teatr Lalka<\/a> is Warsaw\u2019s oldest puppet theater. Their website is filled with different kinds of puppets that symbolize the plays this theater is famous for. The puppets move from one side of the screen to the next, and when you click on them, they make a noise and start moving for a few seconds until they return to their place. <strong>The primary links in the menu are accompanied by cute illustrations that are seemingly hung on a rope as if they were showcased in a real-life theater<\/strong>. The secondary menu links are tucked on the left side of the page, while the contact info, social network links, and a newsletter subscription form are all subtly displayed at the bottom of the menu.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"stedelijk-museum-amsterdam\"><\/a>Stedelijk Museum Amsterdam<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Stedelijk-museum.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <a href=\"https:\/\/www.stedelijk.nl\/en\" target=\"_blank\" rel=\"noopener noreferrer\">Stedelijk Museum Amsterdam<\/a> is a modern and contemporary arts museum with a website designed in an entirely brutalist fashion. The background is white while the letters are black, but once you click on the menu, the colors invert. <strong>The links are displayed on the far left, in all capital letters, but there are also details concerning the opening hours, ticket prices, contact information, a link that takes you to an online presentation of the museum\u2019s entire collection, and more<\/strong>. The latest exhibitions are listed as well, along with the corresponding photos. This menu contains all the useful information a visitor may need, displayed in an attractive and unusual way.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"basic\"><\/a>Basic<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Basic.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.basicagency.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Basic<\/a> is a branding and digital agency with a stellar website. It\u2019s essentially quite minimal, but stunning transitions and attention to detail make it stand out in the crowd. There is a header menu that includes all the important links that might be of use to visitors, while <strong>the fullscreen menu looks wilder and features the projects and initiatives the agency has been involved with. To explore the content, you need to drag the mouse, which is suggested by the word \u201cDrag\u201d written on the pointer<\/strong>. When you hover the mouse over any project, you can discover more details about it, as well as see a link that leads you to an in-depth presentation of the selected work.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"barkli-gallery\"><\/a>Barkli Gallery<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Barkli-gallery.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/barkligallery.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Barkli Gallery<\/a>\u2019s website looks very elegant and crisp, and the way the fullscreen menu is designed is not something you see every day. <strong>The section of the website you were exploring before you opened the menu minimizes and it\u2019s then displayed at the right side of the menu<\/strong>. Its slides continue to change as if you were still on the page. At the same time, the structure of the website is visible on the left, and you can immediately jump to any other page you wish by clicking on its link. This kind of a menu looks very refined and visually pleasing, and some other brands have incorporated it into their websites as well, including <a href=\"https:\/\/union.co\/\" target=\"_blank\" rel=\"noopener noreferrer\">Union<\/a> and <a href=\"http:\/\/www.citicon.gr\/\" target=\"_blank\" rel=\"noopener noreferrer\">Citicon<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"oto-nove-swiss\"><\/a>Oto Nove Swiss<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Oto-nove-swiss.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.otonoveswiss.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Oto Nove Swiss<\/a> is a website that doesn\u2019t contain the classic fullscreen menu, but it does come with something quite similar to it that\u2019s based on the same principles. <strong>The navigation looks as an integral part of the site and it feels as though the overlay menu is constantly there<\/strong>. On the right-hand side, you can see several vertical sections containing the name of a specific menu item. Upon clicking on them,<strong> the selected page opens, taking up the whole screen<\/strong>. This unusual kind of a menu is always there. It\u2019s easy to use, not to mention it makes the website all the more amusing and memorable. The same thing was done on the <a href=\"http:\/\/www.nouvelle-etiquette.fr\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nouvelle Etiquette<\/a> and <a href=\"https:\/\/offseasoncreative.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Off Season Creative<\/a> websites.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"bruno-simon\"><\/a>Bruno Simon<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-case-study-video-holder\" >\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Bruno-Simon.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/bruno-simon.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bruno Simon<\/a>\u2019s website looks nothing short of astounding. While there isn\u2019t a typical fullscreen menu anywhere in sight, Bruno proves how far you can go and how experimental you can be using the elements we normally see in overlay menus. <strong>This interactive project looks like a game that we can explore either by dragging the mouse around or, even better, by using arrow keys to move a cursor i.e. a car all over Bruno&#8217;s webestate<\/strong>. That way, we can learn more about this creative developer while simultaneously feeling like we\u2019re in the midst of a game.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Words<\/h2>\n<p>[\/vc_column_text][vc_column_text]When designing a fullscreen navigation menu, <strong>it\u2019s important to remember that, no matter how creative and unique your solution may be, ultimately what matters the most is for a user to easily find their way around it and effortlessly reach the section of your site that interests them<\/strong>. All the examples in our list illustrate how successful and striking the pairing of beauty and effectiveness can be. However, in order to achieve all that, you need to think well about how to organize the website\u2019s content and how many menu categories you\u2019re going to have. Logical thinking is a must, as in the end, you don\u2019t want to jeopardize a good user experience and drive people away by having a confusing website.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Fullscreen navigation menus are popular since they allow a lot of room for experimentation without jeoperdizing the site\u2019s functionality. The examples on our list demonstrate there are no limits as to how creative you can be when designing them<\/p>\n","protected":false},"author":262,"featured_media":14078,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,40,43,36],"class_list":["post-14012","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-inspiration","tag-showcase","tag-ux"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/14012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/262"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=14012"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/14012\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/14078"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=14012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=14012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=14012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}