<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>List Group with Hidden Sub-menu</h2>
</div>
<div class="row">
<div class="col-sm-offset-4 col-sm-4">
<ul class="list-group">
<li class="list-group-item">
Vet Appointment!
<ul class="list-group-submenu">
<li class="list-group-submenu-item success"><span class="glyphicon glyphicon-remove"></span></li>
<li class="list-group-submenu-item danger"><span class="glyphicon glyphicon-ok"></span></li>
</ul>
</li>
<li class="list-group-item">
Complete Project
<ul class="list-group-submenu">
<li class="list-group-submenu-item primary"><span class="glyphicon glyphicon-remove"></span></li>
<li class="list-group-submenu-item warning"><span class="glyphicon glyphicon-ok"></span></li>
</ul>
</li>
<li class="list-group-item">
Grab a Beer with Friends.
<ul class="list-group-submenu">
<li class="list-group-submenu-item info"><span class="glyphicon glyphicon-remove"></span></li>
<li class="list-group-submenu-item"><span class="glyphicon glyphicon-ok"></span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
.list-group {
overflow: hidden;
border-left: 1px solid rgb(221, 221, 221);
border-right: 1px solid rgb(221, 221, 221);
}
.list-group-item:first-child, .list-group-item:last-child {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
overflow: hidden;
}
.list-group-item {
border-left: 0px solid rgb(221, 221, 221);
border-right: 0px solid rgb(221, 221, 221);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.list-group-item > .show-menu {
position: absolute;
height: 100%; width:24px;
top: 0px; right: 0px;
background-color: rgba(51, 51, 51, 0.2);
cursor: pointer;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.list-group-item > .show-menu > span {
position: absolute;
top: 50%;
margin-top: -7px;
padding: 0px 5px;
}
.list-group-submenu {
position: absolute;
top: 0px;
right: -88px;
white-space: nowrap;
list-style: none;
padding-left: 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.list-group-submenu .list-group-submenu-item {
float: right;
white-space: nowrap;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: rgb(51, 51, 51);
color: rgb(235, 235, 235);
}
.list-group-item.open {
margin-left: -88px;
}
.list-group-item.open > .show-menu {
right: 88px;
}
.list-group-item.open .list-group-submenu{
right: 0px;
}
.list-group-submenu .list-group-submenu-item.primary {
color: rgb(255, 255, 255);
background-color: rgb(50, 118, 177);
}
.list-group-submenu .list-group-submenu-item.success {
color: rgb(255, 255, 255);
background-color: rgb(92, 184, 92);
}
.list-group-submenu .list-group-submenu-item.info {
color: rgb(255, 255, 255);
background-color: rgb(57, 179, 215);
}
.list-group-submenu .list-group-submenu-item.warning {
color: rgb(255, 255, 255);
background-color: rgb(240, 173, 78);
}
.list-group-submenu .list-group-submenu-item.danger {
color: rgb(255, 255, 255);
background-color: rgb(217, 83, 79);
}
$(function () {
$('.list-group-item').on('mouseover', function(event) {
event.preventDefault();
$(this).closest('li').addClass('open');
});
$('.list-group-item').on('mouseout', function(event) {
event.preventDefault();
$(this).closest('li').removeClass('open');
});
});
