The treeview example of the WAI-ARIA Authoring Practices shows how to have a tree with some items being expandable parent nodes, and some being hyperlinks:
<ul role="tree" aria-label="Foods">
<li role="treeitem" aria-expanded="true">
<span> Fruits </span>
<ul role="group">
<li role="none"> <a role="treeitem" href="/orange"> Oranges </a> </li>
<li role="none"> <a role="treeitem" href="/pineapple"> Pineapple </a> </li>
</ul>
</li>
</ul>
However, what if I want to have a "Fruits" page too, and have a treeitem that is both a parent node and a hyperlink?
(For keyboard navigation, the pattern of Right Arrow/Left Arrow opening/closing the parent node, and Enter following the hyperlink would be used. This resembles the interaction of a combobox with a tree popup.
For mouse interaction, the current pattern would be kept: having a clickable icon (aria-hidden) indicating expanded state, which opens/closes the node, and the text of the link itself, which follows the link.)
For example:
<ul role="tree" aria-label="Foods">
<li role="none">
<a role="treeitem" aria-expanded="true" href="/fruits">
<span> Fruits </span>
<ul role="group">
<li role="none"> <a role="treeitem" href="/orange"> Oranges </a> </li>
<li role="none"> <a role="treeitem" href="/pineapple"> Pineapple </a> </li>
</ul>
</a>
</li>
</ul>
This, while technically correct, violates the HTML spec, which disallows <a> tags being nested within other <a> tags.
After much searching, I found this answer, which is about a different topic and only hints at my solution.
To have the <a> element be the treeitem, while simultaneously "containing" other <a> elements nested within groups, the aria-owns attribute can be used.
Like this, the requirement that
Each parent node contains or owns an element with role group.
is satisfied, while at the same time following the HTML spec.
<ul role="tree" aria-label="Foods">
<li role="none">
<a role="treeitem" aria-expanded="true" aria-owns="fruit-group" href="/fruits">
<span> Fruits </span>
</a>
<ul role="group" id="fruit-group">
<li role="none"> <a role="treeitem" href="/orange"> Oranges </a> </li>
<li role="none"> <a role="treeitem" href="/pineapple"> Pineapple </a> </li>
</ul>
</li>
</ul>
This is not exactly what you are looking for but I thought I would share it for anyone that is looking for something similar that accomplishes the same thing at least from the end user's perspective.
The following code has been modified from w3school's Tree View Example to have clickable arrows and parent link items besides them.
Original code: https://www.w3schools.com/howto/howto_js_treeview.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul, #myUL {
list-style-type: none;
}
#myUL {
margin: 0;
padding: 0;
}
.caret {
cursor: pointer;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.caret-down::before {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */'
transform: rotate(90deg);
}
.nested {
display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<h2>Tree View</h2>
<p>A tree view represents a hierarchical view of information, where each item can have a number of subitems.</p>
<p>Click on the arrow(s) to open or close the tree branches.</p>
<ul id="myUL">
<li><span class="caret">Beverages</span>
<ul class="nested">
<li>Water</li>
<li><span class="caret">Juice</span>
<ul class="nested">
<li>Orange Juice</li>
<li>Apple Juice</li>
</ul>
</li> <!-- End of caret Tea -->
<li><span class="caret">Tea</span>
<ul class="nested">
<li>Black Tea</li>
<li>White Tea</li>
<li><span class="caret"></span>Green Tea
<ul class="nested">
<li>Sencha</li>
<li>Gyokuro</li>
<li>Matcha</li>
<li>Pi Lo Chun</li>
</ul>
</li>
</ul>
</li> <!-- End of caret Tea -->
</ul> <!-- End of nested -->
</li> <!-- End of caret Beverage -->
</ul> <!-- End of myUL -->
<script>
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
</script>
</body>
</html>
Related
So I have multiple LI's like below as it's a menu and I am trying to create a drop-down but for some reason, my jQuery code is not working. Can someone help me?
FYI I can't change HTML as it's dynamically generating in Shopify. I can only change jQuery and CSS
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
$( document ).ready(function() {
$("ul.subLinks").addClass("inactive");
});
$('a.site-nav.lvl-1').click(function() {
$(this).find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
Your issue is $(this).find... in the a click handler - at this point, this is the a.
.find() looks at the selectors children - but the menu is not a child of the a, it's a sibling.
Change to
$(this).closest("li").find("ul.subLinks"...
(maybe $(this).next().toggleClass... with a caveat on .this() that it's always the very next element).
Updated snippet:
$('a.site-nav.lvl-1').click(function() {
$(this).closest("li").find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
</ol>
I want to hide following nav-stacked list ios class contained <li> element. I used this code for it. But it doesn't work at all. but background-color is apply for that element. Why is that. I use Bootstrap 3
.ios {
dispaly : none;
}
here is my html code:
<ul class="nav nav-sidebar nav-pills nav-stacked">
<li id="ios-parent">
<b class="fa fa-forumbee"></b> iOS
</li>
<li class="sub-menu">
<b class="fa fa-forumbee"></b> iOS1
</li>
<li class="sub-menu ios">
<b class="fa fa-forumbee"></b> iOS2
</li>
<li class="sub-menu">
<b class="fa fa-forumbee"></b> iOS3
</li>
<li class="sub-menu">
<b class="fa fa-forumbee"></b> iOS4
</li>
</ul>
you have a typo:
.ios {
display : none;
}
instead of dispaly
EDIT
Assuming that the spelling in your CSS is correct, it is probably a matter of your selector being overriden.
In Bootstrap:
.nav > li {
display: block;
}
this is more specific than your .ios selector, try replacing your one with:
.nav > .ios {
display: none;
}
which will make it specific enough to override Bootstrap styling. You can easily see what is being applied using the web inspector in your browser
I wanted to let my "Kuantan" menu to stay highlighted after i hover to their child menu which is "kiosk no.35". But i try to change few way to let it stay active but i had failed to do so. Anything i miss out on my code? Please point my wrong. Thanks
Here is the html code:
<ul class="treeview-menu">
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Kuantan
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=35" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.35</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> UTC Kuantan
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=36" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.36</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Temerloh
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=37" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.37</a></li>
</ul>
</li>
<li class="dropdown"><i class="fa fa-angle-double-right"></i> Bentong
<ul class="nav dropdown-menu" style="width:100px;height:30px">
<li><a href="chooseOption.php?kiosk=6" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.6</a></li>
</ul>
</li>
<hr/>
</ul>
Here is the css where i hover the dropdown then the dropdown-menu will came out:
/*3rd level sidebar menu */
.dropdown:hover .dropdown-menu {
display: block;
left:220px;
top:0;
}
What i want is that after i hover the dropdown and went to dropdown-menu, the dropdwn will stay highlighted. Is there possible? Sorry i'm still new to this css skill.
As explained in my comment - .dropdown should still be "highlighted" on :hover, because .dropdown-menu is nested inside it and therefore you are still hovering over .dropdown.
/* Assuming you are making nested lists display:none */
ul{
list-style: none;
}
.dropdown-menu{
display: none;
}
.dropdown:hover{
background: yellow;
}
.dropdown:hover .dropdown-menu {
display: block;
left:220px;
top:0;
}
DEMO HERE
By using jQuery this is one option with your current code (fiddle here: https://jsfiddle.net/j0wLj6z9/)
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown').hover(function(){
$(this).toggleClass('highlighted');
});
});
</script>
and your css is whatever you'd like:
.highlighted
{
background: yellow;
}
Also include jQuery in your project:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
I have set this:
list-style: none outside none;
And HTML:
<ul class="menu custompozition4">
<li class="item-507">Strategic Recruitment Solutions
</li>
<li class="item-508">Executive Recruitment
</li>
<li class="item-509">Leadership Development
</li>
<li class="item-510">Executive Capability Review
</li>
<li class="item-511">Board and Executive Coaching
</li>
<li class="item-512">Cross Cultutral Coaching
</li>
<li class="item-513">Team Enhancement & Coaching
</li>
<li class="item-514">Personnel Re-deployment
</li>
</ul>
but even though bullets are displayed. (I'm not quite sure that those are ul's bullets, because when you hover the text the "bullets" get underlined.)
Image Demo:
https://i.imgur.com/2wsnBqP.png
The third level from the menu
Have you tried setting
li {list-style-type: none;}
According to Need an unordered list without any bullets, you need to add this style to the li elements.
You can remove the "bullets" by setting the "list-style-type: none;" Like
ul
{
list-style-type: none;
}
OR
<ul class="menu custompozition4" style="list-style-type: none;">
<li class="item-507">Strategic Recruitment Solutions
</li>
<li class="item-508">Executive Recruitment
</li>
<li class="item-509">Leadership Development
</li>
<li class="item-510">Executive Capability Review
</li>
<li class="item-511">Board and Executive Coaching
</li>
<li class="item-512">Cross Cultutral Coaching
</li>
<li class="item-513">Team Enhancement & Coaching
</li>
<li class="item-514">Personnel Re-deployment
</li>
</ul>
ul.menu li a:before, ul.menu li .item:before, ul.menu li .separator:before {
content: "\2022";
font-family: FontAwesome;
margin-right: 10px;
display: inline;
vertical-align: middle;
font-size: 1.6em;
font-weight: normal;
}
Is present in your site's CSS, looks like it's coming from a compiled CSS file from within your application. Perhaps from a plugin. Changing the name of the "menu" class you are using should resolve the issue.
Visual for you - http://i.imgur.com/d533SQD.png
In my case
li {
list-style-type : none;
}
It doesn't show the bullet but leaved some space for the bullet.
I use
li {
list-style-type : '';
}
It works perfectly.
In your css file add following.
ul{
list-style-type: none;
}
you can use it this way to
{
Fdata.map((point,index) =>(
<ul style ={{listStyle:'none'}}key={index} >
<li className="text_paragraph"style={{fontSize:"0.8rem",color:"#ff1100"}}>{point.list}</li>
</ul>
))
}
Try this it works
<ul class="sub-menu" type="none">
<li class="sub-menu-list" ng-repeat="menu in list.components">
<a class="sub-menu-link">
{{ menu.component }}
</a>
</li>
</ul>
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.