{"id":15226,"date":"2020-10-30T15:00:39","date_gmt":"2020-10-30T14:00:39","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=15226"},"modified":"2020-10-29T15:06:36","modified_gmt":"2020-10-29T14:06:36","slug":"web-design-hidden-menus","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/web-design-hidden-menus\/","title":{"rendered":"17 Exciting Examples of Hidden Menus in Web Design"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]The use of hidden menus in web design has been an upward trend for several years, largely due to smartphones becoming such a huge thing. The widespread use of mobile phones led designers to come up with a solution that would allow them to place multiple menu items or options in one place without sacrificing a website\u2019s usability. And so, they created hidden menus.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Hiding website navigation from immediate view is now commonplace. Contemporary websites need to look spotless on all devices, so the extensive use of pop-up menus seems like a logical choice. A hidden menu doesn\u2019t bother visitors, but it\u2019s there when they need it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The main navigation is shown to the user upon some sort of action. And the most common action used to reveal hidden navigations is clicking on an icon, which usually comes in the shape of three horizontal lines placed on top of each other. Arranged like that, they resemble a hamburger, hence why they\u2019re also called hamburger icons. Of course, the way a menu icon looks can vary, mostly depending on a website\u2019s aesthetic. You\u2019ll come across semicircles, three dots, arrows, and combinations of various shapes and letters.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Hidden menus are almost exclusively placed in one of the upper corners of the screen. They\u2019re prominent enough for people to spot them, but they don\u2019t overshadow other elements on a page, ensuring users stay focused on the main interface the entire time. <strong>Due to their unobtrusive appearance, hidden menus don\u2019t clutter websites and leave a lot of room for content. Because of that, they\u2019ve become somewhat of a designers\u2019 staple at this point.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The following examples demonstrate how sleek and subtle hidden menus are, and how much creative freedom they give to designers:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column]<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=\"#collage\">Collage<\/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=\"#canals\">Canals<\/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=\"#globekit\">GlobeKit<\/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=\"#katchme\">KatchMe<\/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=\"#helias-oils\">Helias Oils<\/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=\"#extra-lagence\">Extra l\u2019Agence<\/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=\"#decade\">Decade<\/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=\"#blab\">Blab<\/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=\"#daniele-buffa\">Daniele Buffa<\/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=\"#alan-menken\">Alan Menken<\/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=\"#ultima-capital\">Ultima Capital<\/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=\"#katifoner-design\">Katifoner Design<\/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=\"#maud\">Maud<\/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=\"#cobo\">Cobo<\/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=\"#harvard-film-archive\">Harvard Film Archive<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[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=\"collage\"><\/a>Collage<\/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\/Video-01.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/collagecrafting.com\/en\" target=\"_blank\" rel=\"noopener noreferrer\">Collage<\/a> is a Canadian studio that makes a wide range of hand-crafted objects. Their website oozes brutalism, with all the bold lettering, cool micro-interactions, and interesting text arrangements. <strong>The menu icon is elegantly shaped as four horizontal lines of different lengths arranged one on top of the other. It is placed in the top left corner of the page, but still easy to notice because of the striking contrast between the dark background and brightly-colored elements, as well as the smart use of white space.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The menu icon is easily noticeable. On hover, its color changes from salmon pink to white, and all its lines become equally long. Once you click on the icon, the <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-fullscreen-navigation-menus\/\">fullscreen menu<\/a> appears, all in white and pastel hues, with black typefaces.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Menu items are on the left-hand side, with primary links written in a larger font. When you place the cursor on a primary link, the letters become underlined. On their right, a tiny number shows up indicating how many elements are featured in the selected section. Secondary links look more subdued. Their color goes from black to light grey on hover. A picture of some of the Collage\u2019s products takes up the large portion of the menu screen but is separated from the links by a decent amount of negative space. The products belong to their S019 collection, hence why they\u2019ve displayed a link to that year\u2019s lookbook over the image. The tiny section on the far right includes the link to the homepage and the online store.<br \/>\n[\/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=\"canals\"><\/a>Canals<\/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\/Video-02.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/canals-amsterdam.nl\/\" target=\"_blank\" rel=\"noopener noreferrer\">Canals<\/a> is a great project that introduces users to the history of Amsterdam\u2019s canals. This website comes with horizontal navigation, which gives it an editorial feel. You can either drag or scroll through sections with your mouse, discovering interesting facts about Amsterdam&#8217;s canal ring. Every story is backed up by exciting imagery, transporting you to the river banks and canal bridges.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The hamburger button is in the top left corner. <strong>Its three parallel lines look demure until you click on them. The menu icon goes from three lines to one, and a burning-red menu takes up the entire screen<\/strong>. There are only four menu items to explore, which gave the site\u2019s designers a large canvas to make use of. So, they decided to present the menu links in massive, bold letters. <strong>All of the menu elements are black, but on hover, the number placed next to every link turns white while the letters become strikethrough with a white line<\/strong>. To close the menu, you can either click on the large \u201cX\u201d button at the top right corner or tap the menu icon again. The \u201cAbout &amp; Sources\u201d section is also included in the bottom right corner of the menu. If selected, it will take you straight to the page where you can discover the names of the people included in the making of this site as well as the content they used to make it all happen.[\/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=\"globekit\"><\/a>GlobeKit<\/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\/Video-03.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/globekit.co\/\" target=\"_blank\" rel=\"noopener noreferrer\">GlobeKit<\/a> is an animated interactive 3D globe that can be used in various types of projects, and its characteristics have been beautifully showcased on this one-page website. The transition from one section to the next is marked with a wavy effect that changes its color the moment you reach a new section. <strong>The hamburger icon is in the top right corner with \u201cMenu\u201d written right next to it, so there\u2019s no doubt this is where you\u2019ll find the main navigation<\/strong>. When you click on it, a futuristic-looking overlay menu loads. The company\u2019s contact details are displayed on the left side of the menu, with the company inviting users to reach out to them to request a quote for their project. At the bottom left, you\u2019ll find links for the newsletter subscription and social networks. <strong>The larger portion of the menu is taken up by six different versions of a globe, each representing one section of the website<\/strong>. On hover, the globes become slightly bigger, the names of pages go from white to black, while the background behind them changes its color.[\/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=\"katchme\"><\/a>KatchMe<\/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\/Video-04.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/katchme.fr\/\" target=\"_blank\" rel=\"noopener noreferrer\">KatchMe<\/a> is a recruitment agency with a colorful website that includes terrific transition effects, a video background, parallax effect, and a myriad of fun animated elements. The main navigation is hidden behind \u201cMenu\u201d in the top right corner of the page. The word \u201cMenu\u201d is surrounded by a thin white circular shape that becomes larger when you place your cursor on it. On click, the baby blue fullscreen menu appears. <strong>At first glance, it\u2019s very minimalistic, with menu items placed horizontally, one next to the other, in the middle of the page. In the background, several concentric circles follow the movement of the mouse pointer, while other, smaller circles float all over the menu screen<\/strong>. When you place your cursor on any link, an image appears behind it while all other menu items lose their color and become see-through. The images are round for the most part, save for occasional intentional glitches that transform them into squares for a tiny fraction of time.[\/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\/Video-05.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <a href=\"https:\/\/heycusp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Cusp<\/a> website is minimal, but it comes with a compendium of interactive elements and striking animation effects that make the browsing experience all the more enjoyable and fun. The colors on the homepage are subtle, with images in beige, green, and soft black hues, while typography comes in prominent red. Once you click on the menu button in the top right corner of the screen, the web scenery changes. A black canvas drops from the top to the bottom of the page and all the colors disappear. All you see is the dark backdrop, menu items written in huge, all-caps, serif white letters, and several subtle favicons. But, that\u2019s not all there is to Cusp\u2019s main navigation. <strong>Since it features only four items (each link is marked by appropriate Roman numerals), the site\u2019s designers have made things all the more interesting by adding the infinite scroll effect to the menu<\/strong>. The cursor is shaped like a large outlined red circle that becomes significantly smaller when placed on any clickable screen element. When you hover with it over menu items, an outlined white circular shape encircles the Roman numerals. You\u2019ll find links to the Cusp\u2019s social networks in the top left corner of the page, while the icon that takes you straight to their gallery is placed at the bottom left. To exit the menu, click the \u201cClose\u201d button in the top right corner.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-creative-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=\"helias-oils\"><\/a>Helias Oils<\/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\/Video-06.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/heliasoils.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Helias Oils<\/a> make natural oils and homeopathic remedies. Their website is a colorful web oasis adorned with a liquid scroll effect that imitates the movement of oil. <strong>As for the navigation, you can either click on the menu icon or explore the most important pages that are highlighted at the top of the page. The hamburger menu is more convenient for mobile users, whereas desktop users can choose the option they find more convenient<\/strong>. The menu icon opens a content-rich overlay menu. The four primary links are highlighted using big, black, bold letters. When you place the pointer on one of them, the color of the other primary links fades and turns light grey. Secondary links are separated by a decent amount of whitespace and are written using a smaller-sized font. Social media icons and contact details are vertically positioned in the middle of the page, while<strong> the right side of the menu features the latest posts from Helias\u2019 Instagram feed<\/strong>. The images include the undulating scroll effect. When you click on any of them, you will be redirected to the brand\u2019s Instagram page.[\/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=\"extra-lagence\"><\/a>Extra l\u2019Agence<\/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\/Video-07.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.extralagence.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Extra l\u2019Agence<\/a> comes with a black-and-white website that looks very artistic because of the background that resembles a sheet of drawing paper and the use of elegant and handwritten typefaces. The main navigation is hidden behind a simple lowercase \u201cmenu\u201d link, but you can\u2019t possibly miss it as there\u2019s nothing else in the top bar save from the agency\u2019s name at the far right. <strong>While the site\u2019s backdrop is white, once you open the menu, its color goes to black and the texture becomes grainy<\/strong>. The menu is very simple and features four items in white letters. When you place your mouse on any of the four, the font loses some of its weight and turns from bold to slim. <strong>The cool thing about the menu is that every time you open it, the items will be arranged in a different manner.<\/strong>[\/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=\"decade\"><\/a>Decade<\/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\/Video-08.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/decadenewyork.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Decade<\/a> is a branding and creative studio from New York. Their website is peppered with attractive videos and imagery illustrating the projects developed by the company. At the top of the page, there\u2019s a white section with the studio\u2019s name written in the middle and <strong>the menu icon in the shape of a black semicircle. The choice of menu icon is a bit uncommon and interesting. However, all users have some preconceptions about where navigation will be located on a site, so they already expect to find the main navigation icon somewhere at the top<\/strong>. When you click on the semicircle, a fullscreen menu unrolls from the top of the page. You can learn more about the studio by exploring the \u201cAbout\u201d section on the left-hand side of the menu. To control the amount of displayed information, use \u201cRead More\u201d and \u201cRead Less\u201d links. The right side of the menu introduces you to Decade\u2019s \u201cClients\u201d and \u201cSelected Projects\u201d. To exit the menu altogether, you can either click on the semicircle again or on \u201cDecade\u201d.[\/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=\"blab\"><\/a>Blab<\/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\/Video-09.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/blab.studio\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blab<\/a> is an Italian communications agency with a website that\u2019s filled with entertaining animation effects. <strong>The menu is positioned right above the agency\u2019s name in the form of the three big dots. Again, this isn\u2019t a common choice for a menu icon, but it\u2019s easy to guess what the dots \u201chide\u201d. When you place the pointer on them, they transform into a hamburger button and take you to the site\u2019s main navigation.<\/strong> The pink-colored menu features red typefaces and irregular, blue pulsating shapes that enliven the menu. The name of the company is subtly incorporated into the background using a soft shade of pink. The links are organized into two sections, with primary items in bold letters on the left and secondary items in italic on the right. The contact link and social media icons are featured at the bottom of the page.[\/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=\"daniele-buffa\"><\/a>Daniele Buffa<\/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\/Video-10.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The portfolio website of <a href=\"https:\/\/danielebuffa.me\/\" target=\"_blank\" rel=\"noopener noreferrer\">Daniele Buffa<\/a> is bursting with exciting animations and microinteractions that make the browsing experience smooth and enjoyable. You can reveal the hidden menu by clicking the word \u201cList\u201d in the top right corner of the site. When you place your mouse on it, it becomes strikethrough. <strong>The menu items load as if they\u2019re on a spinning wheel. They stop moving the moment you access the menu. The website makers have used the infinite scroll effect here, so you feel like there\u2019s much more to explore than the five selected works<\/strong>. The links are written using black typefaces, but when you start scrolling, the top and the bottom part of each letter turn to red. The faster you scroll, the more a letter becomes red. On hover, you can see the image preview of the selected project while the names of other projects become invisible. The far-right side of the menu is where the website\u2019s sections from 01 to 04 are vertically displayed. When you put the cursor on them, you\u2019ll see what each section is called so you can jump straight to any of them.[\/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=\"alan-menken\"><\/a>Alan Menken<\/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\/Video-11.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.alanmenken.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Alan Menken<\/a> is a legendary composer and songwriter with a website that introduces the audience to his impressive oeuvre. Considering his profession, the use of several piano-inspired elements on his site comes as no surprise. First and foremost, the way his works are presented on the homepage resembles piano keys. On hover, each key springs to life and turns into a preview video of Alan\u2019s projects. <strong>The three-lined menu button also looks more like piano keys than a hamburger because the bars are vertically placed<\/strong>. When you click on them, the dropdown menu appears, but it doesn\u2019t take up the entire screen. Instead, the homepage is still visible and you can simply click on it to close the menu. The menu is very simple, and includes just several categories, without any audio or visual ornaments. However, <strong>the playfulness of Alan\u2019s songs is beautifully translated in typography and the way the navigation links are written in an animated Disney-esque style.<\/strong>[\/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=\"ultima-capital\"><\/a>Ultima Capital<\/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\/Video-12.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.ultimacapital.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ultima Capital<\/a>\u2019s website comes with <strong>a menu hidden behind two parallel horizontal lines of different weights. The moment you put your pointer on them, they merge into one line. The fullscreen menu is in grid and it looks like a chart where each of the 8 fields contains one menu item<\/strong>. Everything looks clean and minimal, in black and white, so it\u2019s easy for users to find the section they\u2019d like to explore. On hover, the fields become dark beige (the field where the homepage link is placed is always colored in that hue) and that is the only touch of color in 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=\"katifoner-design\"><\/a>Katifoner Design<\/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\/Video-13.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/katiforner.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Katifoner Design<\/a>\u2019s website looks very modern and simple, with <a href=\"https:\/\/qodeinteractive.com\/magazine\/large-typography-web-design\/\">large typography<\/a> and attractive imagery that capture the visitor\u2019s attention. The main navigation is, even though hidden, easily noticeable and well separated from other elements by a large chunk of negative space. When you put your mouse over \u201cMenu\u201d, the letters take a zigzag form. The overlay menu includes just three links elegantly positioned in the middle of the page. The fonts are huge. Next to every menu item, there is a two-word description of what that section is about. And that\u2019s not all. <strong>When you hover over any link, a fullscreen background image appears illustrating the selected section while the remaining two items become see-through.<\/strong>[\/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\/Video-14.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 all about minimalism. The pages are not cluttered with too much content, save for a few images and witty copy. <strong>The menu icon stays in the top right corner at all times so you can access the navigation whenever you want<\/strong>. The menu is splayed across the whole screen and is divided into two sections &#8211; \u201cOur Work\u201d and \u201cAbout Us\u201d. Secondary menu items are written in a smaller font size and displayed at the bottom of the page, but still easily noticeable. On hover, the color of all menu links changes from black to light grey.[\/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=\"maud\"><\/a>Maud<\/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\/Video-15.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.maud.com.au\/\" target=\"_blank\" rel=\"noopener noreferrer\">Maud<\/a>\u2019s website features fullscreen showcases of their projects, both imagery and videos.<strong> The menu is hidden behind a small circle at the top right corner of the screen<\/strong>. The word \u201cMenu\u201d is displayed right next to it, so you will easily spot it. When you click on the icon, the menu loads from the bottom to the top of the page. As soon as it pops up, the whole screen gets split into four equal horizontal parts. The homepage is visible in the top one. The menu items are placed in the remaining three sections along with snippets from every page included in the navigation. This kind of a menu isn\u2019t something you see every day and it speaks volumes about the creativity of Maud\u2019s team. You can explore each one either by clicking on or by scrolling over the item of your interest.[\/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=\"cobo\"><\/a>Cobo<\/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\/Video-16.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.cobosrl.co\/\" target=\"_blank\" rel=\"noopener noreferrer\">Cobo<\/a> is a world-renowned brand known for plastic injection molding. Their website looks very modern, with a black background, interesting typography choices, and great animation effects. <strong>The menu is hidden behind the hamburger button which is surrounded by a thin-lined circle. When you place your cursor over it, the circle becomes bouncy and starts following the movement of your cursor<\/strong>. When you click on the menu icon, a side menu appears on the right. It looks clean and sleek, ensuring an easy navigation experience for users. The four primary links take up the better part of the menu and are highlighted using bold and large typefaces. On hover, a short description pops up next to every menu item telling you what each section is about.[\/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=\"harvard-film-archive\"><\/a>Harvard Film Archive<\/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\/Video-17.mp4\" \/>\n\t<\/video>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <a href=\"https:\/\/harvardfilmarchive.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Harvard Film Archive<\/a> website is imbued with numerous details that create an enthralling cinematic atmosphere. The grainy background resembles a 35mm film stock. While you wait for the content to load, the old movie countdown appears over the entire screen. <strong>The navigation is safely tucked behind the hamburger icon in the top left corner. On click, the side menu appears, featuring a handy search option<\/strong>. The main menu items are displayed at the very top, in sans-serif, elegant lettering. The links to HFA\u2019s social channels are placed at the bottom of the menu. Navigation is simple and well-organized, so you can effortlessly find what you\u2019re interested in.[\/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]Website navigation is, unquestionably, one of the key elements of web design. As such, it needs to be organized in a clear and logical way so that users can easily engage with your website. However, that doesn\u2019t necessarily mean you have to display menu items in an obvious way somewhere on the main page. As the examples in our roundup illustrate, you can hide your menu from plain sight and have it appear only when visitors interact with your menu icon. <strong>Using a hidden menu on your site is a refined and simple solution that enables you to prioritize content and keep users focused on what you have to say and show.<\/strong>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Due to their unobtrusive appearance, hidden menus don\u2019t clutter websites and leave a lot of room for content. They are subtle and practical, giving designers a lot of creative freedom, as the examples featured in this roundup illustrate<\/p>\n","protected":false},"author":4,"featured_media":15263,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,40,43,37,36],"class_list":["post-15226","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-inspiration","tag-showcase","tag-ui","tag-ux"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/15226","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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=15226"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/15226\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/15263"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=15226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=15226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=15226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}