The menu remains open at all times

Currently, I am developing a web-accessible menu that needs to comply with 508 standards. However, I encountered an issue where the menu does not close when I reach the last item using the TAB key on the keyboard.

Additionally, I am looking for a solution to close the menu by pressing the ESC key.

You can view a sample of the menu here: jsfiddle.net/dvLden/Ltz7nmdb/1/

javascripthtmljquerycssdrop-down-menu

Answer №1

To make the necessary modification:

/* CSS */

.navbar > .navbar-item:hover > .navbar-sub,
.navbar > .navbar-item a:focus ~ .navbar-sub {
    display: block;
}

Below is the complete code snippet that works without jQuery:

/* CSS */

body {
    margin: 10px;
}
.navbar,
.navbar .navbar-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}
.navbar > .navbar-item {
    float: left;
}
.navbar > .navbar-item:last-child {
    margin-right: 0;
}
.navbar > .navbar-item a {
    text-decoration: none;
}
.navbar > .navbar-item > a {
    background-color: #999;
    padding: 10px 20px;
    color: #696969;
    display: block;
}
.navbar > .navbar-item > a:hover,
.navbar > .navbar-item > a:focus,
.navbar > .navbar-item.active > a {
    background-color: #ccc;
}
.navbar .navbar-sub {
    display: none;
}
.navbar .navbar-sub > .navbar-sub-item > a {
    color: #ccc;
    display: block;
    padding: 5px 10px;
    text-align: center;
    background-color: #696969;
}
.navbar .navbar-item.active .navbar-sub-item > a:hover,
.navbar .navbar-item.active .navbar-sub-item > a:focus {
    background-color: #999;
}


/* To ensure it remains visible on "hover" and "focus" */
.navbar > .navbar-item:hover > .navbar-sub,
.navbar > .navbar-item a:focus ~ .navbar-sub {
    display: block;
}
<!-- HTML -->

<ul class="navbar">
    <li class="navbar-item">
        <a href="javascript:;">Parent Link</a>
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
    <li class="navbar-item">
        <a href="javascript:;">Parent Link</a>
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
    <li class="navbar-item">
        <a href="javascript:;">Parent Link</a>
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>   
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
    <li class="navbar-item">
        <a href="javascript:;">Parent Link</a>
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using font size in rem units, it will remain consistent across different screen sizes and not be subject to scaling

When setting padding, margin, and font size using rem units, I noticed that on larger screens the output looks good. However, on smaller screen devices, the sizes do not reduce proportionally - instead, the measurements from the larger screen persist. Wh ...

css

Having trouble resetting Material UI Radio Button Group in Formik form within React?

formik.resetForm() is effective in resetting the value, but the Material UI radio button group does not reset correctly: The last selected radio button remains selected. How can I ensure the radio button group is reset properly after submission? import { u ...

javascriptreactjsmaterial-uiformikformik-material-ui

What is the best way to create a form that includes both dynamic objects and dynamic arrays using a JSON schema?

I have observed how a JSON schema can be utilized to construct dynamic arrays. My goal is to develop a JSON web form using a JSON schema that allows for objects (dictionaries) to be expandable similar to arrays. For example, you can visit the demonstrati ...

javascriptjsonformsjsonschemaformbuilder

Show that a CPU-intensive JavaScript function is executing (animated GIF spinners do not spin)

Displaying animated indicator or spinner gifs, then hiding them, is an effective way to communicate to the user that their action is being processed. This helps to assure the user that something is happening while they wait for the action to complete, espe ...

javascriptcsscss-transitionsanimated-gifactivity-indicator

Allowing multiple requests to be executed simultaneously in Express.js without causing any blocking issues

I am facing an issue with my Express.js website while handling post requests. The server hangs when a request triggers a query that takes several minutes to execute and respond from the database. Below is the code structure I use for database queries: Se ...

javascriptnode.jsexpresstedious

I am facing an issue with my getServerSideProps function being undefined in my Next.js application, despite using a class component. Can anyone help me troub

Hey there, I'm currently facing an issue with retrieving props using getServerSideProps. I've tried various solutions but haven't been able to make it display properly. Below is the code snippet: import React, { Component } from 'react& ...

javascriptreactjsnext.jsserver-side-rendering

Determining the position and offset of an element

Currently, I am facing a dilemma with my table of images. I want to add an icon to the corner of each image so that they align perfectly. I attempted to achieve this using relative CSS positioning, but it resulted in the icons extending beyond the cells an ...

javascriptjquery

Top method for utilizing render props in React

Currently, I am employing render model props. However, I have a hunch that there might be an alternative method to achieve the same outcome. Is anyone familiar with another approach? {variable === "nameComponen" && <component/>} {variable === "name ...

javascriptreactjs

Tips on Updating Array Value with jQuery

I have been working on using jQuery to edit array values. Here is my approach: From a modal, each time I click the "Add item" button, it pushes values to an array and appends the data to a table. var iteminfo = { "row": 'row' + cnt, "ma ...

htmljqueryhtml-table

Tips for concealing JavaScript files from the Chrome Developer Tools while using Next.js

Currently working on a project using Next.js. I've noticed that the utils/components are quite visible through the Chrome Developer Tools, as shown in this image: https://i.sstatic.net/jaLmg.png Is there a way to hide them from being easily accessib ...

javascriptreactjsnext.jsnext.js13

Having trouble with my findIndex function in Node.js while working with a mongo DB database

I am having difficulty finding the index of a specific product in a MongoDB database. const cart = await this.model.findOne({ user: { $eq: user } }); if (cart) { const itemFound = cart.products.findIndex( (item) => item._id === ...

javascriptnode.jsmongodbexpressmongoose

The environmental variable remains undefined even after it has been established

I've been experimenting with setting my environment variable in the package.json file so that I can access it in my server.js file. Despite trying NODE_ENV=development, set NODE_ENV=development, cross-env NODE_ENV=development, and export NODE_ENV=deve ...

javascriptnode.jsexpressenvironment-variablespackage.json

Using angularjs to include content from other files is known as

As I delve into the concept of creating directives in AngularJS, I am faced with the imminent end of Angular 1.x and the rise of Angular 2.x. The shift seems daunting, but I am determined to bridge this gap seamlessly. In my quest for clarity, I stumbled ...

javascriptangularjs

Upon attempting to utilize Socket.io with Next.JS custom server, the server repeatedly restarts due to the error message "address already in

Every time I attempt to execute the refreshStock() function within an API endpoint /api/seller/deactivate, I encounter the following error: Error: listen EADDRINUSE: address already in use :::3000 at Server.setupListenHandle [as _listen2] (net.js:1318: ...

javascriptnode.jssocket.ionext.js

Can someone provide instructions on how to convert base64 data to an image file

I'm utilizing the vue-signature Library but I am unsure how to download the base64 data that is generated as an image. Here is the link to the library: https://www.npmjs.com/package/vue-signature. I have gone through the documentation and noticed that ...

javascriptimagevue.jsbase64digital-signature

What are some effective strategies for working with arrays and forms in PHP and JQuery?

In my MySQL database table, each row has a unique ID identifier: id text cat 4 abc 1 233 bbb 2 45 efa 1 With PHP, I generate an HTML table displaying the TEXT and CAT fields. The table rows are creat ...

phpjqueryformswhile-loop

Can you please adjust the image to the right side?

I'm having trouble aligning the image to the left in my code. It always seems to leave a margin on the sides that I can't figure out how to get rid of. https://i.sstatic.net/kKwII.jpg This is the snippet of my code: <section class="conta ...

htmlsass

AngularJS's support for html5mode on GitHub pages is now available

Is it feasible for GitHub pages to accommodate AngularJS in html5mode? I came across a source online suggesting that it can be done with a fallback page for 404 errors. However, this solution seems flawed as it may result in multiple 404 errors, which wou ...

javascriptangularjshtmlgithub-pages

The Art of Mass Updating Embedded Documents in MongoDB

Struggling with updating an embedded document in MongoDB using Bulk updates on version 3.0. Any assistance would be greatly appreciated. ...

javascriptnode.jsmongodbbulk

Dispatching current to the default case of the switch statement

Hello everyone, I wanted to share a snippet from my JS file: function passDataToPHP() { endpoint = 'myfile.php'; parameters = ''; parameters += 'action=passData'; parameters += '&myfield='+someV ...

phpjqueryajaxswitch-statement