notif

by surfine

HTML

<div class="notification-bar">
    <span class="notif-sbars">
        <span class="notif-sbar notif-sbar1"></span>
        <span class="notif-sbar notif-sbar2"></span>
        <span class="notif-sbar notif-sbar3"></span>
    </span>
    <span class="notif-actions">
        <span class="notif-news"></span>
        <span class="notif-chat"></span>
        <span class="notif-palreq"></span>
    </span>
    <span class="_count00">
        <span class="_count10 count00"></span>
        <span class="_count20 count00"></span>
        <span class="_count30 count00"></span>
    </span>
</div>
<div class="notifications" style="display:none">
    <span class="notif-sbar s4444"></span>
    <span class="notification-content"></span>
</div>

CSS

.notification-bar {
    width: 57px; height: 154px;
    padding: 4px;
    background: #222;
    
    border-radius: 2px;
    position: fixed;
    top: 50%; left: 5px;
    margin-top: -80px;
}

.notif-actions {
    height: 154px; width: 48px;
    display: inline-block;
    background: transparent;
}

.notif-news {
    height: 48px; width: 48px;
    background: url('http://cdn2.iconfinder.com/data/icons/oxygen/32x32/categories/applications-internet.png') no-repeat center;
    background-size: 32px;
    display: block;
}

.notif-chat {
    height: 48px; width: 48px;
    background: url('http://cdn4.iconfinder.com/data/icons/Hypic_Icon_Pack_by_shlyapnikova/32/forum_32.png') no-repeat center;
    background-size: 32px;
    display: block;
    position: relative;
    top: 5px;
}

.notif-palreq {
    height: 48px; width: 48px;
    background: url('http://cdn2.iconfinder.com/data/icons/gnomeicontheme/32x32/stock/generic/stock_person.png') no-repeat center;
    background-size: 32px;
    display: block;
    position: relative;
    top: 10px;
}

.notif-news, .notif-chat, .notif-palreq:hover {
    cursor: pointer;
}

.notif-sbars {
    display: inline-block;
}

.notif-sbar {
    height: 48px; width: 5px;
    background: #444;
    display: block;
    position: relative;
    top: -10px;
}

.notif-sbar2 {
    position: relative;
    top: -5px;
}

.notif-sbar3, .s4444 {
    position: relative;
    top: 0px;
}

.notifications {
    width: 300px; height: 350px;
    padding: 4px;
    background: #222;
    
    border-radius: 2px;
    position: fixed;
    top: 50%; left: 75px;
    margin-top: -80px;
}

.notification-content {
    width: 93%; height: 97%;
    position: absolute;
    top: 6px; left: 15px;
    display: inline-block; overflow-y: scroll;
}

._count00 {
    height: 154px; width: 0px;
    position: absolute;
    top: 4px; right: 5px;
}

._count10 {
    position: fixed;
    top: 9px; left: 4px;
    display: block;
}

._count20 {
    position: fixed;
    top: 30px; left:...

JavaScript

$('.notif-news').click(function() {
    $('.notif-sbar1').css('background', '#FF8232').addClass('notif-checked');
    $('.notif-sbar2').css('background', '#444').removeClass('notif-checked');
    $('.notif-sbar3').css('background', '#444').removeClass('notif-checked');
    if ($('.notif-sbar1').hasClass('notif-checked')) {
        $('.notifications').show();
        $('.s4444').css({'top': '0px', 'background': '#FF8232'});
    }
})
$('.notif-chat').click(function() {
    $('.notif-sbar1').css('background', '#444').removeClass('notif-checked');
    $('.notif-sbar2').css('background', '#FF8232').addClass('notif-checked');
    $('.notif-sbar3').css('background', '#444').removeClass('notif-checked');
    if ($('.notif-sbar2').hasClass('notif-checked')) {
        $('.notifications').show();
        $('.s4444').css({'top': '53px', 'background': '#FF8232'});
    }
})
$('.notif-palreq').click(function() {
    $('.notif-sbar1').css('background', '#444').removeClass('notif-checked');
    $('.notif-sbar2').css('background', '#444').removeClass('notif-checked');
    $('.notif-sbar3').css('background', '#FF8232').addClass('notif-checked');
    if ($('.notif-sbar3').hasClass('notif-checked')) {
        $('.notifications').show();
        $('.s4444').css({'top': '106px', 'background': '#FF8232'});
    }
})