I have this menu:
<div id="menu-home">
<ul>
<li> a </li>
</ul>
</div>
When I am on the test.php page that corresponds to test menu, I need it's li to have a different style..
I tried
#menu-home ul li:active
but it didn't work..
Thanks
There is no :active state for <li>
Instead you can do it with PHP.
<div id="menu-home">
<ul>
<li <?php if (page is current page) echo ' class="active"';?>> a </li>
</ul>
</div>
And in the CSS, you can give this:
#menu-home ul li.active {}
The <li> element does not have an active state, since it is just meant to be a (stateless) bullet point. The selector :active can only be used on a link; an example can be found here.
However, :active will only highlight the link as it is clicked. After that, it performs whatever action and/or navigation it is set to do and then the link will be visited. From there on you can't tell it apart from the other already visited pages that you are not currently viewing and it does not become "unvisited" again, even if you navigate to another page. So this does not do what you intend.
Instead, I would create a class .active in your CSS where you can define all your custom styling. Then, the PHP that generates your pages needs to take care of setting the class correctly on the selected menu item, ie.: attach class="active" it either to the <li> or the <a> whenever the menu is build.
(yeah, just see Praveen's answer for the code ^^)
Related
Logic escapes me for two days on what I'm trying to achieve, which is targeting certain class elements in the wordpress menu with CSS. It is usually simple really for me, but something (small usually) is making me battle.
I need to apply a small background image behind the menu item text to the "active" or "current" menu item. But this must apply ONLY to the parent menu items (not on any of the child/submenu dropdown items). Applying the background image is fine, so that's not the issue. It's targeting only on the parent item that's the issue.
I've tried variations of the following CSS (forgot about the background image for now, I'm keeping it simple here, to resolve the targeting) to make the current/active PARENT menu item text turn red:
.main-navigation div ul li.current-menu-parent a:not(.sub-menu)
{color: red !important;}
(I have commented out this custom CSS on the website, to prevent confusion)
The :not pseudo I thought would do the trick but it's possibly my failure at syntax, even though I googled it, to which I may learn something further about CSS today, when resolved.
It's not working how I expect it to. Any ideas? I might revert back here again if I battle with the background image, but I suspect once the 'CSS targeting' is worked out, that shouldn't be an issue to apply.
Thank you brainy people :)
The answer is more simple than you think: use the > CSS selector. See articles here and here.
For example:
Codepen
/* Target top level only */
.my_navigation > li > a {
background-color: yellow;
}
/* Or perhaps target only top-level with children */
.my_navigation > .has_children > a {
background-color: orange;
}
<div>
<h1>Only top-level parents get styled:</h1>
<ul class="my_navigation">
<li>Link 1</li>
<li class="current_link has_children">
Link 2
<ul>
<li>Link 2a</li>
<li class="current_link has_children">Link 2b
<ul>
<li>Link I</li>
<li>Link II</li>
</ul>
</li>
<li>Link 2c</li>
<li>Link 2d</li>
</ul>
</li>
<li>
Link 3
<ul>
<li>Link 3a</li>
<li>Link 3b</li>
</ul>
</li>
<li><a href="#">Link 4</li>
</ul>
</div>
Using Javascript (e.g. jQuery) is overkill in this case. It would be a different story if you're using an eventlistener and need to get the parent of the clicked target; in that case you DO need JS because as others have mentioned CSS doesn't yet have a parent selector yet (but it seems like it's coming in CSS4).
However here you just need to style items on page rendering, and WP provides plethora of classes to work with. Also: Do a Google search for "wordpress menu class walker function" and you can generate some more classes, like identify each level of menu e.g. ".top-level", ".second-level", etc.
try below, this will select the a tag which is direct child of li.current-menu-parent.
.main-navigation div ul li.current-menu-parent > a{color: red !important;}
Seems jQuery was the way to go for the solution, based on the thread Is there a CSS parent selector? posted by #Paulie_D, thank you!
My jQuery solution below targeting only the active parent menu item and inserting a small background image on the <li> menu tag. You can see the yellow 'paint swish' image happening in the screenshot below.
The .not is used to exclude targeting the dropdown submenu items (their class is .sub-menu):
$('.main-navigation .current-menu-item, .main-navigation .current-menu-parent').not('.sub-menu li').css(
{
'background-image':'url(PATH TO YOUR IMAGE HERE)',
'background-size': '100% 50px',
'background-repeat': 'no-repeat',
'background-position': 'center'
}
);
Thanks for your input. I learnt something today.
in my site i have menu and sub menu
my problem when i focus by tab to the menu, the menu opened like i hovered the menu by mouse.
but when i continued to the sub menu elements with tab the menu closed.
how can i keep the menu open if some of sub element is focused.
of course i can do it via javascript, but i want to know if i can do it with css only.
here is example (try go to links with 'tab' )
li.main{
float:left;
width:200px;
}
li .sub{
display:none;
}
li:hover .sub{
display:block
}
li.main:focus .sub{
display:block
}
<ul>
<li class="main" tabindex="0">
First menu
<div class='sub'>
<ul>
<li>First Link </li>
<li>Second Link </li>
</ul>
</div>
</li> <li class="main" tabindex="0">
Second menu
<div class='sub'>
<ul>
<li>Third Link </li>
<li>Forth Link </li>
</ul>
</div>
</li>
</ul>
With the current possibilities of CSS, you can't, as it was discussed in a lot of questions before (see accessible css dropdown menu for instance).
First of all, you can't use "display:none" in such approach because the link can't be accessed using the next link shortcut (tab key in most of the browsers implementation).
Solutions which work will imply solutions like positioning out of screen. It will restrict the view on screen to the current link as there is no parent() selector in CSS, or you might use a trick like in the above thread (which will work in some browsers and limit the width of the dropdown part).
But no matter the solution, it will not resolve the main problem : a dropdown menu is not the best way to achieve accessibility.
For instance, people with disabilities using eye tracking software will never benefit of a dropdown menu. Neither will people using tablet.
It is always something difficult to use, difficult to understand : What if I click on the category link? Does it open the category main page, or does it open the submenu?
If you really want an accessible menu, do not use a dropdown menu
I don't know what I am looking for, but when pressing an item, the two others changes for a black background, I can't figure out which rule is applied on those two "not pressed items".
I tried setting active / focus states on the pressed element but had nothing to do with it.
It's a simple bootstrap 3 menu built with the following code:
<ul class="nav navbar-nav navbar-right">
<li>
<a class="user-display-name" href="/galaxy/profile">Pascal Lalonde</a>
</li>
<li><a data-current-locale="en" href="/galaxy/repos?locale=fr">FR</a></li>
<li class="open">
<a class="dropdown-toggle" data-toggle="dropdown" href="/galaxy/"><span class="glyphicon glyphicon-home"></span><i class="fa fa-caret-down borderless"></i></a>
<ul class="dropdown-menu">
<li>
Repository
</li>
<li>TDP</li>
<li>RK</li>
</ul>
</li>
</ul>
What is it I am missing?
Here's the screenshot of the behavior:
[EDIT]
I am being asked to provide sample CSS code, but if I could, this would mean that I'd already have my answer. I don't know what I am looking for.
I am trying to debug the behavior so I can find what is causing this to happen.
Thing is this happens only when I actually press on the "TDP" option, I cannot debug in the console while "pressing" on the item, because a click triggers the link to continue.
So my question here, is what kind of CSS rule could be applied when an item is pressed? If nothing is there, would this mean that Bootstrap actually execute something when pressing on it? It tried looking at the dropdown javascript code, did not see anything like it.
[EDIT #2]
Just realized this happens in the template I am using.
Click here to see.
Choose the user option in the top right menu and then just "press" any of the shown options. All others will be displayed black.
[EDIT #3]
It seems the other elements gets "activated" while pressing the other menu options, this causing the background of the not-pressed items of the menu to change. I still don't understand why forcing the :active state through the browser doesn't apply the css rules, but this fixed what I "don't understand yet"
.navbar .navbar-nav li .dropdown-menu:active {
background-color: #fff;
}
As said by Schmalzy you have a custom CSS it would be nice if you can include that in the question.
Or you can try to change .dropdown-menu > li > a:hover { background-color: transparent; }
Let me if that helps
I have a menu that will be automatically created in an asp.net page. I'm trying to use a pure CSS cross browser menu but how can i set it so that each subsequent child is autohiden/shown w/o having to define the style for each level of the menu.
Is this the only way to accomplish this with css?
Essentially im looking for a way to use css to show/hide the child menu items w/o having to define the style for every level - especially since i dont know how many levels there will be.
you should be able to do it by only specifying down to the second level
<html>
<head>
<style>
.mnusub li ul{ display:none; }
.mnusub li:hover > ul{ display: block; }
</style>
</head>
<body>
<ul class="mnusub">
<li>test1
<ul class="mnusub">
<li>test2</li>
<li>test11
<ul class="mnusub">
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ul>
</li>
</ul>
</li>
<li>test5
<ul class="mnusub">
<li>test6</li>
<li>test7</li>
<li>test8</li>
</ul>
</li>
<li>test9</li>
<li>test10</li>
</ul>
</body>
</html>
The key here is the ">" selector as it specifies direct descendants and not sub-descendants
enjoy
When you want to affect each child individually, but without having to make style rules for each of those children, then you need more logic, which CSS doesn't provide. You could use something like PHP for that logic, or you could go with Javascript/jQuery. In that case, you can toggle CSS classes on child[x] through jQuery, and you only need to style those classes. Then it wouldn't matter which child got the class, it would be styled accordingly. Note that you should first make sure your menu is at least usable without Javascript, so users aren't dependent upon it.
I'm using SIFR 3.0 in combination with suckerfish popup menus. I only want to SIFR the top level li's and not apply the effect to the nested ones. I'm also using WordPress, so restructuring the menu, like wrapping the parent in a <div> or other object is too hard (I'm still figuring out the basics of WordPress).
Is there a way to turn SIFR
ON for ul#menu li
but OFF for ul#menu li li ?
Other things I've tried that haven't worked is applying a class or id to the parent <li class="top-level"> or <li id="top-level">--that didn't stop the SIFR, it still grabbed the children.
Thanks so much for the help.
I'm going to assume your HTML structure is like this:
<ul id="menu">
<li>
My link
<ul>
<li>My submenu item</li>
</ul>
</li>
</ul>
When you replace ul#menu li, you will replace the entire content of the <li> element. Unfortunately this also includes the submenu. The solution is to replace just the link, but note that you can't directly replace <a> elements.
Therefore:
<ul id="menu">
<li>
<span>My link</span>
<ul>
<li>My submenu item</li>
</ul>
</li>
</ul>
And replace ul#menu > li span.
Finally there is the question whether the Suckerfish menus actually work if the events have to come through sIFR. I suspect it won't, meaning you're probably better off not using sIFR here.
This can be done with the CSS child selector:
ul#menu > li
this will only select li elements that are direct children of ul#menu. This should work in all standards complient browsers, and IE7+.
For IE6 there are a few hacks you can do to fake it, although I prefer to use jQuery to make up for selectors it doesn't support:
$('ul#menu > li').css({ ... });
which you can place in conditional comments.
If you download the uncompressed sifr source, and also have jQuery or are good with javascript you can probably put a conditional in at around line 491 of the sifr code along the lines of
if ($(node).parent().parent().parent().attr('id', 'menu')) {continue;}
I'm not great at jQuery, and I'm also not sure what kind of object the nodes that sifr runs through are, but in theory something like the above should make waht you want possible.