Keyboard nav in linked lists
Only tabbing :(
by agib
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<h2>
Navigation with tabbing
</h2>
<div class="form-group">
<input type="search" name="" id="" class="form-control" placeholder="Search here...">
</div>
<div class="form-group">
<div class="list-group">
<a href="#" class="list-group-item">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quasi, incidunt maxime commodi ut fugiat aliquam facere repellat, nisi obcaecati voluptatibus. Iusto, necessitatibus, inventore! Laborum eum explicabo quas vero perferendis!</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
</div>
<h2>
Navigation with arrow down/up
</h2>
<div class="form-group">
<input type="search" name="" id="" class="form-control" placeholder="Search here...">
</div>
<div class="form-group">
<fieldset class="list-group">
<label class="list-group-item">
<input type="radio" name="itemGroup">
<div class="tabular">
Cras justo odio
</div>
</label>
<label class="list-group-item">
<input type="radio" name="itemGroup">
<div class="tabular">
Dapibus ac facilisis in Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quasi, incidunt maxime commodi ut fugiat aliquam facere repellat, nisi obcaecati voluptatibus. Iusto, necessitatibus, inventore! Laborum eum explicabo quas vero perferendis!
</div>
</label>
<label class="list-group-item">
<input type="radio" name="itemGroup">
<div class="tabular">
Morbi leo risus
</div>
</label>
<label class="list-group-item">
<input type="radio" name="itemGroup">
<div class="tabular">
Porta ac consectetur ac
...
SCSS
body {
padding: 4rem;
}
label {
font-weight: normal;
}
.list-group-item:focus {
outline: 2px solid dodgerblue;
background-color: dodgerblue !important;
color: white !important;
}
label.list-group-item {
padding: 0;
.tabular {
padding: 10px 15px;
}
}
[name="itemGroup"]{
border: 0;
clip: rect(0 0 0 0);
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
&:checked,
&:focus {
+ .tabular {
background-color: dodgerblue;
color: white;
}
}
}