Is it feasible to navigate through submenus using only the [Tab] key in CSS?

Is there a way to activate a submenu in a styled menu using only the [Tab] key so that the submenu becomes visible?

I attempted to use the :focus pseudo-class

ul
    li
        a:focus
        +
        ul
            li
                a ...

and when the submenu is selected:

ul
    li
        a (?)
        +
        ul
            li
                a:focus ...

Unfortunately, I couldn't figure out how to select the active node with CSS

Take a look at this: http://jsfiddle.net/iegik/DKvH2/

htmlcssfocusaccessibility

Answer №1

In order to make the entire submenu visible when a submenu item is focused, it seems that JavaScript may be necessary. If you only require the focused element to be visible, you can experiment with the following approach:

.links > li:not(:hover) li a:focus {
    left: 9999em;
    position: relative;
}

Using this code will reposition the focused element to its original place if it has not already been adjusted by the :hover pseudo-class.

http://jsfiddle.net/DKvH2/1/

Answer №2

Your tabindex should be functioning properly.

HTML

<ul class="links">
        <li tabindex="1">
            <a href="#i1">Item 1</a>
        </li>
            <li tabindex="2">
            <a href="#i2">Item 2</a>
            <ul class="links">
                <li><a href="#i2-1">Item 2.1</a></li>
                <li><a href="#i2-1">Item 2.2</a></li>
            </ul>
        </li>
    </ul>

CSS

.links > li:focus a + ul{top:auto}

I have provided an example here: http://jsfiddle.net/DKvH2/3/

Check out this article: http://css-tricks.com/expanding-images-html5/

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

Tips on utilizing jQuery or JavaScript to efficiently filter out outcomes exceeding a specified range

<input type="range" name="rangeInput" min="100000" max="750000" onchange="updateTextInput(this.value);"> Displayed above is the slider code that provides a value output below. <div id="sliderValue"> <p>Max Value £</p> <input t ...

javascriptjqueryhtmlinput

The issue with the background-size: contain property not functioning properly across different browsers is causing

Hey there! I have created a gallery using a DIV element with a changing background image depending on the preview image or text that is clicked on. Since the pictures in the gallery are of different sizes, I decided to use "background-size: contain". The ...

cssbackgroundswitch-statementcontain

How can I align 2 images side by side at the top and 1 beside them at the

I'm attempting to recreate an image using Bootstrap to minimize the need for additional CSS. The image I'm trying to replicate can be viewed https://i.sstatic.net/gBaVo.png. I've been struggling with the code and haven't been able to ge ...

htmltwitter-bootstrap

Having trouble displaying dynamically added images in my jsx-react component. The images are not showing up as expected

