Question

我有一个UI，其中包含菜单的客户仪表板在那里包含多个子菜单，其中我有一个名为Message的子菜单。现在我想在徽章中显示新消息的通知。如果有新消息来吧，它应该把徽章显示为“新消息”。如果我读到这条消息就必须消失。我的代码如下： CSS：

.notification-bubble {
    height: 18px;
    width: 18px;
    background: #f56c7e url(../images/notification-bg-clear.png) no-repeat center center scroll;
    background-image: none\9;
    position: absolute;
    right: 5px;
    top: -10px;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
    text-align: center;
    font-size: 9px;
    line-height: 18px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .17), 0 1px 1px rgba(0, 0, 0, .2);
    -moz-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .17), 0 1px 1px rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .17), 0 1px 1px rgba(0, 0, 0, .2);
    border-radius: 9px;
    font-weight: bold;
    cursor: pointer;
    display: none;
}

.notification-bubble.show {
    display: block;
}

HTML：

<li><a href="@Url.Action("MyMessage","ForumPost")"><span class="notification-bubble">New Message</span>My Message</a></li>

徽章中的新消息通知

0 个答案: