Develop Reference

Drop Down Menu Items Not in Tab Order

I am working on a web design project and have run into an issue with the navigation menu. Our main site is created using WordPress and the main menu contains drop down menus which one can navigate using the tab key. In other words, the drop down menu opens upon tabbing over the top-level item and one can navigate through that menu with the tab key. In order to ensure a consistent and accessible user experience I need to recreate this on an outside platform (not WordPress) using HTML, CSS, and Javacript.
Using the code below I have created a drop down menu with the correct look and feel. Utilizing two event handlers accommodates both people using the mouse and those using a keyboard (I am less knowledgeable about how screen readers would handle this). Unfortunately I can't seem to tab through the sub-menus, only the top level items ("About", "Accounts", etc.) and am not entirely sure why. One would think just adding tabindex="0" would put the items in question into the tab order, but that doesn't seem to be the case. This doesn't seem to be an hugely common problem because I have had only limited success when searching both Google and Stackoverflow. Does anyone have any insights into the issue?
//For desktop menu
var customMenuHeaders = document.getElementsByClassName('TopMenuItem');
var customMenuItems = document.getElementsByClassName('NavMenuItem');
//Makes the desktop drop down menus visible upon focus
for (let i = 0; i < customMenuHeaders.length; i++){
customMenuHeaders[i].addEventListener('focusin', function(event){
for (let j = 0; j < customMenuItems.length; j++){
customMenuItems[i].style.display = "block";
}
});
customMenuHeaders[i].addEventListener('mouseover', function(event){
for (let j = 0; j < customMenuItems.length; j++){
customMenuItems[i].style.display = "block";
}
});
customMenuHeaders[i].addEventListener('focusout', function(event){
for (let k = 0; k < customMenuItems.length; k++){
customMenuItems[i].style.display = "none";
}
});
customMenuHeaders[i].addEventListener('mouseout', function(event){
for (let k = 0; k < customMenuItems.length; k++){
customMenuItems[i].style.display = "none";
}
});
}
.navigation {
font-family: montserrat;
font-weight: bold;
float: right;
font-size: 14px;
text-align: right;
width: 60%;
position: absolute;
left: 450px;
z-index: 100;
clear: left;
}
.TopMenuItem {
display: inline-block;
vertical-align: top;
background-color: #FFFFFF;
margin-left: 25px;
}
.TopMenuItem:hover {
text-decoration: underline;
}
.TopMenuItem a {
color: #000000;
}
.NavMenuItem {
display: none;
text-align: left;
border-top: 2px solid #FFD200;
background-color:#FFFFFF;
width: 250px;
padding-right: 50px;
padding-left: 50px;
padding-top: 20px;
padding-bottom: 20px;
overflow: visible;
position: absolute;
z-index: 500;
}
.NavMenuItem li {
list-style-type: none;
padding-top: 5px;
padding-bottom: 5px;;
}
.NavMenuItem li a {
color: #000000;
}
<nav class="navigation" aria-label="main_navigation" role="navigation">
<ul >
<li class="TopMenuItem">About
<ul class="NavMenuItem">
<li>About the Library</li>
<li>Visiting the LIbrary</li>
<li>Contact Us</li>
<li>Faculty Info</li>
<li>Maps and Spaces</li>
</ul>
</li>
<li class="TopMenuItem">Accounts
<ul class="NavMenuItem">
<li>Interlibrary Loan</li>
<li>Renewals</li>
<li>Refworks</li>
<li>Skidmore eMail</li>
<li>The Spring</li>
</ul>
</li>
<li class="TopMenuItem">Services
<ul class="NavMenuItem">
<li>Borrowing</li>
<li>Course Reserves</li>
<li>Interlibrary Loan Info</li>
<li>Library Instruction</li>
<li>Technology</li>
</ul>
</li>
<li class="TopMenuItem">Resources
<ul class="NavMenuItem">
<li>Citing Sources</li>
<li>Creative Matter</li>
<li>Digital Collections</li>
<li>Images</li>
<li>Movies</li>
<li>Music</li>
<li>Popular Reading</li>
<li>Primary Sources</li>
<li>Reference Sources</li>
</ul>
</li>
<li class="TopMenuItem">Under Our Roof
<ul class="NavMenuItem">
<li>GIS Center</li>
<li><a href="https://lucyscribnerlibrary.reclaim.hosting/special-collections/Special Collections</li>
<li>IT Help Desk</li>
<li>LEDS</li>
<li>MDOCS</li>
<li>Media Services</li>
<li>Writing Center</li>
</ul>
</li>
</ul>
</nav>

Got it! After reading the comment by Scott Marcus I took another look at the code. The issue was that the menu items were effectively invisible to the computer since the default display setting was none. So even once the JavaScript changed the display to block, the child items of the top level li tag were still invisible and thus not accessible via keyboard.
What worked was to change my approach to the menu's visibility status. Following on a post from WebAIM, I absolutely positioned the drop down menus off screen and used the script to move them into place when either a focus or mouseover event occurs. On the surface the effect is the same, but since the content is always technically visible to the computer there is no longer any problem with not being able to tab through the menu.