import React from "react"; import ReactDOM from "react-dom"; var bImg = prompt("Enter the URL of the image you want to set as the background:"); const bStyle = { backgroundImage: "url(bImg)"; // The link is stored ...

javascriptcssreactjsjsx

Is there a way to implement word wrapping in li text without making any changes to its width

Is there a method to wrap the content inside li elements without modifying their width? As an illustration, consider the following structure - <ul> <li>Text Example</li> <li>Text Example</li> <li>Text Exampl ...

javascripthtmljquerycss

Hey there! I'm experiencing an issue with the jquery function $(this).childen().val()

Here is my HTML and JS/jQuery code: (function($) { $('.list-group li').click(function(){ console.log("push li"); console.log($(this).attr('class')); console.log($(this).children('.hidden_input&ap ...

javascripthtmljquery

Saving the retrieved data from a JQuery $.post request into a JavaScript global variable

Currently utilizing Javascript and JQuery. A declaration of a Variable var RoleID=""; is stationed outside all functions. There exists a function: role_submit(){ var role=$('#emp_role').val(); var url="submitrole.php"; $.post(url, {role2: rol ...

javascriptphpjqueryhtmlajax

Center-align the items in an owl carousel

My website uses owl carousel to display images fetched through PHP. The challenge is that the number of items is unpredictable, and sometimes there are fewer images than the default 10. As a result, the images align to the left instead of being centered. H ...

jqueryhtmlcssowl-carousel

Transforming Button style in jQuery Mobile version 1.3.0

There are reports of a new function in jQuery Mobile 1.3.0 that allows for dynamically changing button themes using JavaScript: http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/ However, upon attempting to run the provided code snippe ...

jqueryhtmlcssjquery-mobilejquery-mobile-button

Using v-model in Vue 3 will result in modifications to the table class in Bootstrap 5

Below is a snippet of the code I wrote: <table class="table table-striped"> <tr class="table-dark"> <th>#</th> <th>Column 1</th> <th colspan="3">Column 2</th> </tr> <tr ...

javascripthtmlcssvuejs3bootstrap-5

What are the best methods for preserving paint color when changing wheel styles, and vice versa?

I posted this query about a year ago, but I did not have a fiddle prepared at that time and my question was not as well articulated as it could have been. Despite that, many people came forward to offer their help, and I am truly grateful for that. This ti ...

javascripthtmlcssimagelogic

Is there a way to dynamically change select2 styling using code when a form is submitted?

Having trouble highlighting empty select2 selects when a form is submitted? I'm struggling to override my existing CSS styling upon document load. Check out my jQuery attempt: var $requiredUnfilledItems = $(".required:not(.filled)"); if ($requiredUn ...

jquerycsscss-selectorsjquery-select2

Develop a container element with protective measures against external CSS styles impacting internal elements

As I work on integrating my webpage code into a large project, I have encountered an issue. The entire project code is contained within a div element inside the <main> tag. However, when I add this container div within the <main> tag, the pro ...

htmlcss

Can you provide guidance on how to successfully transfer an array of JSON objects from the script section of an HTML file to the JavaScript

My webpage contains an array of JSON objects that I need to send to the server. The array, stored in a variable called results, appears normal when checked in the console before trying to POST it. Here is a sample of the data: 0: {id: 02934, uName: "Ben", ...

javascriptjqueryhtmlarraysjson

javascript include new attribute adjustment

I am working with this JavaScript code snippet: <script> $('.tile').on('click', function () { $(".tile").addClass("flipOutX"); setTimeout(function(){ $(".tile-group.main").css({ marginLeft:"-40px", widt ...

javascriptjquerycssclass

Fluctuating problem arises when placing one div over another div while hovering

Sorry if the title isn't clear. Basically, I have a div that when hovered over, triggers another div to appear with display:block, showing it above the original div. It works well but there is some flickering when moving the cursor over the second div ...

htmlcss

How can you use the transform property in CSS to rotate the dropdown arrow by 180 degrees and move it vertically by 2 pixels?

gradeexpanded:false, gradeOnClick: function (event) { this.gradeexpanded = !this.gradeexpanded; }, .dropdown-check-list { margin-left: 35px; displa ...

htmlcssvue.js

What is the best way to save data in order to effectively showcase a collection of images that together form a single entity in a game

Apologies for the unclear title, I struggled to find the right words. Recently, I delved into the world of 2D game development and was amazed by the capabilities of HTML5's Canvas element. Currently, I am working on my first basic project to grasp th ...

javascripthtmlcanvas

Issue with React/Next.js input field rejecting commas

I'm experiencing a problem with an input field in my React application that was developed using Next.js. The issue arises specifically when using an iPad device, where the input field behaves inconsistently when dealing with commas. When using deskto ...

htmlreactjstypescriptnext.js

In what way could the border exceed the dimensions of the div?

<head> <meta charset="UTF-8"> <title>Document</title> <style> #Tri{ width:0px; height:0px; border-top: 50px solid yellow; border-right:50px solid red; border-bottom:50px solid green; border-left:50px solid blue; } </style&g ...

htmlcss