Đô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.
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');
}
});
});
Chúc các bạn thành công!
Không có bình luận.