Can't get a <li> tag to stay highlighted when it has focus
I have a nav bar in which I'm trying to get the <li> elements to behave in a way that they change colors when it has focus. I can't seem to make that work. It' won't keep the focused color. Here is my CSS below:
Code:
a:focus {
color: #d63a3a;
}
.categories li {
font-size: 22px;
font-weight: 600;
margin: 3px 25px;
text-align: center;
display: inline-block;
text-shadow: 1px 1px #026cab;
color: #fff;
}
.categories li:link,
.categories li:visited {
color: #d63a3a;
padding-bottom: 3px;
border-bottom: 3px solid transparent;
}
.categories li:active,
.categories li:hover {
color: #d63a3a;
transition: border-bottom 0.3s;
}
Re: Can't get a <li> tag to stay highlighted when it has focus
Not sure what you mean. The following code makes the text red when I hover over each word... is that what you want?
Code:
<html>
<head>
<style type="text/css">
a:hover {
color: #d63a3a;
}
.categories li {
font-size: 22px;
font-weight: 600;
margin: 3px 25px;
text-align: center;
display: inline-block;
text-shadow: 1px 1px #026cab;
color: #fff;
}
.categories li:link,
.categories li:visited {
color: #d63a3a;
padding-bottom: 3px;
border-bottom: 3px solid transparent;
}
.categories li:active,
.categories li:hover {
color: #d63a3a;
transition: border-bottom 0.3s;
}
</style>
</head>
<body>
<ul class="categories">
<li>Test1</li>
<li>Test2</li>
</ul>
</body>
</html>
Re: Can't get a <li> tag to stay highlighted when it has focus
Yes, I want it to be read when the link is hovered but I want it to stay red until another link is clicked. I'm thinking that has to do with the "focus"?
Re: Can't get a <li> tag to stay highlighted when it has focus
Is this what you want? Note that this will only work like this when you've clicked on the element.. if you click anywhere else on the page it will unfocus. The difference here being adding the tabindex
Code:
<html>
<head>
<style type="text/css">
a:hover {
color: #d63a3a;
}
.categories li {
font-size: 22px;
font-weight: 600;
margin: 3px 25px;
text-align: center;
display: inline-block;
text-shadow: 1px 1px #026cab;
color: #fff;
}
.categories li:link,
.categories li:visited {
color: #d63a3a;
padding-bottom: 3px;
border-bottom: 3px solid transparent;
}
.categories li:active,
.categories li:hover,
.categories li:focus {
color: #d63a3a;
transition: border-bottom 0.3s;
}
</style>
</head>
<body>
<ul class="categories">
<li tabindex="0">Test1</li>
<li tabindex="1">Test2</li>
</ul>
</body>
</html>
Re: Can't get a <li> tag to stay highlighted when it has focus
Unfortunately that's not working. If you look at the attached image, you'll see a menu item highlighted red. Everytime a menu item is clicked on, I want it to STAY RED until another menu item is clicked on. Hope that helps!
Re: Can't get a <li> tag to stay highlighted when it has focus
A menu item or anywhere on the screen?
I assume your use case is that you want the current menu item to be selected, so when the page loads, it shows the current page as "active." If you want it to stay red until someone clicks into another page then you either need to do it via javascript or add the class server-side, depending on how your application is built.
Re: Can't get a <li> tag to stay highlighted when it has focus
Ok, I think I may have explained it wrong. When the page initially loads, all the menu items are white. When a menu item is clicked on, I want it to stay red until another menu item is clicked, it's basically just toggling the menu items and whichever one was the most recently clicked, that one needs to stay RED.
Re: Can't get a <li> tag to stay highlighted when it has focus
Yeah I understand that, but when you click a menu item, does the page reload and bring you to another page? If so, CSS will not handle that, you have to add the class via javascript or server-side.
Does your page reload when you click a menu item? Or are you talking sub-menu items right now or something?
If you could post your page markup so I could run it, I could tell you what you have to do.
Re: Can't get a <li> tag to stay highlighted when it has focus
Ii'd add a CSS class "current" and set it on the currently selected li item when it's clicked and clear it from the others.
-tg
Re: Can't get a <li> tag to stay highlighted when it has focus
Hi techgnome,
I see what you mean here and it makes sense. However, my javascript isn't real sharp. I'm adding an onclick event to the <a> tag for each <li>. What do I pass in the function call that indicates which <li> I'm using. Once in the function, how should I reference the passed parameter?
Thanks,
1 Attachment(s)
Re: Can't get a <li> tag to stay highlighted when it has focus
Ok,
I've created a javascript function that should allow for the class to be added. However, I'm terrible with JS and am having issues with this function. Here it is:
Code:
function addMenuClass(id) {
//id is the actual <li> element id
var x = id;
//Get all <li> elements
var li = document.querySelectorAll("li");
for (var i=0; i<li.length; i++) {
li[i].classList.remove(".current");
}
//This alert will display 6 different <li> tag ID's: a1, a2, a3, a4, a5, a6
alert(x);
//Blows up on this statement (see attached screenshot)
x.classList.add(".current");
}
Re: Can't get a <li> tag to stay highlighted when it has focus
IT looks like you're passing in the id of the LI .... not the LI itself... the id has no class... so x.classList doesn't work... that doesn't return anything. You need to pass in the actual li element, not its id. How are you calling the addMenuClass?
-tg
Re: Can't get a <li> tag to stay highlighted when it has focus
Hi there blakemckenna.
does this help...
Code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled Document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
.highlighted {
color: #f00;
outline: 1px dotted #f00;
}
</style>
</head>
<body>
<ul id="list">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
<script>
( function( d ) {
'use strict';
var c,k,
lst = d.getElementById( 'list' ),
el = lst.querySelectorAll( 'li' );
for ( c = 0; c < el.length; c ++ ) {
el[ c ].setAttribute( 'tabindex', 0);
el[ c ].addEventListener( 'focus', highlight( c ), false);
}
function highlight( c ) {
el[ c ].onfocus = function() {
for ( k = 0; k < el.length; k ++ ) {
el[k].classList.remove( 'highlighted' );
}
el[c].classList.add( 'highlighted' );
}
}
} ( document ) );
</script>
</body>
</html>
Re: Can't get a <li> tag to stay highlighted when it has focus
Hello....
please try below code
Code:
function addMenuClass(li_id)
{
var x =li_id
var li = document.querySelectorAll("li");
for (var i=0; i<li.length; i++)
{
li[i].classList.remove(".current");
}
alert(x);
x.classList.add(".current");
}
