Tabbing through sub-menus, tab index |
Tabbing through sub-menus, tab index |
soupi |
Jan 22 2020, 01:40 PM
Post
#1
|
Newbie Group: Members Posts: 14 Joined: 14-November 13 Member No.: 19,980 |
Hello I have a quick menu bar that I am trying to make accessible.
When I tab it works but on a menu that has sub-menu it dosnt go down the submenu... How do I fix this? CODE <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background: #212121; font-size:22px; line-height: 32px; color: #ffffff; margin: 0; padding: 0; word-wrap:break-word !important; font-family: 'Open Sans', sans-serif; } h1 { font-size: 60px; text-align: center; color: #FFF; } h3 { font-size: 30px; line-height: 34px; text-align: center; color: #FFF; } h3 a { color: #FFF; } a { color: #FFF; } h1 { margin-top: 100px; text-align:center; font-size:60px; line-height: 70px; font-family: 'Bree Serif', 'serif'; } #container { margin: 0 auto; max-width: 890px; } p { text-align: center; } .toggle, [id^=drop] { display: none; } /* Giving a background-color to the nav container. */ nav { margin:0; padding: 0; background-color: #254441; } #logo { display: block; padding: 0 30px; float: left; font-size:20px; line-height: 60px; } /* Since we'll have the "ul li" "float:left" * we need to add a clear after the container. */ nav:after { content:""; display:table; clear:both; } /* Removing padding, margin and "list-style" from the "ul", * and adding "position:reltive" */ nav ul { float: right; padding:0; margin:0; list-style: none; position: relative; } /* Positioning the navigation items inline */ nav ul li { margin: 0px; display:inline-block; float: left; background-color: #254441; } /* Styling the links */ nav a { display:block; padding:14px 20px; color:#FFF; font-size:17px; text-decoration:none; } nav ul li ul li:hover { background: #000000; } /* Background color change on Hover */ nav a:hover { background-color: #000000; } /* Hide Dropdowns by Default * and giving it a position of absolute */ nav ul ul { display: none; position: absolute; /* has to be the same number as the "line-height" of "nav a" */ top: 60px; } /* Display Dropdowns on Hover */ nav ul li:hover > ul { display:inherit; } /* Fisrt Tier Dropdown */ nav ul ul li { width:170px; float:none; display:list-item; position: relative; } /* Second, Third and more Tiers * We move the 2nd and 3rd etc tier dropdowns to the left * by the amount of the width of the first tier. */ nav ul ul ul li { position: relative; top:-60px; /* has to be the same number as the "width" of "nav ul ul li" */ left:170px; } /* Media Queries --------------------------------------------- */ @media all and (max-width : 768px) { #logo { display: block; padding: 0; width: 100%; text-align: center; float: none; } nav { margin: 0; } /* Hide the navigation menu by default */ /* Also hide the */ .toggle + a, .menu { display: none; } /* Stylinf the toggle lable */ .toggle { display: block; background-color: #254441; padding:14px 20px; color:#FFF; font-size:17px; text-decoration:none; border:none; } .toggle:hover { background-color: #000000; } /* Change menu item's width to 100% */ nav ul li { display: block; width: 100%; } nav ul ul .toggle, nav ul ul a { padding: 0 40px; } nav ul ul ul a { padding: 0 80px; } nav a:hover, nav ul ul ul a { background-color: #000000; } nav ul li ul li .toggle, nav ul ul a, nav ul ul ul a{ padding:14px 20px; color:#FFF; font-size:17px; } nav ul li ul li .toggle, nav ul ul a { background-color: #212121; } /* Hide Dropdowns by Default */ nav ul ul { float: none; position:static; color: #ffffff; /* has to be the same number as the "line-height" of "nav a" */ } /* Hide menus on hover */ nav ul ul li:hover > ul, nav ul li:hover > ul { display: none; } /* Fisrt Tier Dropdown */ nav ul ul li { display: block; width: 100%; } nav ul ul ul li { position: static; /* has to be the same number as the "width" of "nav ul ul li" */ } } @media all and (max-width : 330px) { nav ul li { display:block; width: 94%; } } </style> <title>Menu Navigation Test</title> </head> <body> <nav> <div id="logo">Syracuse University Libraries</div> <label for="drop" class="toggle">Menu</label> <input type="checkbox" id="drop" /> <ul class="menu"> <li><a href="#">Home</a></li> <li> <!-- First Tier Drop Down --> <label for="drop-1" class="toggle">About</label> <a href="#">About</a> <ul> <li><a href="#">Departments</a></li> <li><a href="#">News</a></li> </ul> </li> <li> <!-- First Tier Drop Down --> <label for="drop-2" class="toggle">Rooms</label> <a href="#">Rooms</a> <input type="checkbox" id="drop-2"/> <ul> <li><a href="#">Resources</a></li> <li><a href="#">Links</a></li> <li> <!-- Second Tier Drop Down --> <label for="drop-3" class="toggle">Spaces</label> <a href="#">Rooms (Dropdown)</a> <input type="checkbox" id="drop-3"/> <ul> <li><a href="#">Learning Commons</a></li> <li><a href="#">Locations</a></li> <li><a href="#">Reserve a Room</a></li> </ul> </li> </ul> </li> <li><a href="#">Special Collections</a></li> <li><a href="#">Giving</a></li> <li><a href="#">More</a></li> </ul> </nav> <!-- Sample Text --> <h1><p>This is a Generic Hierarchical Menu Navigation.</p></h1> <p>This is a Generic Hierarchical Menu Navigation.</p> <p>This is a Generic Hierarchical Menu Navigation.</p> <footer> <p>Contact information: <a href="mailto:someone@example.com"> someone@example.com</a>.</p> </footer> </body> </html> |
Christian J |
Jan 23 2020, 01:16 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
This seems to work in Firefox and Chromium. MSIE and Edge running on EdgeHTML don't support it, but I suppose Edge will add support once it becomes Chromium-based:
CSS CODE li ul {display: none;} li:focus-within ul, li:hover ul {display: block;} HTML CODE <ul> <li><a href="#">top 1</a></li> <li><a href="#">top 2</a> <ul> <li><a href="#">sub 1</a></li> <li><a href="#">sub 2</a></li> </ul> </li> <li><a href="#">top 3</a></li> </ul> See also https://developer.mozilla.org/en-US/docs/We...S/:focus-within |
Lo-Fi Version | Time is now: 25th April 2024 - 01:32 AM |