Tự làm thanh thông báo ở đầu trang

Xem demo Tải về

Bài viết này có sử dụng Bootstrap, tham khảo tại đây.

HTML

<div id="top-mess" class="top-message">
    <div class="top-message-content container text-center">
        <span class="glyphicon glyphicon-bullhorn"></span> Đây là nội dung thông báo.
        <span id="top-mess-hide" class="top-message-icon glyphicon glyphicon-chevron-up hidden-xs"></span>
    </div>
</div>

CSS

.top-message {
    background: #e44f3d;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    display: none;
}

.top-message-content {
    position: relative;
}

.top-message-content .glyphicon {
    margin-right: 7px;
}

.top-message-icon {
    padding: 15px;
    background: #e44f3d;
    color: #fff;
    cursor: pointer;
    position: absolute;
    top: -12px;
    right: 15px;
}

jQuery

$(window).load(function() {
    $('#top-mess').slideDown('fast');
});

$(document).ready(function() {
    $('#top-mess-hide').click(function() {
        if ($('#top-mess').is(':visible')) {
            $('#top-mess').slideUp('fast');
        }
    });
});

Nếu sử dụng WordPress, bạn có thể dùng plugin QuickieBar.