How to add value to the navigation tab created dynamically?

I am trying to create an extra navigation tab using JavaScript. It kinda works but not the way I want it. So the idea is to add an extra navigation tab with the link leading to another page. However, when I create the tab 1) it comes without the a:hover properties (all other tabs have it) and 2) I don't know how to assign a value to it (link to another webpage). Here is my code:
HTML5
<nav>
<ul id="topnav">
<li>Home</li>
<li>About Us</li>
<li>Order</li>
<!-- Location.html --> <!-- Load dynamically -->
</ul>
</nav>
JavaScript:
var list = document.getElementById("topnav");
var contact = document.createElement("li");
list.appendChild(contact);
contact.innerHTML = "Location";
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
a {
color: black;
text-decoration: none;
}
a:hover {
background-color: #798585;
text-decoration: none;
}

create an element a and then append it to the list
var list = document.getElementById("topnav");
var contact = document.createElement("li");
var a = document.createElement("a");
a.setAttribute("href","somelink.html")
a.textContent="Location"
contact.append(a)
list.append(contact)

Try putting the anchor in the innerHTML of the li element you created:
contact.innerHTML = "Location";

How to make active button in navigation bar change color

Ok so i'm super beginner with html and css and i don't know javascript at all.I'm creating a little website as a school project, i made horizontal navigation bar from w3schools tutorial, what i want to do is when i press one of the buttons to stay colored, not just change color for 1 sec because they are 'active'. My code may be completely messy but i really need help.
Also i have 3 more subpages connected to this one, i want them to stay colored as well.
What i'm trying to achieve is exactly this: How can I add class on active li with JavaScript code
But it doesnt work for me, maybe i need to change something in javascrip because my class is named 'navbar'?
I've tried several solves from this topic on stack overflow but none of these work for me :\
HTML:
<ul class="navbar">
<li>Pocetna</li>
<li>Stranica 2</li>
<li>Stranica 3</li>
<li style="float: right;">Kontakt</li>
</ul>
CSS:
.navbar {
list-style-type: none;
position: sticky;
top: 0;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Arial;
}
.navbar li a:hover {
background-color: #111;
}
Im expecting link to stay orange when im on that page.

you can do some things with jquery like add an event listener that changes the css of html elements
const changeColor = () => {
$('ul > li > a').css('background-color', 'inherit')
$(event.target).css("background-color", "red")
}
$('ul > li > a').on('click', changeColor)
https://jsfiddle.net/z02ndowt/

You can do this by adding a class onto your html <a> tag on the link that is active and then just style the active class within your CSS. See below:
HTML
<ul class="navbar">
<li><a class="active" href="sajt.html">Pocetna</a></li>
<li>Stranica 2</li>
<li>Stranica 3</li>
<li style="float: right;">Kontakt</li>
</ul>
CSS
.active {
color: orange;
}

Ok so i did some testing and kinda found a solution. I put identificator on instead of class. So on my main page i put id="active" on first link, on my second page on second link etc. then just added #active { background-color: orange; } and it works just how i wanted it to work.

Dropdown menu css / js on Ipad

