I'm trying to create a dropdown menu that can be navigated by using the keyboard. I can get the first level to work by using the tab key, but have been unable to access the second level. Example can be found here https://codepen.io/jjfash/pen/oNgqEjx
The html:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="featuredTopics">
<a class="btn btn-semiTransparent dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="0">News Archive</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu pull-right dropdown-item"><a tabindex="0" href="#">2017</a>
<div class="dropdown-menu">
<ul>
<li class="dropdown-item"><a tabindex="0" href="#">Q1</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q2</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q3</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q4</a></li>
</ul>
</div>
</li>
<li class="dropdown-submenu pull-right dropdown-item"><a tabindex="0" href="#">2018</a>
<div class="dropdown-menu">
<ul>
<li class="dropdown-item"><a tabindex="0" href="#">Q1</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q2</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q3</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q4</a></li>
</ul>
</div>
</li>
<li class="dropdown-submenu pull-right dropdown-item"><a tabindex="0" href="#">2019</a>
<div class="dropdown-menu">
<ul>
<li class="dropdown-item"><a tabindex="0" href="#">Q1</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q2</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q3</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q4</a></li>
</ul>
</div>
</li>
<li class="dropdown-submenu pull-right dropdown-item"><a tabindex="0" href="#">2020</a>
<div class="dropdown-menu">
<ul>
<li class="dropdown-item"><a tabindex="0" href="#">Q1</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q2</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q3</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
The CSS:
/* Buttons */
.btn {
border:none;
padding:12px;
color:#fff;
border-radius:0;
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}
.btn:hover,
.btn:focus,
.btn:active {
text-decoration:underline;
color:#fff;
}
.btn:focus {
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}
.btn-semiTransparent:hover,
.btn-semiTransparent:focus,
.btn-semiTransparent:active {
background:rgba(0,0,0,.1);
color:#1f2a44;
}
.btn-semiTransparent:not(:disabled):not(.disabled):active {
box-shadow: inset 0px 0px 5px #666 !important; /* makes it look like you've pressed the button */
}
/* Dropdown Menu */
.dropdown-item {
margin:0;
padding:0;
text-align:left;
}
.dropdown-submenu .dropdown-menu {
left:100%;
top:-3px;
border-radius:0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
right:100%;
}
.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item:active {
background:#e6e6e6;
}
.dropdown-toggle {
line-height:120%; /* makes the height of the button similar to the regular buttons. having the caret as an ::after is making it taller */
}
.dropdown-toggle::after {
font-family: 'FontAwesome';/* essential to enable caret symbol*/
content:"\f054" !important;
color:#a84300;
border:none !important;
min-width:16px;
position:relative;
top:4px;
}
.dropdown-toggle[aria-expanded="true"]::after{
content:"\f078" !important;
color:initial;
}
li.dropdown-submenu>a:after {
font-family: 'FontAwesome';/* essential to enable caret symbol*/
content:"\f054";
color:#a84300;
position:relative;
left:8px;
display:inline-block;
width:15px;
}
li.dropdown-submenu:hover > a {
text-decoration:none;
}
li.dropdown-submenu:hover > a:after {
content:"\f078" !important;
color:initial;
}
.dropdownPadding {
padding:0px 150px 50px;
background:transparent;
border:none;
right:calc(100% - 150px) !important;
}
.dropdownPadding ul {
border:1px solid #ccc;
margin:0;
padding:10px 0;
background:#fff;
}
At minimum, I'd like it so the menu is fully navigable using the keyboard for ADA compliance. My best case scenario would be working using arrow keys (not just the tab key) to navigate. I tried adding tabindex="0" to each element hoping that would work, but no luck so far.
There are a few ways to handle this but a great place to start is this W3C article about Menus as this covers a lot of the basics of menu design, sub menus, expected controls etc.
It also has some examples of how to set up the JavaScript for the expected functionality so that will help you.
One of the key parts is intercepting the enter key to open sub-levels, either directly on the menu item or as a separate drop down arrow next to the main menu item.
I personally prefer having any top level items not being a link and instead being used as toggles to open sub menus but it depends on your site architecture.
The last thing you want is to make each sub-menu accessible via just tabbing. At that point if someone wants to reach "2020 Q4" they would have to tab past 15 items.
What you want instead is for each 'quarter picker' to open after pressing either enter or the right arrow key.
That way to get to "2020 Q4" is just 4 tabs, enter (or right arrow), 4 tabs so only 9 key presses (instead of 15).
One last thing to consider is that your menu needs to work without JavaScript or offer an alternative.
What I tend to do is have a <noscript> element with a link to the complete HTML sitemap show if they don't have JavaScript enabled and I have a more complex menu such as this.
Related
I'm trying to make a navigation menu with tabs and I use negative margin to group the elements and I want the active element to stay over the inactive elements. I used position: absolute but it had no effect. How can I do this?
.nav-item {
margin: -40px;
}
.nav-link {
color: #F2BF5E !important;
font-weight: 700 !important;
}
.nav-link.active {
color: white !important;
font-weight: 700 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<div style="margin-top: 10%" class="row">
<div class="col">
<ul style="display: flex; justify-content: center;" class="nav nav-pills nav-pills-warning" role="tablist">
<li (click)="teste('entrar')" class="nav-item" style="width: 200px;">
<a class="nav-link active" data-toggle="tab" href="#link1" role="tablist">
Entrar
</a>
</li>
<li (click)="teste('cadastrar')" class="nav-item" style="width: 200px;">
<a data-toggle="tab" class="nav-link" href="#link2" role="tablist">
Cadastrar
</a>
</li>
</ul>
</div>
</div>
Currently, this is what I have:
enter image description here
If I am understanding you correctly, you want an image to be on top of the other, and vice versa, based off of whether it is 'active' or not.
In this case, I would imagine using the z-index is what you would want. It is a CSS property that provides depth/stacking based off of an integer value.
.nav-link.active {
z-index:1;
position:absolute;
color: white !important;
font-weight: 700 !important;
}
You might have to modify your code a bit to get it to how you want exactly; I'm just trying to provide a concept. You can just toggle the z-index value based off of whether it is 'active'
I have this older site (Bootstrap 3.3.6) I put together for a client and have noticed that a button in the navbar is noted as active and I can't seem to clear it.
It visually looks like this :
Screenshot of issue with buttons
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#registration">REGISTRATION & PROGRAMS</a>
</li>
<li>
<a class="page-scroll" href="#coaches">OUR COACHES</a>
</li>
<li>
<a class="page-scroll" href="#contact">CONTACT</a>
</li>
<li>
<img src="img/FB-f-Logo50px.png" alt="Find us on Facebook!">
</li>
</ul>
</div>
When I view it under active circumstances the button for CONTACT displays as such :
<li class="active">
<a class="page-scroll" href="#contact">CONTACT</a>
</li>
CSS :
a {
font-family: "HypatiaSansPro-Regular";
color:#CC3333;}
.btn {
background-color: #CC3333;
outline-color: #CC3333;}
.btn:hover,
.btn:focus,
.btn.active {
background-color: #993333;
outline-color: #CC3333;}
.contact-section {
padding-top: 100px;
padding-top: 100px;
padding-bottom: 50px;
text-align: center;
background: #eee;}
If I change the order of the buttons I will get the same issue for any of the buttons that are last.
This is a one page bootstrap site, the page has 3 anchors. I can send private messages of the site in question if it helps.
It's a minor issue, but it is really bothering me that there is a conflict and I cannot clear it. Any feedback?
Bootstrap adds a class that highlights the active element:
.navbar-nav>.active>a{
color: #555;
background-color: #e7e7e7;
}
You can overwrite that selector by placing the same selector with the values you want in a css stylesheet loaded after bootstrap's css.
.navbar-nav>.active>a{
color: #777;
background-color: transparent;
}
Alternatively you can to remove the .active class somehow. But I think bootstrap adds that automatically. So that would probably be a hassle to do.
I have navigation created using nav tabs.
I wan't to set color on hover, but I can't
I tried this, but not working .
.tab2:hover {
background-color: green;
}
.tab3:hover {
background-color: green;
}
HTML
<div class="col-md-10">
<nav class="row">
<ul class="nav nav-tabs">
<li class="tab1"> <span class="glyphicon glyphicon-user"></span> Name    <span class="glyphicon glyphicon-chevron-down"></span> </li>
<li class="tab1"><span class="glyphicon glyphicon-flag"></span>Text Link </li>
<li class="tab1"> <span class="glyphicon glyphicon-envelope"></span> Message </li>
<li class="tab1"> <span class="glyphicon glyphicon-oil"></span>10 </li>
<li class="tab1"><span class="glyphicon glyphicon-asterisk"></span>   </li>
<li class="tab1"><span class="glyphicon glyphicon-home"></span>  </li>
<li class="tab2"> <span class="glyphicon glyphicon-chevron-down"></span>     KATEGORIJE </li>
<li class="tab2">RADNJE</li>
<li class="tab2">VOZILA</li>
<li class="tab2">NEKRETNINE</li>
<li class="tab2">NAJNOVIJE</li>
<li class="tab2">HITNO</li>
<li class="tab2">USLUGE</li>
<li class="tab2">        <span class="glyphicon glyphicon-chevron-down"></span>     OSTALI LINKOVI </li>
</ul>
</nav>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.nav>li>a {
padding: 10px 3px;
font-weight: bold;
color:white;
font-size: 13px;
}
.tab1 {
background-color:#324255;
height: 42px;
}
.tab2 {
background-color:#405072;
height: 42px;
}
.tab3 {
background-color: #405072;
height:42px;
}
.nav-tabs li {
border-left: 1px solid #52617b;
border-right: 1px solid #52617b;
}
ul {
background-color: #405072;
height:43px;
}
.tab2:hover {
background-color: green;
}
.tab3:hover {
background-color: green;
}
I'll try to be as specific as I can so you understand it all.
1. When I pasted your html and css in the fiddle, I forgot to add the link for bootstrap stylesheet in the html as well. Bootstrap uses a CDN as you might know and it allows you to link with their stylesheet without downloading it and actually placing it in your website folders.
This is the link I am referring to:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
I just added this above all the html in the fiddle.
To answer your original question. Bootstraps stylesheet is overwriting your stylesheet.
Your <li> is working fine and has a green background. But the <a> has a background color of its own which is coming from bootstrap.
See fiddle here https://jsfiddle.net/otuy1foo/3/. And in the css I placed the css code in comments at the bottom.
/*This is the css you need to add*/
.nav-tabs>li>a:hover, .nav>li>a:focus, .nav>li>a:hover {
border-color: transparent !important;
background-color: transparent !important;
}
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'm trying to put a checkbox form in a dropdown like this:
<ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Dropdown Form<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><label class="checkbox"><input type="checkbox">Two</label></li>
<li><label class="checkbox"><input type="checkbox">Two</label></li>
</ul>
</li>
</ul>
Here is a Demo in Bootply
However, as you can see in the demo, for whatever reason the actual checkbox itself appears outside of the dropdown menu. Can anyone tell me what's causing that, and how it should be implemented instead? If I take the label class out it works but it's all bunched up.
Here's what we'll build:
HTML
Essentially, we'll look to combine two different sets of Bootstrap controls & styles: Dropdowns & Checkboxes. Inside of each li, we'll use a label instead of an a element, so that we can wrap the checkbox in a label and make the entire row clickable.
<ul class="dropdown-menu checkbox-menu allow-focus">
<li >
<label>
<input type="checkbox"> Cheese
</label>
</li>
</ul>
CSS
We can steal some of the styles normally applied to .dropdown-menu li a, input and apply them to our label option instead. We'll make the label occupy the full width of the container and fix some label / checkbox alignment issues. Additionally, we'll add styles for .active and :hover.
.checkbox-menu li label {
display: block;
padding: 3px 10px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
margin:0;
transition: background-color .4s ease;
}
.checkbox-menu li input {
margin: 0px 5px;
top: 2px;
position: relative;
}
.checkbox-menu li.active label {
background-color: #cbcbff;
font-weight:bold;
}
.checkbox-menu li label:hover,
.checkbox-menu li label:focus {
background-color: #f5f5f5;
}
.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
background-color: #b8b8ff;
}
JavaScript
Some other housekeeping, we'll manually keep an .active class flag on each list item to correspond to whether or not the item is checked so we can style it appropriately.
$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
$(this).closest("li").toggleClass("active", this.checked);
});
We'll also want to allow multiple selections by allowing the menu to stay open on internal click events by stopping the event from bubbling up
$(document).on('click', '.allow-focus', function (e) {
e.stopPropagation();
});
Demo in Stack Snippets
$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
$(this).closest("li").toggleClass("active", this.checked);
});
$(document).on('click', '.allow-focus', function (e) {
e.stopPropagation();
});
body {
padding: 15px;
}
.checkbox-menu li label {
display: block;
padding: 3px 10px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
margin:0;
transition: background-color .4s ease;
}
.checkbox-menu li input {
margin: 0px 5px;
top: 2px;
position: relative;
}
.checkbox-menu li.active label {
background-color: #cbcbff;
font-weight:bold;
}
.checkbox-menu li label:hover,
.checkbox-menu li label:focus {
background-color: #f5f5f5;
}
.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
background-color: #b8b8ff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button"
id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
<i class="glyphicon glyphicon-cog"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1">
<li >
<label>
<input type="checkbox"> Cheese
</label>
</li>
<li >
<label>
<input type="checkbox"> Pepperoni
</label>
</li>
<li >
<label>
<input type="checkbox"> Peppers
</label>
</li>
</ul>
</div>
The way Bootstrap uses checkboxes in their docs is as following:
<div class="checkbox">
<label>
<input type="checkbox">Two
</label>
</div>
So yours would look like:
<ul>
<li class="dropdown">
Dropdown Form<b class="caret"></b>
<ul class="dropdown-menu">
<li>
<div class="checkbox">
<label>
<input type="checkbox">Two
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox">Two
</label>
</div>
</li>
</ul>
</li>
</ul>
The docs:
http://getbootstrap.com/css/#forms
I think a simple solution would be,
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="sampleDropdownMenu" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">
<input type="checkbox">Action
</button>
<button class="dropdown-item" type="button">
<input type="checkbox">Action
</button>
<button class="dropdown-item" type="button">
<input type="checkbox">Action
</button>
</div>
</div>
The problem here is that your checkboxes are being styled (by Bootstrap) with:
.checkbox input[type=checkbox]{
position: absolute;
margin-left: -20px;
}
This is probably done to avoid those "bunching" issues you see when you remove the .checkbox class on the <label>, but that negative margin-left is causing problems in this case.
One way to address this with minimal adjustment to your markup and CSS would just be to add some padding on the <label> to account for it:
label.checkbox{
padding-left:20px;
}
Here's an updated Bootply to show you the code in action. Hope this helps! Let me know if you have any questions.