<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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">
<div class="col-md-3">
<div class="list-group">
<a href="/user/me" class="list-group-item visitor">
<h3 class="pull-right">
<i class="fa fa-user"></i>
</h3>
<h4 class="list-group-item-heading">
Your Dashboard</h4>
</a><a href="/messages" class="list-group-item visitor">
<h3 class="pull-right">
<i class="fa fa-comments-o"></i>
</h3><div id="noti_container">
<h4 class="list-group-item-heading noti_container">
Private Messages</h4>
<div class="noti_bubble">8d</div></div>
</a><a href="https://login.secureserver.net/" class="list-group-item visitor">
<h3 class="pull-right">
<i class="fa fa-envelope-o"></i>
</h3>
<h4 class="list-group-item-heading ">
Mail</h4>
</a>
<a href="/node/47" class="list-group-item visitor">
<h3 class="pull-right">
<i class="fa fa-certificate"></i>
</h3>
<h4 class="list-group-item-heading">
LivWell University</h4>
</a>
<a href="/node/2298" class="list-group-item visitor">
<h3 class="pull-right">
<i class="fa fa-usd "></i> </i>
</h3>
<h4 class="list-group-item-heading">
Price Guide</h4>
</a>
<a href="/content/license-keys" target="_blank" class="list-group-item visitor">
<h3 class="pull-right">
<i class="fa fa-key"></i>
</h3>
<h4 class="list-group-item-heading">
Colorado Licenses</h4>
</a>
<!-- <a href="/node/47" class="list-group-item visitor">
<h3 class="pull-right">
<i class="fa fa-rocket"></i>
</h3>
<h4 class="list-group-item-heading">
Sales Summary</h4>
</a >-->
<a href="http://www.livwellstrains.com/" class="list-group-item visitor">
<h3 class="pull-right">
<i class="fa fa-leaf"></i>
</h3>
<h4 class="list-group-item-heading">
LivWell Strains</h4>
</a>
<a href="/filedepot" class="list-group-item visitor">
<h3 class="pull-right">
<i class="fa fa-file-text-o"></i>
</h3>
<h4 class="list-group-item-heading ">
Documents</h4>
</a><a href="/user/me/settings" class="list-group-item visitor">
<h3 class="pull-right">
<i class="fa fa-bullhorn"></i>
</h3>
<h4 class="list-group-item-heading">
Notifications</h4>
</a><a href="/livwell-media" class="list-group-item visitor">
<h3 class="pull-right">
<i class="fa fa-globe"></i>
</h3>
<h4 class="list-group-item-heading ">
Media</h4>
</a>
</div></div></div></div>
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");
.list-group-item > .pull-right > i.fa {
font-size: 25px;
text-align: right;
position: absolute;
top: 12px;right: 25px;outline: none;
border: 1px solid rgba(221, 221, 221, 0) !-important;
}
.list-group-item {
border: 1px solid #444;
}
.list-group-item.visitor:first-child, .list-group-item.visitor:last-child{
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
a.visitor { background-color:#000; transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease; }
/* Visitor */
a.visitor i {color:rgb(7, 141, 255);}
.visitor h4.list-group-item-heading { color:#fff; }
a.visitor:hover { background-color:#fff; }
a.visitor:hover * {color:#000; }
a.visitor:hover .fa { color:#fff; text-shadow: 0 0 10px #fff, 0 0 20px #0071B3, 0 0 30px #0071B3, 0 0 40px #0071B3, 0 0 70px #0071B3}
}
#noti_Container {
}
.noti_bubble {
position:absolute; /* This breaks the div from the normal HTML document. */
top: 7px;
right:19px;
padding:1px 2px 1px 2px;
background-color:red; /* you could use a background image if you'd like as well */
color:white !important;
font-weight:bold;
font-size:0.79em;
/* The following is CSS3, but isn't crucial for this technique to work. */
/* Keep in mind that if a browser doesn't support CSS3, it's fine! They just won't have rounded borders and won't have a box shadow effect. */
/* You can always use a background image to produce the same effect if you want to, and you can use both together so browsers without CSS3 still have the rounded/shadow look. */
border-radius:30px;
box-shadow:1px 1px 1px gray;
}
// Animate the element's value from x to y:
$({ someValue: 0 }).animate({ someValue: Math.floor(Math.random() * 3000) }, {
duration: 3000,
easing: 'swing', // can be anything
step: function () { // called on every step
// Update the element's text with rounded-up value:
$('.count').text(commaSeparateNumber(Math.round(this.someValue)));
}
});
function commaSeparateNumber(val) {
while (/(\d+)(\d{3})/.test(val.toString())) {
val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}
