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

23/04/2017 0 25 1 phút đọc

Đô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.

Mục lục

HTML
CSS
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');
        }
    });
});