Navigating through a list of items using keyboard shortcuts in HTML

Similar Question:
KeyBoard Navigation for menu using jquery

I have developed a menu using unordered list items and display it when the user presses the Enter key in the textbox. While the user can navigate through the menu using the mouse to select items, I am looking to implement keyboard navigation as well. Is there a way to achieve this using jQuery or CSS?

The structure of my menu is as follows:

<div class="services">
  <div class="items">
    <ul>                           
        <li class="mail-icon"><a href="#" id="mail"><?php echo $langmsg['mail']; ?></a></li>
        <li class="forum-icon"><a href="#" id="forum"><?php echo $langmsg['forum']; ?></a></li>
        <li class="chat-icon"><a href="#" id="chat"><?php echo $langmsg['chat']; ?></a></li>
    </ul>
  </div>
</div>

Please note that each <li> element also has a background image.

jqueryhtmlcssnavigationcontextmenu

Answer №1

Successful jsFiddle Example

Here is a solution for handling circular selection in JavaScript:

if (e.keyCode === 38) { // up arrow key
    var selected = $(".selected");
    $(".services li").removeClass("selected");

    if (selected.prev().length === 0) {
        selected.siblings().last().addClass("selected");
    } else {
        selected.prev().addClass("selected");
    }
}

CSS style to highlight the selected element:

.services li.selected {
    background-color: grey;   
}

Answer №2

Enhancing HTML functionality is a breeze! Simply utilize the "tab" key followed by the "Enter" key to achieve the desired effect. To elevate your CSS style, consider incorporating both a:hover and a:focus to maximize user interaction possibilities.

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

The sup tag does not function properly when used within the title tag

I added a sup tag inside a title tag but it doesn't seem to work. Surprisingly, the same sup tag works perfectly fine within li tags. Can anyone explain why this is happening? I tried changing the title tags to H class tags but I'm still curious ...

htmlcss

Tips on implementing ng-template within an Angular application

I'm in the process of developing a client-side angular application and have encountered an issue regarding the implementation of angular's ng-template. Currently, I have a navbar set up as follows: <nav class="navbar navbar-inverse" > ...

javascriptjqueryhtmlangularjsangularjs-templates

The tweet button is not displaying correctly on the website

Visit my website here, where I have integrated a tweet button generated from Twitter.com. It was working fine for the initial few posts, but now it is failing to load and only displaying text. I have checked the console for any JavaScript errors, but so f ...

javascriptjquerytwitter

Auto-fill input field with URL parameter values using JavaScript or jQuery

I am in possession of a URL http://www.example.com/state=survey&action=display&survey=39&zone=surveys&currency=Denmark Upon accessing the above link, a user will be directed to a new page containing a form. Within this form, there is an i ...

javascriptjqueryurlinput

Achieve full parent width with floated divs

My goal is to arrange 10 boxes horizontally on a webpage. Each box must have a minimum width of 150px and a maximum width of 299px. The challenge is to fit as many boxes as possible across the page without any gaps, ensuring that each box has an equal widt ...

htmlcssword-wrap

Utilize a drop-down selector in JavaScript to search and refine the results

Looking for a way to enhance your product search form? Consider adding an option to select a specific shop from the dropdown menu. This will allow users to search for products within a particular store if desired. <form action="#" method="get"> &l ...

javascripthtml

Warning: Datatables encountered an issue with the table ID 'example'

Good day, I am seeking clarification regarding DataTables. In a tutorial, I came across a table that can be edited "inline". I prefer the table to be in German. The code snippet for the table: <script type="text/javascript" language="javascript" ...

javascripthtmljquerydatatables

How can I retrieve the class of the parent element by referencing the child id in jQuery?

I want to trigger an alert on click from the child id <th id="first"> to the table(parent) class. alert($(this).parent('tr').attr('class')); This code helped me to get the class of the <tr>. However, when I try to get the ...

javascriptjqueryhtml

Is there an issue with $GLOBALS['HTTP_RAW_POST_DATA'] being null when using JQuery/AJAX with JSON?

I am facing a challenge with what should be a simple task. Even after hours of searching for answers online and going through the jQuery documentation, I still cannot find a solution. My struggle is to send a json string through a basic request to my ser ...

jqueryajaxjson

Using Yii2, create a button with an onclick event that executes a JsExpression

I need to submit a form with an array of elements whose number is unknown. class DynamicForm extends Model { /** var string[] */ public elements[]; } In the view where the form submission takes place, I want to include a button that triggers a Ja ...

javascriptphphtmlyii2yii2-advanced-app

The callback function fails to remove the JQuery row from the table

I am facing an issue with deleting a dynamically created row from a grid in my project. I use jQuery to send an Ajax request to the server to delete the corresponding data from the database. If the deletion is successful, I want to remove the row from th ...

jqueryajax

Retrieve data from a text file using ajax and then return the string to an HTML document

Just starting out with ajax, I have a text file containing number values For example, in ids.txt, 12345 maps to 54321 12345,54321 23456,65432 34567,76543 45678,87654 56789,98765 Here is the Html code snippet I am using <html><body> < ...

javascriptjqueryhtmlajax

Extracting data from multiple web pages with R - An extensive collection of tables

Looking for assistance in extracting data from a website with multiple pages and importing it into R. Can anyone help me with this task? Website: ...

htmlrjsonxmlweb-scraping

Using JQUERY to create a smooth sliding transition as images change

Currently, I have set up three images (1.jpg, 2.jpg, 3.jpg) along with an image using the code: <img id="add" src="1.jpg"></img>. The width, height, and position of this additional image are adjusted as needed and are functioning correctly. Fur ...

javascriptjquerycssajaxhtml

table rows are styled with hover effects and alternating colors using CSS

Styles for even and odd table rows are set, but hovering over the table rows is not working. Test it out here: http://jsfiddle.net/w7brN/ CSS style : #table_even tr:hover { background-color:#fffbae!important; } /* hover effect */ #table_even tr:nth-ch ...

htmlcss

Unable to make the Show/Hide Loading GIF function work as intended

Could someone please help me with my code? I'm trying to display a loading GIF image while waiting for an ajax request to complete. When the button is pressed, I want the loader to be shown until the data is returned from the server. I would greatly ...

jqueryhtmlcssajax

Angular 11.0.3 displaying ngClass issue (Unable to bind ngClass as it is not recognized as a property of div)

While working on an angular project, I implemented a light and dark theme using mat-slide-toggle to switch between themes. The theme is stored as a boolean called isDark in a Behavioral Subject service. There are two lazy-loaded modules - one for the home ...

htmlangulartypescriptsass

Arranging date and time in jQuery based on AM/PM notation

I have written some JavaScript code to sort dates in ascending order (from newest to oldest). I have successfully sorted the dates, but I am having trouble sorting the time with AM or PM using a 12-hour format. I can do it in a 24-hour format, but not in ...

javascriptjqueryhtmljquery-ui

The issue regarding the fixed table layout bug in Firefox

Upon testing Firefox 5, it has come to my notice that an additional pixel of space is being added between the right column and the table border due to this particular piece of code: <style type="text/css"> table { border: 1px s ...

htmlcssfirefoxhtml-table

Only the first element can trigger reactions in jQuery and Ajax!

I am facing an issue on this particular page where I have several forms that can be optionally submitted using ajax. The problem lies in the fact that only the first element selected by jQuery is getting executed! Below is the JavaScript code: $(function ...

javascriptjqueryajaxcoldfusion