I am currently trying to add arrow indicators on my navigation menu for items which have submenu options.
Currently I am using this CSS:
.mainNav li > a:after {
color: #444;
content: ' ▾';
}
But this adds a dropdown arrow to every <li> regardless of if there is a submenu or not. Is there a way with just CSS to only add this arrow to items that have sub-items?
Thanks!
No. CSS has no contains child selector. You'd probably be better to just add a class to the li element. For example:
<li class="has-child">
The Link
<ul class="child">
<li>Child 1</li>
</ul>
</li>
Your CSS selector would in turn look like:
.mainNav li.has-child > a:after {
color: #444;
content: ' ▾';
}
You could have jQuery add the class for you, if that's an option:
$('.mainNav li:has(ul)').addClass('has-child');
jsFiddle Demo
CSS has no contains child selector.
However it has various sibling selectors, only-child and not(:only-child)
Since you add indicator to the anchor, use following CSS
.mainNav li>a:not(:only-child):after {
color: #444;
content: ' ▾';
}
<div class="mainNav">
<li>
The item with child
<ul class="child">
<li>Child 1</li>
</ul>
</li>
<li>
No child item
</li>
</div>
Yes you can without any jQuery : https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/
Related
I'm trying to remove the content of an :after pseudo element of an a:link from a bunch of nested un-ordered lists. I can't seem to select it though.
How can I select the last a:link for this dynamically created navigation list? Thanks.
HTML
<nav class="site-nav children-links">
<span class="parent-link">
<a href="http://localhost/learnwebcode/index.php/sample-grandparent/">
Sample grandparent
</a>
</span>
<ul>
<li class="page_item page-item-2 page_item_has_children current_page_item">Sample Parent Page
<ul class="children">
<li class="page_item page-item-16">
Sample child one
</li>
<li class="page_item page-item-18">
Sample child two
</li>
</ul>
</li>
</ul>
</nav>
CSS
.children-links a:after {
content: "➤";
}
.children-links ul:last-child li a:last-child:after {
content: "";
}
Based on your given structure, you have to select the last list item in the .chidren ul.
The anchor links are always the last child of the li so any additional selector isn't required.
.children-links ul.children li:last-child a:after {
content: "";
}
How can I remove the underline bellow "-"? I only want the text to be underlined on Hover not the "-"
-- DEMO --
Many thanks!
HTML
<ul class="menu">
<li>
Commercial Property Management
<ul>
<li>
Industrial
</li>
<li>
Office
</li>
<li>
Retail
</li>
<li>
Shopping Centres
</li>
</ul>
</li>
<li>
Mixed-Use Residential Property Management
</li>
</ul>
CSS
ul.menu li li a:before {
content: "-";
margin-right: 8px;
}
Edit 4 years later: This answer is pretty much a low-quality duplicate of https://stackoverflow.com/a/8820459/3285730. I'd recommend going there and getting an actual explanation.
Try giving it display:inline-block;:
ul.menu li li a:before {
content: "-";
margin-right: 8px;
display:inline-block;
}
JSFiddle Demo
content of the :before selector is counted to the a-tag as it creates a pseudo-element within the element.
Add display:inline-block; to the definition to solve this issue.
Given the following HTML, what CSS rule would select and ONLY select the line that says TWO?
<ul class="menu">
<li><a>void</a></li>
<li class="active">
<a>one</a>
<ul class="sub-menu">
<li class="active"><a>two</a></li>
<li><a>three</a></li>
</ul>
</li>
</ul>
The following selector doesn't work:
.active:last-of-type {...}
Also, I must clarify that if there is no sub-menu or rather the link in the sub-menu is NOT active, then the parent menu must be selected by the same rule. In other words, given the following HTML, the same rule would highlight the line that says ONE:
<ul class="menu">
<li><a>void</a></li>
<li class="active">
<a>one</a>
<ul class="sub-menu">
<li><a>two</a></li>
<li><a>three</a></li>
</ul>
</li>
</ul>
No single selector statement will match both of your use cases (not until parent selectors are supported, anyway). You would have to include, for example, an additional class in one of those use cases in order to fulfill your requirements without your selector matching all .active elements.
Assuming the following use cases:
Active sub-menu element
<ul class="menu">
<li class="active"><a>one</a></li>
<li>
<ul class="sub-menu">
<li class="active"><a>two</a></li>
<li><a>three</a></li>
</ul>
</li>
</ul>
No active sub-menu element
<ul class="menu no-active-sub-menu">
<li class="active"><a>one</a></li>
<li>
<ul class="sub-menu">
<li><a>two</a></li>
<li><a>three</a></li>
</ul>
</li>
</ul>
The following selectors would work:
.menu .sub-menu > .active,
.menu.no-active-sub-menu > .active {
...
}
ul > ul > li:first-child
but you should nest the child UL inside the li in which case:
ul > li > ul > li:first-child
You can use this
ul ul .active {...}
Going from the code provided
Just use :last-child
ul .active:last-child {
color: green;
}
As was suggested by one of the contributors, the parent required another class to set it apart from the child(ren) menu items for this to work. I am posting my solution in case others are faced with something similar.
This is the HTML when the parent is the active page:
<ul class="menu">
<li><a>void</a></li>
<li class="active">
<a>one (parent, active page)</a>
<ul class="sub-menu">
<li><a>two (child)</a></li>
<li><a>three (child)</a></li>
</ul>
</li>
</ul>
This is the HTML when a child menu item of the parent is the active page:
<ul class="menu">
<li><a>void</a></li>
<li class="active page-parent">
<a>one (parent)</a>
<ul class="sub-menu">
<li class="active"><a>two (child, active page)</a></li>
<li><a>three (child)</a></li>
</ul>
</li>
</ul>
These are the rules I used:
/* Highlights the parent and any child
menu item under the parent when the
parent is the active page. */
ul.menu li.active a {
color: red;
}
/* Keeps the children menu items normal
when the parent is the active page.
Also keeps the parent normal when a
child menu item is the active page. */
ul.menu li.active ul.sub-menu li a,
ul.menu li.active.page-parent a {
color: black;
}
/* Highlights the child menu item that
is active */
ul.menu li.active.page-parent ul.sub-menu li.active a {
color: red;
}
It definitely is straightforward once you identify the parent state with a unique rule when one of its children menu items is active. Obviously, this would be easier if the child items didn't inherit the "active" state from the parent, but the menu system I am using behaves as described here. Thanks to everyone for their contributions.
Note: I have not tested this with a menu containing more than 1 sub-menu level deep.
I have a menu. And it has a dropdown. I want the same size of the parent for the dropdown also.
My HTML
<ul>
<li class="noChild"><a href="#" class="" >MY ACCOUNTS</a></li>
<li class="noChild "><a href="#" >LIBRARY</a></li>
<li class="">OUR DEPOSIT OFFERS
<ul>
<li class="dropdownSizeDn">OFFERS 1 </li>
<li class="dropdownSizeDn">OFFERS 2</li>
<li class="dropdownSizeDn">OFFERS 3</li>
</ul>
<li class="noChild">LOGOUT</li>
</ul>
jQuery
jQuery("#menu1 li").hover(function(){
jQuery(this).find('ul:first')
.css({
visibility: "visible",
display: "none",
marginLeft:"0px",
paddingLeft:"0px"})
.show(200);
},function(){
jQuery(this).find('ul:first').css({visibility: "hidden"});
});
From the above code I need to set the same width of "OUR DEPOSIT OFFERS" for all its childern("OFFERS 1 ","OFFERS 2 ","OFFERS 3"). Here I can do it with Jquery. Like
jQuery('.dropdownSizeDn').css('width',widthLi + "px");
On hover of the corresponding parent. But I would like to set it by CSS itself. Is there any way for this? I dont prefer any css3 fix. It has to be compatible with older browsers.
EDIT
I cant hard code the width of each child
.This is My css jsfiddle
You can set the width of each child in the drop-down to be the same fixed width of the parent i.e. width: 120px.
Covering all the bases since I don't know your CSS:
ul li ul, ul li ul li, ul li ul li a {
width: 100%;
}
trying to select an adjacent's child element with CSS... not really sure how to
This is the HTML structure
<ul>
<li>
<a href="#">
<span class="icon"></span>
First level
</a>
<ul>
<li>
Second level
</li>
</ul>
</li>
</ul>
I want to say that there is a menu with multiple levels. When theres a UL existing within a LI then the needs to have a dropdown/expand icon... so I thought if I use the adjacent selector I can determine if this level has kids to expand and this is what I thought would work but didn't:
ul li a ~ ul .icon {
// doesnt work
}
ul li a .icon ~ ul {
// doesnt work
}
This works but I need to target the .icon
ul li a ~ ul {
// works
}
Cheers, Dom
Building upon my comment on your question. If you have control over how the HTML for the menu is generated, a workaround would be to add an extra class to each li-element that has a sub-menu. Like this:
<ul>
<li class="has-submenu">
<a href="#">
<span class="icon"></span>
First level
</a>
<ul>
<li>
Second level
</li>
</ul>
</li>
</ul>
Then you could use a selector like this:
.has-submenu .icon {
/* Do your stuff here */
}
ul is a child of li, not the anchor. So ul li ul .
If you want to select it as a sibling, then ul li a + ul