I want to make the list items in the following example focusable with CSS ideally to make the menu accessible for people using keyboards. Is this possible?
http://jsfiddle.net/Etr4F/612/
CSS (the rest of the CSS is in the above link ):
div {
margin: 10px;
padding: 10px;
border: 2px solid purple;
width: 200px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; }
HTML:
<div>
Select
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Try this out: http://jsfiddle.net/peterjmag/EnVCf/6/
In order to get this to work, the parent list item needs to be focusable. One way to do that is just to make it a link like I did for this example, but if you don't want it to be a link, you can also make it focusable by adding a tabindex attribute. (Here's an example using tabindex: http://jsfiddle.net/peterjmag/EnVCf/8/.)
HTML
<input>Click here first then try and tab down through below menu items without clicking on the purple box with your cursor. How can I achieve this with CSS?</input>
<ul class="nav">
<li>
Select
<ul class="dropdown">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
CSS
.nav {
margin: 10px;
padding: 10px;
border: 2px solid purple;
width: 200px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.nav > li > .dropdown {
display: none;
}
.nav > li:hover > .dropdown,
.nav > li.hover > .dropdown {
display: block;
background: #f9f9f9;
border-top: 1px solid purple;
}
.dropdown > li {
padding: 5px;
border-bottom: 1px solid #4f4f4f;
}
.dropdown > li:hover,
.dropdown > li.hover {
background: white;
}
.dropdown > li:hover > a,
.dropdown > li.hover > a {
color: red;
}
(Note the additional li.hover selectors here, which you need in order to fake the hover state on keyboard focus.)
jQuery
$.fn.accessibleDropDown = function () {
var el = $(this);
/* Make dropdown menus keyboard accessible */
$("a", el).on("focus", function() {
$(this).parents("li").addClass("hover");
}).blur(function() {
$(this).parents("li").removeClass("hover");
});
}
$(".nav").accessibleDropDown();
I used jQuery 1.9 for this example (and updated the event handler to match), but it should work as is back to 1.7. I adapted it from this blog post: http://uablogs.missouri.edu/interface/2011/08/keyboard-accessible/
Related
I want a sub menu to be able to be shown when the cursor is hovered over but at the moment the sub menu is closed once the mouse is hovered over any link.
Here is the code
HTML
<div class="body">
<div class="menu">HOVER HERE</div>
<ul class="drop-down">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
CSS
.body {
width: 400px;
margin: 0 auto;
margin-top: 30vh;
font-family: Lato, sans-serif;
}
.menu {
display:block;
border: 1px solid #000;
width: 150px;
background: #000;
color:#FFF;
padding: 15px;
text-align:center;
}
ul li {
border: 1px solid #000;
width: 150px;
padding: 15px;
list-style:none;
text-align:center;
}
ul {
margin: 0;
padding: 0;
}
.drop-down {
display:none;
}
.open {
display:block;
}
JavaScript
document.addEventListener('DOMContentLoaded', function () {
var dropdownItem = document.querySelector('.menu');
var dropdown = document.querySelector('.drop-down');
dropdownItem.addEventListener('mouseenter', function (e) {
dropdown.classList.add('open');
});
dropdownItem.addEventListener('mouseleave', function () {
dropdown.classList.remove('open');
})
})
Codepen is here
https://codepen.io/Kenneman/pen/yLLPmeX
This problem has been solved a thousand times on SO, and virtually every CSS-only menu demonstrates how it's done. The submenu must be inside the hovered element. No JavaScript is necessary:
.menu:hover ul {
display: block;
}
Demo
You'll have to fiddle with styling to get the submenu background fixed, but that's the idea.
There is a dropdown menu, you need to do to submenu falls with a delay.
This is an [example][1] of how I implemented at the moment.
As soon as the button the mouse is over using setTimeout launching the countdown until the menu appears, if the cursor is removed from button, then cancel the timeout using clearTimeout.
Can't understand why it doesn't work.
Transition not working with display: none, so that's not an option.
how to fix to get it working?
The CSS transitions won't work with display: block; or display: none;. You can use jQuery .delay():
$(function () {
$("ul").hide();
$("a").mouseover(function () {
$("ul").delay(1000).fadeIn();
});
});
a {display: inline-block; text-decoration: none; padding: 5px; color: #000; border: 1px solid #ccc; border-radius: 3px; line-height: 1;}
.btn {margin-bottom: -1px;}
ul, li {margin: 0; padding: 0; list-style: none; border: 1px solid #ccc;}
ul {padding: 5px; background-color: #fff; width: 100px;}
ul li a {display: block; border-width: 0; border-top-width: 1px; border-radius: 0}
ul li:first-child a {border-top: 0;}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
Menu
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
I am having some issue getting a menu to .hide() after clicking on an element.
$(document).on("click", "div.dropdown", function() {
$(this).find("ul").show(0, function() {
$(this).find("li").click(function() {
var a = $(this).html();
$(this).parent().parent().find(".dropdown-title p").html(a);
$(this).parent().hide(); //Onclick won't hide the UL
});
$(this).mouseleave(function() {
$(this).hide();
});
});
return false;
});
div.dropdown {
margin: 0 20px 0 0;
float: left;
border-radius: 3px;
background: rgba(0, 0, 0, .1);
height: 50px;
line-height: 50px;
color: #999;
text-transform: uppercase;
position: relative;
}
div.dropdown div.dropdown-title {
padding: 0 20px;
display: inline-block;
cursor: pointer;
}
div.dropdown div.dropdown-title p {
margin: 0 20px 0 0;
float: left;
font-size: 12px;
}
div.dropdown div.dropdown-title span {
float: left;
}
div.dropdown ul {
position: absolute;
top: 50px;
left: 0;
width: 200px;
overflow-y: auto;
overflow-x: hidden;
border-radius: 0 0 3px 3px;
z-index: 1001;
border: 1px solid #ccc;
list-style-type: none;
padding: 0;
margin: 0;
}
div.dropdown ul li {
line-height: 32px;
background: #fff;
color: #999;
font-size: 12px;
white-space: nowrap;
text-transform: uppercase;
padding: 0 20px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<div class="dropdown-title">
<p>Sort By</p>
<span><i class="fa fa-caret-down" aria-hidden="true"></i></span>
</div>
<ul style="display: none;">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
<li>Option 7</li>
<li>Option 8</li>
</ul>
</div>
I am attempting to get the dropdown menu (the ul element) to .hide() when you click on one of the li elements in the menu, as well as when you mouseleave from the ul. Right now, just the mouseleave portion works and not when you click on one of the li elements. I am unsure of what I am overlooking, so if you see any errors or issue please let me know.
Here's the link to my fiddle
When clicking on the li the event propagating to the ul, so what really happens that the click on the li closing the list but the 'click' on the ul opens it again, you can stop the event propagation
$(document).on("click", "div.dropdown", function() {
$(this).find("ul").show(0, function() {
$(this).find("li").click(function(event) {
event.stopPropagation();
var a = $(this).html();
$(this).parent().parent().find(".dropdown-title p").html(a);
$(this).parent().hide(); //Onclick won't hide the UL
});
$(this).mouseleave(function() {
$(this).hide();
});
});
return false;
});
Lets say I have the following menu structure. I have 3 problems with it.
$('.parent ul').hide();
var current_parent;
$(document).delegate('.parent', 'click', (function() {
var $this = $(this);
if(current_parent !== undefined) {
current_parent.find('ul').slideUp();
}
current_parent = $this;
// Check if the element is visble or not
if(!$this.find('ul').is(':visible')) {
$this.find('ul').slideDown();
} else {
$this.find('ul').slideUp();
}
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="parent">menu item1
<ul>
<li class="child">Sub menu item1</li>
<li class="child parent">Sub menu item2
<ul>
<li class="child">Sub-sub menu item1</li>
</ul>
</li>
</ul>
</li>
<li class="parent">menu item2
<ul>
<li class="child">Sub menu item3</li>
</ul>
</li>
</ul>
When you click on menu item 1 the Sub-sub menu item1 is also
opened. How can this be prefented?;
When you click on Sub menu item2 the menu item1 is also closed. How can this be prefented?.
How can I make this more dynamic so that when I add deeper menu items the menu still works but without having to add things like: $('ul ul ul').slideDown(); etc.?
Could anyone help me with these problems?
Thanks in advance
You can create a drop drop down menu with jquery
I have given individual HTML, CSS and JQuery code, use it and try to understand it.
There is an outer <div id="navigation"> and inside it their is annow in it everyis main menu item andin everyis sub menu item. Furthermore you can create sub menu in sub menu also by creatingin`.
$(document).ready(function () {
$("li").click(function () {
var x = $(this).children("a:first").attr("href");
if (x != undefined)
window.location.href = x;
});
$("#nav li").hover(function () {
$(this).find("ul:first").css({
visibility: "visible",
display: "none",
}).slideDown(400);
}, function () {
$(this).find("ul:first").css({ visibility: "hidden" });
});
});
body {
font-family: Calibri, Verdana;
font-size: 16px;
color: white;
}
a {
color: inherit;
text-decoration: none;
}
#navigation {
height: 40px;
}
#nav {
list-style: none;
margin: 0px;
padding: 0px;
}
#nav ul {
list-style: none;
margin: 10px 0px 0px -5px;
padding: 0px;
display: none;
}
#nav li {
float: left;
width: 150px;
height: 30px;
padding: 10px 0px 0px 5px;
border: 0px solid transparent;
border-right-width: 1px;
border-right-color: gray;
background-color: #6397CB;
}
#nav li ul li {
width: 145px;
height: 22px;
padding: 10px 0px 8px 10px;
border: 0px solid transparent;
border-top-width: 1px;
border-top-color: gray;
}
#nav li ul li ul {
position: relative;
top: -40px;
margin-left: 145px;
color: white;
}
#nav li ul li ul li {
border: 0px solid transparent;
border-left-width: 1px;
border-left-color: gray;
border-top-width: 1px;
border-top-color: gray;
}
#nav li:hover {
background-color: lightgray;
cursor: pointer;
}
#nav li ul li:hover {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigation">
<ul id="nav">
<li>My Name</li>
<li>About U
<ul>
<li>How U?
<ul>
<li>Your Extras</li>
</ul>
</li>
<li>Howz U?</li>
</ul>
</li>
<li>More</li>
</ul>
</div>
I am facing a problem while using token input in my menu list.
on hover of menu list my sublist opens and in that when i search for tokens input box and after result i wanted to select one token but the window is being closed .. please help
<ul id="navlist">
<li>list one
<ul id="subnavlist">
<li> <input type="text" id = "test" name= "test1" size='6'></test1>
</li></ul>
</li></ul>
my css goes like this
ul#navlist li:hover
{
background-color: #ffffff;
border:1px solid #E46713;
padding-bottom:10px;
}
ul#subnavlist { display: none; }
ul#subnavlist li { float: left; }
ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 0px;
width:auto;
}
ul#navlist li:hover ul#subnavlist li
{
display: block;
border: 2px;
padding: 0px;
}