I'm working on a website with a simple and pure css dropdown menu. That website is supposed to be used on desktop and on Ipads. My dropdown menu uses :hover pseudo-class and issue appears on the touch screen: the menu expands well but it never collapse. The only way to close it is to open another submenu from the same dropdown menu. My goal is that my menu collapse when I touch anywhere in the DOM (except in the menu of course). After many researches, it appears that we can not do this with css, js is obligatory. I am a beginner and I have no skill in JS, is it possible to do it with only few vanilla js lines ? I don't want to use jquery. Here is my code:
/* ========================================================================= */
/* Global styles */
/* ========================================================================= */
html {
box-sizing: border-box;
font-size: 62.5%;
}
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body, input {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
img {
border: none;
}
/* ========================================================================= */
/* Layout styles */
/* ========================================================================= */
body > header, body > main {
margin: auto;
}
body > header {
padding-top : 20px;
width: 768px;
}
body > header > img {
width: 150px;
margin-left: 10px;
}
/* ========================================================================= */
/* Nav styles */
/* ========================================================================= */
body > header > nav {
min-width: 768px;
margin: 0 auto;
padding-top: 20px;
font-size: 1.5em;
text-align: center;
}
nav > ul ul {
position: absolute;
display: none;
text-align: left;
}
nav li {
width: 150px;
}
nav > ul > li {
display: inline-block;
}
nav a {
display: block;
text-decoration: none;
}
nav > ul > li > a {
padding: 10px 0;
color: #44546A;
}
nav > ul ul li {
background-color: #333F50;
list-style-type: none;
}
nav > ul ul li a {
padding: 10px 0 10px 30px;
color: #FAFAFA;
font-size: 0.9em;
}
nav > ul li:hover ul {
display: block;
}
nav > ul ul li:hover {
background-color: #51647f;
}
<!DOCTYPE html>
<html>
<head>
<base href="/"/>
<meta charset="UTF-8"/>
<title>Test Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<header>
<img src="img/test.svg" alt="test"/>
<nav>
<ul>
<li>
Menu 1
<ul class="subMenu">
<li>
SubMenu 1.1
</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>
SubMenu 2.1
</li>
<li>
SubMenu 2.2
</li>
<li>
SubMenu 2.3
</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>
SubMenu 3.1
</li>
</ul>
</li>
<li>
Menu 4
<ul class="subMenu">
<li>
SubMenu 4.1
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
Edit : That code works well on tablets but not on Ipads

The :hover pseudo-class behaves differently on touch screen devices. When the user touches an element, the browser triggers and keeps the state :hover until another pseudo-class is triggered. Thus, when the user touches another element on the page, a different pseudo-class is triggered by the browser and the drop-down menu becomes hidden. Most of the time, it is the :active pseudo-class that is triggered.
However, as explained on the Safari Developer Library, Mobile Safari doesn't trigger the :active pseudo-class unless a touch event is attached to the element:
On iOS, mouse events are sent so quickly that
the down or active state is never received. Therefore, the :active
pseudo state is triggered only when there is a touch event set on the
HTML element—for example, when ontouchstart is set on the element...
To fix this, you can add a touchstart listener to your document in order to trigger the :active pseudo-class:
document.addEventListener('touchstart', function() {});

Here a solution, ask if you want explanation.
<nav id='nav'>
...
<script>
function hideDropDownMenu(e) {
var element = e.target;
var parent = element.parentNode;
var mustHide = false;
while (parent != null && !mustHide) {
mustHide = element.id === 'nav';
element = element.parentNode;
}
var subMenus = document.getElementsByClassName('subMenu');
var i = 0;
for (i = 0; i < subMenus.length; i++) {
var subMenu = subMenus[i];
subMenu.style = mustHide ? 'none !important' : 'block'; // not sure if the !import is optionnal
}
}
document.body.addEventListener('click', hideDropDownMenu);
</script>

As I posted in another question:
I solved this problem by adding a tabindex to the <body> tag, like this:
<body tabindex="0">
This little trick allowed iPad Safari to focus on the body when it's tapped on, and remove the focus from the dropdown menu.
No Javascript required. 😊

cannot make list item visible with > CSS selector

I'm unable to make the popups 'redItem', 'blueItem' and 'greenItem' below visible again after setting their display to 'none'. I'm using a CSS selector to get them visible again when the mouse hovers over a node higher up in the nested list to no avail.
Here's the code:
<ul class="popups" style="vertical-align: bottom; padding: 0px; margin: 0px;">
<li style="width: 165px"><a id="topmostBox" href="#">One_high-up_item</a>
<ul class="popups">
<li>First-lower-item
<ul class="popups">
<li name="redItem" >Red</li>
<li name="blueItem">Blue</li>
<li name="greenItem">Green</li>
</ul>
</li>
</ul>
</li>
</ul>
.popups:hover > li {
display: block;
}
.popups {
background-color: white;
font-family: sans-serif;
font-size: 13.5px;
list-style: none;
position: relative;
border: 1px solid lightgray;
border-width: .05em;
border-top-color: rgb(165,165,165);
line-height: 1.2em;
display: inline-table;
}
function setTopColorAndVis(theNestedPopupAnchor)
{
var theColorName = theNestedPopupAnchor.innerHTML;
var topMenuBox = document.getElementById('topmostBox');
topMenuBox.innerHTML = theColorName ;
theNestedPopupAnchor.parentNode.style.display = "none";
}
What happens is this:
1) I select the color 'Red' (the 1st list item)
2) my call to setTopColorAndVis(this) makes the popup disappear (because the user selected an item, the color "Red", and now the popup is not needed for now)
3) but when I later hover the mouse over the "First-lower-item" list item, the child li that has the ul containing 'redItem', 'greenItem', 'blueItem' does not appear.
So my experience here is that I'm successfully able to hide the list items named 'redItem', 'blueItem' and 'greenItem' -- but when I hover over the "First-lower-item", despite my CSS code:
.popups:hover > li {
display: block;
}
The 'redItem', 'greenItem' and 'blueItem' do NOT reappear.
What am I missing here?

The inline style overrides you style in your css code. you should use onmouseover event and onmouseout instead.
Try
<li name="redItem" >Red</li>
function show(elem){
elem.parentNode.style.display = "block";
}
function hide(elem){
elem.parentNode.style.display = "none";
}

You cannot :hover over an element with display:none as it has no size...
instead of working with display, you can work with visibility - which will leave an area to hover over.
like so:
theNestedPopupAnchor.parentNode.style.visibility = 'hidden'
.popups:hover > li {
visibility: visible;
}
http://www.w3schools.com/cssref/pr_class_visibility.asp