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

Đôi khi vào một website, bạn sẽ thấy một mẫu thông báo nhỏ trượt xuống ngay đầu trang web. Bài viết này sẽ hướng dẫn cách tự làm thanh thông báo đó với HTML, CSS và jQuery.

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.