CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1740133616473651578"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1740133616473651578"> <title> Fly-out Menus | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Fly-out Menus" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <meta property="og:description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <link rel="canonical" href="https://www.w3.org/WAI/tutorials/menus/flyout/" /> <meta property="og:url" content="https://www.w3.org/WAI/tutorials/menus/flyout/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:title" content="Fly-out Menus" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"description":"Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).","headline":"Fly-out Menus","url":"https://www.w3.org/WAI/tutorials/menus/flyout/"}</script>  <meta name="twitter:image" property="og:image" content="https://www.w3.org/WAI/assets/images/social-sharing-default.jpg"> <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-fly-out-menus "> <nav aria-label="Skip Link and Language Selector" id="controls" class="default-grid"> <ul> <li><a href="#main">Skip to Content</a></li> <li class="opt"> <a href="/WAI/meta/customize/">Change Text Size or Colors</a> </li> <li class="opt"> <a href="/WAI/translations/">All Translations <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> </ul></nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> Web Accessibility Initiative WAI </a> <div class="claim"> Strategies, standards, resources to make the Web accessible to people with disabilities </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> Search: <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search"> </label> <button class="button button-icon button-nobg button-noborder"><svg focusable="false" aria-label="Submit Search" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Main" lang="en"><ul><li><a lang="en" href="/WAI/fundamentals/">Accessibility Fundamentals</a></li><li><a lang="en" href="/WAI/planning/">Planning & Policies</a></li><li><a lang="en" href="/WAI/design-develop/">Design & Develop</a></li><li><a lang="en" href="/WAI/test-evaluate/">Test & Evaluate</a></li><li><a lang="en" href="/WAI/teach-advocate/">Teach & Advocate</a></li><li><a lang="en" href="/WAI/standards-guidelines/">Standards/Guidelines</a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="en" href="/WAI/design-develop/">Design & Develop</a></li><li><a lang="en" href="/WAI/tutorials/">Tutorials</a></li><li><a lang="en" href="/WAI/tutorials/menus/">Menus</a></li><li><a lang="en" href="/WAI/tutorials/menus/flyout/" aria-current="page">Fly-Out Menus</a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="en" href="/WAI/design-develop/" class="page-link">Design & Develop</a></li><li> <a lang="en" href="/WAI/tips/writing/" class="page-link">Tips for Writing</a></li><li> <a lang="en" href="/WAI/tips/designing/" class="page-link">Tips for Designing</a></li><li> <a lang="en" href="/WAI/tips/developing/" class="page-link">Tips for Developing</a></li><li> <a lang="en" href="/WAI/media/av/" class="page-link">Audio & Video Media</a><ul><li> <a lang="en" href="/WAI/media/av/users-orgs/" class="page-link">User Needs</a></li><li> <a lang="en" href="/WAI/media/av/planning/" class="page-link">Planning</a></li><li> <a lang="en" href="/WAI/media/av/av-content/" class="page-link">Audio Content & Video Content</a></li><li> <a lang="en" href="/WAI/media/av/description/" class="page-link">Description</a></li><li> <a lang="en" href="/WAI/media/av/captions/" class="page-link">Captions/Subtitles</a></li><li> <a lang="en" href="/WAI/media/av/transcripts/" class="page-link">Transcripts</a></li><li> <a lang="en" href="/WAI/media/av/transcribing/" class="page-link">Transcribing Audio to Text</a></li><li> <a lang="en" href="/WAI/media/av/sign-languages/" class="page-link">Sign Languages</a></li><li> <a lang="en" href="/WAI/media/av/player/" class="page-link">Media Player</a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/" aria-current="location" class="page-link">Tutorials</a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/" class="page-link">Page Structure</a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/regions/" class="page-link">Page Regions</a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/labels/" class="page-link">Labeling Regions</a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/headings/" class="page-link">Headings</a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/content/" class="page-link">Content Structure</a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/example/" class="page-link">Full Example</a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/menus/" aria-current="location" class="page-link">Menus</a><ul><li> <a lang="en" href="/WAI/tutorials/menus/structure/" class="page-link">Structure</a></li><li> <a lang="en" href="/WAI/tutorials/menus/styling/" class="page-link">Styling</a></li> <li> <a lang="en" href="/WAI/tutorials/menus/flyout/" aria-current="page" class="page-link">Fly-Out Menus</a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus/" class="page-link">Application Menus</a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus-code/" class="page-link">Application Menu Example & Code</a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/images/" class="page-link">Images</a><ul><li> <a lang="en" href="/WAI/tutorials/images/informative/" class="page-link">Informative Images</a></li><li> <a lang="en" href="/WAI/tutorials/images/decorative/" class="page-link">Decorative Images</a></li><li> <a lang="en" href="/WAI/tutorials/images/functional/" class="page-link">Functional Images</a></li><li> <a lang="en" href="/WAI/tutorials/images/textual/" class="page-link">Images of Text</a></li><li> <a lang="en" href="/WAI/tutorials/images/complex/" class="page-link">Complex Images</a></li><li> <a lang="en" href="/WAI/tutorials/images/groups/" class="page-link">Groups of Images</a></li><li> <a lang="en" href="/WAI/tutorials/images/imagemap/" class="page-link">Image Maps</a></li><li> <a lang="en" href="/WAI/tutorials/images/decision-tree/" class="page-link">An <code style="color: inherit;">alt</code> Decision Tree</a></li><li> <a lang="en" href="/WAI/tutorials/images/tips/" class="page-link">Tips and Tricks</a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/tables/" class="page-link">Tables</a><ul><li> <a lang="en" href="/WAI/tutorials/tables/one-header/" class="page-link">One Header</a></li><li> <a lang="en" href="/WAI/tutorials/tables/two-headers/" class="page-link">Two Headers</a></li><li> <a lang="en" href="/WAI/tutorials/tables/irregular/" class="page-link">Irregular Headers</a></li><li> <a lang="en" href="/WAI/tutorials/tables/multi-level/" class="page-link">Multi-level Headers</a></li><li> <a lang="en" href="/WAI/tutorials/tables/caption-summary/" class="page-link">Caption & Summary</a></li><li> <a lang="en" href="/WAI/tutorials/tables/tips/" class="page-link">Tips and Tricks</a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/forms/" class="page-link">Forms</a><ul><li> <a lang="en" href="/WAI/tutorials/forms/labels/" class="page-link">Labeling Controls</a></li><li> <a lang="en" href="/WAI/tutorials/forms/grouping/" class="page-link">Grouping Controls</a></li><li> <a lang="en" href="/WAI/tutorials/forms/instructions/" class="page-link">Form Instructions</a></li><li> <a lang="en" href="/WAI/tutorials/forms/validation/" class="page-link">Validating Input</a></li><li> <a lang="en" href="/WAI/tutorials/forms/notifications/" class="page-link">User Notifications</a></li><li> <a lang="en" href="/WAI/tutorials/forms/multi-page/" class="page-link">Multi-page Forms</a></li><li> <a lang="en" href="/WAI/tutorials/forms/custom-controls/" class="page-link">Custom Controls</a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/carousels/" class="page-link">Carousels</a><ul><li> <a lang="en" href="/WAI/tutorials/carousels/structure/" class="page-link">Structure</a></li><li> <a lang="en" href="/WAI/tutorials/carousels/functionality/" class="page-link">Functionality</a></li><li> <a lang="en" href="/WAI/tutorials/carousels/animations/" class="page-link">Animations</a></li><li> <a lang="en" href="/WAI/tutorials/carousels/styling/" class="page-link">Styling</a></li><li> <a lang="en" href="/WAI/tutorials/carousels/working-example/" class="page-link">Working Example</a></li><li> <a lang="en" href="/WAI/tutorials/carousels/full-code/" class="page-link">Complete Code</a></li></ul></li></ul></li></ul></nav> </div> <main id="main" lang="en"> <header class="in-resource"> <h1> Fly-out Menus </h1>in <a lang="en" href="/WAI/tutorials/menus/">Menus Tutorial</a></header> <aside class="box box-full"><header class="box-h box-h-full"> <h2> Overview </h2></header><div class="box-i"> Use fly-out (or drop-down) menus to provide an overview of a web site’s page hierarchy. It removes the need for multiple page loads provided that users know where to find the information. Application menus are implemented similarly, but with additional WAI-ARIA markup. People with reduced dexterity, such as tremors, often have trouble operating fly-out menus. For some, it might be impossible. Make sure to provide other ways to reach the submenu items, for example by repeating them on the page of the parent menu item. </div></aside> <nav class="box box-simple" aria-labelledby="tocheading" id="toc"> <header id="tocheading" class="box-h box-h-simple"> Page Contents</header> <div class="box-i"> <ul id="markdown-toc"> <li><a href="#indicate-submenus" id="markdown-toc-indicate-submenus">Indicate submenus</a></li> <li><a href="#fly-out-functionality" id="markdown-toc-fly-out-functionality">Fly-out functionality</a> <ul> <li><a href="#mouse-users" id="markdown-toc-mouse-users">Mouse users</a></li> <li><a href="#keyboard-users" id="markdown-toc-keyboard-users">Keyboard Users</a> <ul> <li><a href="#use-parent-as-toggle" id="markdown-toc-use-parent-as-toggle">Use parent as toggle</a></li> <li><a href="#use-button-as-toggle" id="markdown-toc-use-button-as-toggle">Use button as toggle</a></li> </ul> </li> </ul> </li> </ul> </div> </nav> <h2 id="indicate-submenus">Indicate submenus</h2> Indicate navigation menu items with submenus visually and using markup. In the following example, the submenu is indicated visually by an icon. The WAI-ARIA markup <code class="language-plaintext highlighter-rouge">aria-expanded="false"</code> declares that the submenu navigation is presently hidden, or “collapsed”. <aside class="box box-example"><header class="box-h box-h-example"> Code: HTML</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><nav aria-label="Main"> <ul> <li><a href="…">Home</a></li> <li><a href="…">Shop</a></li> <li class="has-submenu"> <a href="…" aria-expanded="false"> Space Bears </a> <ul> <li><a href="…">Space Bear 6</a></li> <li><a href="…">Space Bear 6 Plus</a></li> </ul> </li> <li><a href="…">Mars Cars</a></li> <li><a href="…">Contact</a></li> </ul> </nav> </code></pre></div></div> </div></aside> <h2 id="fly-out-functionality">Fly-out functionality</h2> The fly-out functionality is created using CSS and scripting with slightly separate considerations for mouse and keyboard users. <h3 id="mouse-users">Mouse users</h3> The following example uses this CSS code to show and hide the submenus when the parent menu items are hovered: <aside class="box box-example"><header class="box-h box-h-example"> Code: CSS</header><div class="box-i"> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code>nav > ul li ul { display: none; } nav > ul li:hover ul { display: block;} </code></pre></div></div> </div></aside> In addition, scripting is used to slightly delay the immediate closing of submenu items when the mouse leaves the area. This delay makes it easier to use the menu when navigation by a mouse is not very precise. In the following example, a delay of one second is added using a timer: <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <nav aria-label="(Example) Main" id="flyoutnavmousefixed"> <ul> <li><a href="#flyoutnavmousefixed">Home</a></li> <li><a href="#flyoutnavmousefixed">Shop</a></li> <li class="has-submenu"> <a href="#flyoutnavmousefixed" aria-expanded="false">Space Bears</a> <ul> <li><a href="#flyoutnavmousefixed">Space Bear 6</a></li> <li><a href="#flyoutnavmousefixed">Space Bear 6 Plus</a></li> </ul> </li> <li><a href="#flyoutnavmousefixed">Mars Cars</a></li> <li><a href="#flyoutnavmousefixed">Contact</a></li> </ul> </nav> <style> .show-overflow { overflow: visible !important; } .show-overflow .box-content { overflow: visible !important; } #flyoutnavmousefixed { display:table; width:100%; } #flyoutnavmousefixed > ul { margin: 0; padding: 0; display: table-row; background-color: #036; color: #fff; } #flyoutnavmousefixed > ul > li { display:table-cell; width: 20%; text-align: center; position:relative; } #flyoutnavmousefixed a, #flyoutnavmousefixed .current { display: block; padding: .25em; border-color: #E8E8E8; } #flyoutnavmousefixed a { color: #fff; text-decoration: none; border: 1px solid #036; } #flyoutnavmousefixed a:hover, #flyoutnavmousefixed a:focus { background-color: #fff; color: #036; text-decoration: underline; } #flyoutnavmousefixed .current { background-color: #bbb; color: #000; border-color: #444; } #flyoutnavmousefixed > ul > li > ul { display: none; position:absolute; left:0; right:0; top:100%; padding:0; margin:0; background-color: #036; } #flyoutnavmousefixed > ul > li.open > ul { display:block; } #flyoutnavmousefixed > ul > li > ul a{ border-bottom-width: 1px; } </style> <script> var menuItems1 = document.querySelectorAll('#flyoutnavmousefixed li.has-submenu'); var timer1; Array.prototype.forEach.call(menuItems1, function(el, i){ el.addEventListener("mouseover", function(event){ this.className = "has-submenu open"; clearTimeout(timer1); }); el.addEventListener("mouseout", function(event){ timer1 = setTimeout(function(event){ document.querySelector("#flyoutnavmousefixed .has-submenu.open").className = "has-submenu"; }, 1000); }); }); </script> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code: JavaScript</header><div class="box-i"> <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var menuItems = document.querySelectorAll('li.has-submenu'); Array.prototype.forEach.call(menuItems, function(el, i){ el.addEventListener("mouseover", function(event){ this.className = "has-submenu open"; clearTimeout(timer); }); el.addEventListener("mouseout", function(event){ timer = setTimeout(function(event){ document.querySelector(".has-submenu.open").className = "has-submenu"; }, 1000); }); }); </code></pre></div></div> </div></aside> <h3 id="keyboard-users">Keyboard Users</h3> Submenus should not open when using the tab key to navigate through the menu, as keyboard users would then have to step through all submenu items to get to the next top-level item. Instead, consider one of the following approaches. <h4 class="ap" id="use-parent-as-toggle">Use parent as toggle</h4> Use this approach in situations where the parent menu item only summarizes the submenu and doesn’t have to carry out a function, such as linking to a web page. In this case, the submenu is opened by a script when the user activates the top-level item and closed when the focus leaves the submenu. <aside class="box box-simple box-notes"><header class="box-h box-h-simple box-h-notes"> Note</header><div class="box-i"> The value of the <code class="language-plaintext highlighter-rouge">href</code> attribute is ignored but you might still want to link to an existing document in case JavaScript is not loaded. </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <nav aria-label="(Example 2) Main" id="flyoutnavkbfixed"> <ul> <li><a href="#flyoutnavkbfixed">Home</a></li> <li><a href="#flyoutnavkbfixed">Shop</a></li> <li class="has-submenu"> <a href="#flyoutnavkbfixed" aria-expanded="false">Space Bears</a> <ul> <li><a href="#flyoutnavkbfixed">Space Bear 6</a></li> <li><a href="#flyoutnavkbfixed">Space Bear 6 Plus</a></li> </ul> </li> <li><a href="#flyoutnavkbfixed">Mars Cars</a></li> <li><a href="#flyoutnavkbfixed">Contact</a></li> </ul> </nav> <style> .show-overflow { overflow: visible !important; } .show-overflow .box-content { overflow: visible !important; } #flyoutnavkbfixed { display:table; width:100%; } #flyoutnavkbfixed > ul { margin: 0; padding: 0; display: table-row; background-color: #036; color: #fff; } #flyoutnavkbfixed > ul > li { display:table-cell; width: 20%; text-align: center; position:relative; } #flyoutnavkbfixed a, #flyoutnavkbfixed .current { display: block; padding: .25em; border-color: #E8E8E8; } #flyoutnavkbfixed a { color: #fff; text-decoration: none; border: 1px solid #036; } #flyoutnavkbfixed a:hover, #flyoutnavkbfixed a:focus { background-color: #fff; color: #036; border: 1px solid #036; text-decoration: underline; } #flyoutnavkbfixed .current { background-color: #bbb; color: #000; border-color: #444; } #flyoutnavkbfixed > ul > li > ul { display: none; position:absolute; left:0; right:0; top:100%; padding:0; margin:0; background-color: #036; } #flyoutnavkbfixed > ul > li.open > ul { display:block; } #flyoutnavkbfixed > ul > li > ul a{ border-bottom-width: 1px; } </style> <script> // focusin/out event polyfill (firefox) !function(){ var w = window, d = w.document; if( w.onfocusin === undefined ){ d.addEventListener('focus' ,addPolyfill ,true); d.addEventListener('blur' ,addPolyfill ,true); d.addEventListener('focusin' ,removePolyfill ,true); d.addEventListener('focusout' ,removePolyfill ,true); } function addPolyfill(e){ var type = e.type === 'focus' ? 'focusin' : 'focusout'; var event = new CustomEvent(type, { bubbles:true, cancelable:false }); event.c1Generated = true; e.target.dispatchEvent( event ); } function removePolyfill(e){ if(!e.c1Generated){ // focus after focusin, so chrome will the first time trigger tow times focusin d.removeEventListener('focus' ,addPolyfill ,true); d.removeEventListener('blur' ,addPolyfill ,true); d.removeEventListener('focusin' ,removePolyfill ,true); d.removeEventListener('focusout' ,removePolyfill ,true); } setTimeout(function(){ d.removeEventListener('focusin' ,removePolyfill ,true); d.removeEventListener('focusout' ,removePolyfill ,true); }); } }(); function hasClass(el, className) { if (el.classList) { return el.classList.contains(className); } else { return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); } } var menuItems1 = document.querySelectorAll('#flyoutnavkbfixed li.has-submenu'); var timer1, timer2; Array.prototype.forEach.call(menuItems1, function(el, i){ el.addEventListener("mouseover", function(event){ this.className = "has-submenu open"; clearTimeout(timer1); }); el.addEventListener("mouseout", function(event){ timer1 = setTimeout(function(event){ var opennav = document.querySelector("#flyoutnavkbfixed .has-submenu.open"); opennav.className = "has-submenu"; opennav.querySelector('a').setAttribute('aria-expanded', "false"); }, 1000); }); el.querySelector('a').addEventListener("click", function(event){ if (this.parentNode.className == "has-submenu") { this.parentNode.className = "has-submenu open"; this.setAttribute('aria-expanded', "true"); } else { this.parentNode.className = "has-submenu"; this.setAttribute('aria-expanded', "false"); } event.preventDefault(); }); var links = el.querySelectorAll('a'); Array.prototype.forEach.call(links, function(el, i){ el.addEventListener("focus", function() { if (timer2) { clearTimeout(timer2); timer2 = null; } }); el.addEventListener("blur", function(event) { timer2 = setTimeout(function () { var opennav = document.querySelector("#flyoutnavkbfixed .has-submenu.open") if (opennav) { opennav.className = "has-submenu"; opennav.querySelector('a').setAttribute('aria-expanded', "false"); } }, 10); }); }); }); </script> </div></aside> The following code iterates through all top-level items with the class <code class="language-plaintext highlighter-rouge">has-submenu</code> and adds a click event, which opens or closes the submenu depending on its state. Also, the <code class="language-plaintext highlighter-rouge">aria-expanded</code> attribute is set to <code class="language-plaintext highlighter-rouge">true</code> while the submenu is open, and to <code class="language-plaintext highlighter-rouge">false</code> otherwise. <aside class="box box-simple box-notes"><header class="box-h box-h-simple box-h-notes"> Note</header><div class="box-i"> Despite the name, click events are activated regardless of the input method as soon as the link gets activated. </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code: 'JavaScript</header><div class="box-i"> <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var menuItems = document.querySelectorAll('li.has-submenu'); Array.prototype.forEach.call(menuItems, function(el, i){ el.querySelector('a').addEventListener("click", function(event){ if (this.parentNode.className == "has-submenu") { this.parentNode.className = "has-submenu open"; this.setAttribute('aria-expanded', "true"); } else { this.parentNode.className = "has-submenu"; this.setAttribute('aria-expanded', "false"); } event.preventDefault(); return false; }); }); </code></pre></div></div> </div></aside> <h4 class="ap" id="use-button-as-toggle">Use button as toggle</h4> For situations when the parent menu item needs to carry out a function, such as linking to a web page, a separate button can be added to the parent item, to open and close the submenu. This button can also act as a visual indicator for the presence of a submenu. <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <nav aria-label="(Example 3) Main" id="flyoutnavkbbtn"> <ul> <li><a href="#flyoutnavkbbtn">Home</a></li> <li><a href="#flyoutnavkbbtn">Shop</a></li> <li class="has-submenu"> <a href="#flyoutnavkbbtn">Space Bears</a> <ul> <li><a href="#flyoutnavkbbtn">Space Bear 6</a></li> <li><a href="#flyoutnavkbbtn">Space Bear 6 Plus</a></li> </ul> </li> <li><a href="#flyoutnavkbbtn">Mars Cars</a></li> <li><a href="#flyoutnavkbbtn">Contact</a></li> </ul> </nav> <style> .show-overflow { overflow: visible !important; } .show-overflow .box-content { overflow: visible !important; } #flyoutnavkbbtn { display:table; width:100%; } #flyoutnavkbbtn > ul { margin: 0; padding: 0; display:flex; background-color: #036; color: #fff; } #flyoutnavkbbtn > ul > li { display:flex; width: 20%; text-align: center; position:relative; } #flyoutnavkbbtn a, #flyoutnavkbbtn .current { flex:1; display: block; padding: .25em; border-color: #E8E8E8; } #flyoutnavkbbtn a { color: #fff; text-decoration: none; border: 1px solid #036; } #flyoutnavkbbtn a:hover, #flyoutnavkbbtn a:focus { background-color: #fff; color: #036; border: 1px solid #036; text-decoration: underline; } #flyoutnavkbbtn .current { background-color: #bbb; color: #000; border-color: #444; } #flyoutnavkbbtn > ul > li > ul { display: none; position:absolute; left:0; right:0; top:100%; padding:0; margin:0; background-color: #036; } #flyoutnavkbbtn > ul > li.open > ul { display:block; } #flyoutnavkbbtn > ul > li > ul a{ border-bottom-width: 1px; } #flyoutnavkbbtn .has-submenu > a:after { margin-left: 5px; line-height: 14px; content: ''; } #flyoutnavkbbtn .has-submenu:hover > a:hover:after, #flyoutnavkbbtn .has-submenu > a:focus:after { content: ''; } #flyoutnavkbbtn .has-submenu button { background-color: transparent; border: none; padding:0; line-height: 1; padding: 3px; } #flyoutnavkbbtn .has-submenu button > span { display:inline-block; width: .8em; height: .8em; background: url(/WAI/content-images/tutorials/menus/ex-dropdown-inactive.png) center no-repeat; } #flyoutnavkbbtn .has-submenu:hover button > span, #flyoutnavkbbtn .has-submenu button:focus > span { background: url(/WAI/content-images/tutorials/menus/ex-dropdown-active.png) #fff; } #flyoutnavkbbtn .has-submenu button, #flyoutnavkbbtn .has-submenu a:focus + button { background-color: #036; } #flyoutnavkbbtn .has-submenu:hover button, #flyoutnavkbbtn .has-submenu button:hover, #flyoutnavkbbtn .has-submenu button:focus { background: #FFF; border: 1px solid #036; border-left: none; } </style> <script> // focusin/out event polyfill (firefox) !function(){ var w = window, d = w.document; if( w.onfocusin === undefined ){ d.addEventListener('focus' ,addPolyfill ,true); d.addEventListener('blur' ,addPolyfill ,true); d.addEventListener('focusin' ,removePolyfill ,true); d.addEventListener('focusout' ,removePolyfill ,true); } function addPolyfill(e){ var type = e.type === 'focus' ? 'focusin' : 'focusout'; var event = new CustomEvent(type, { bubbles:true, cancelable:false }); event.c1Generated = true; e.target.dispatchEvent( event ); } function removePolyfill(e){ if(!e.c1Generated){ // focus after focusin, so chrome will the first time trigger tow times focusin d.removeEventListener('focus' ,addPolyfill ,true); d.removeEventListener('blur' ,addPolyfill ,true); d.removeEventListener('focusin' ,removePolyfill ,true); d.removeEventListener('focusout' ,removePolyfill ,true); } setTimeout(function(){ d.removeEventListener('focusin' ,removePolyfill ,true); d.removeEventListener('focusout' ,removePolyfill ,true); }); } }(); function hasClass(el, className) { if (el.classList) { return el.classList.contains(className); } else { return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); } } var menuItems1 = document.querySelectorAll('#flyoutnavkbbtn li.has-submenu'); var timer1, timer2; var parseHTML = function(str) { var tmp = document.implementation.createHTMLDocument(); tmp.body.innerHTML = str; return tmp.body.children; }; Array.prototype.forEach.call(menuItems1, function(el, i){ var activatingA = el.querySelector('a'); var btn = '<button>show submenu for “' + activatingA.text + '”</button>'; activatingA.insertAdjacentHTML('afterend', btn); el.addEventListener("mouseover", function(event){ this.className = "has-submenu open"; this.querySelector('a').setAttribute('aria-expanded', "true"); this.querySelector('button').setAttribute('aria-expanded', "true"); clearTimeout(timer1); }); el.addEventListener("mouseout", function(event){ timer1 = setTimeout(function(event){ document.querySelector('#flyoutnavkbbtn .has-submenu.open a').setAttribute('aria-expanded', "false"); document.querySelector('#flyoutnavkbbtn .has-submenu.open button').setAttribute('aria-expanded', "false"); document.querySelector("#flyoutnavkbbtn .has-submenu.open").className = "has-submenu"; }, 1000); }); el.querySelector('button').addEventListener("click", function(event){ if (this.parentNode.className == "has-submenu") { this.parentNode.className = "has-submenu open"; this.parentNode.querySelector('a').setAttribute('aria-expanded', "true"); this.parentNode.querySelector('button').setAttribute('aria-expanded', "true"); } else { this.parentNode.className = "has-submenu"; this.parentNode.querySelector('a').setAttribute('aria-expanded', "false"); this.parentNode.querySelector('button').setAttribute('aria-expanded', "false"); } event.preventDefault(); }); var links = el.querySelectorAll('a'); Array.prototype.forEach.call(links, function(el, i){ el.addEventListener("focus", function() { if (timer2) { clearTimeout(timer2); timer2 = null; } }); el.addEventListener("blur", function(event) { timer2 = setTimeout(function () { var opennav = document.querySelector("#flyoutnavkbbtn .has-submenu.open") if (opennav) { opennav.className = "has-submenu"; opennav.querySelector('a').setAttribute('aria-expanded', "false"); opennav.querySelector('button').setAttribute('aria-expanded', "false"); } }, 10); }); }); }); </script> </div></aside> The following code adds a button to every top-level menu item with a submenu. When the button is activated, it shows or hides the submenu. The invisible label of the button is set to “show submenu” or “hide submenu”, reflecting the state of the submenu. <aside class="box box-simple box-notes"><header class="box-h box-h-simple box-h-notes"> Note</header><div class="box-i"> If possible, include the name of the parent menu item in the button’s label; for example: “show Space Bears submenu”. </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code: JavaScript</header><div class="box-i"> <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var menuItems = document.querySelectorAll('li.has-submenu'); Array.prototype.forEach.call(menuItems, function(el, i){ var activatingA = el.querySelector('a'); var btn = '<button>show submenu for “' + activatingA.text + '”</button>'; activatingA.insertAdjacentHTML('afterend', btn); el.querySelector('button').addEventListener("click", function(event){ if (this.parentNode.className == "has-submenu") { this.parentNode.className = "has-submenu open"; this.parentNode.querySelector('a').setAttribute('aria-expanded', "true"); this.parentNode.querySelector('button').setAttribute('aria-expanded', "true"); } else { this.parentNode.className = "has-submenu"; this.parentNode.querySelector('a').setAttribute('aria-expanded', "false"); this.parentNode.querySelector('button').setAttribute('aria-expanded', "false"); } event.preventDefault(); }); }); </code></pre></div></div> </div></aside> <aside class="box box-large box-icon" id="related"><header class="box-h box-h-large box-h-icon box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-default "><use xlink:href="/WAI/assets/images/icons.svg#icon-default"></use></svg> Related WCAG resources</header><div class="box-i"> These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels: Techniques: <ul><li><a href="https://www.w3.org/TR/WCAG20-TECHS/H4">H4: Creating a logical tab order through links, form controls, and objects</a></li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/SCR26">SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element</a></li></ul> </div></aside> <nav class="pager" aria-label="Previous/Next Page" style="clear: both;"> <ul><li class="pager--item previous"> <a href="/WAI/tutorials/menus/styling/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-left pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-left"></use></svg> Previous: Menu Styling </a> </li><li class="pager--item next"> <a href="/WAI/tutorials/menus/application-menus/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-right pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-right"></use></svg> Next: Application Menus </a> </li> </ul></nav><aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Help improve this page </h2></header><div class="box-i">Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list.">wai@w3.org</a> or via GitHub. <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list." class="button">E-mail</a><a href=" https://github.com/w3c/wai-website/edit/main/pages/design-develop/tutorials/menus/flyout.md " class="button">Fork & Edit on GitHub</a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&wai-resource-id=wai-tutorials&wai-url=https://www.w3.org/WAI/tutorials/menus/flyout/" class="button">New GitHub Issue</a></div></div></aside> <a class="button button-backtotop" href="#top"><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Back to Top</a> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"> <div>Status: Updated 08 February 2022 </div> <div> Editors: <ul class="sentence"> <li><a href="https://www.w3.org/People/yatil/">Eric Eggert</a></li> <li><a href="https://www.w3.org/People/shadi/">Shadi Abou-Zahra</a></li> </ul>   Update Editor: <ul class="sentence"> <li>Brian Elton</li> </ul>   Contributors: <ul class="sentence"> <li>see <a href="/WAI/tutorials/acknowledgements/">Acknowledgements</a></li> </ul> </div> Developed by the Education and Outreach Working Group (<a href="https://www.w3.org/groups/wg/eowg">EOWG</a>). Developed with support from the <a href="https://www.w3.org/WAI/ACT/">WAI-ACT project</a>, co-funded by the European Commission <abbr title="Information Society Technologies">IST</abbr> Programme. </div> </footer><footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a> Strategies, standards, and supporting resources to make the Web accessible to people with disabilities. </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> Copyright © 2025 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a>®). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>. </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/sitemap/#archive">Archive</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1740133616473651578"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1740133616473651578"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>