Как показать значок в меню

Question

Как показать значок в меню

0

Я видел, что на некоторых сайтах у них есть меню, а их маленький значок, который показывает номер в меню. Кто-нибудь знает, как это показано. Я разрабатываю веб-приложение с использованием синтаксиса mvc и бритвы. Теперь, например, у меня есть меню "Электронная почта", и если будет получено новое письмо, в пункте меню должно появиться "Email 1". Здесь "1" должно находиться в правом верхнем углу меню "Электронная почта". Мне было любопытно узнать, сделал ли кто-нибудь это и может поделиться некоторыми мыслями по этому поводу.

user1254053 13 нояб. 2013, в 02:23

Источник

Теги:

jquery

html5

asp.net-mvc

2 ответа

1

Вы имеете в виду вот так:

Демо: http://jsfiddle.net/87FE9/1/

.e {
    width: 90px; height: 40px; background-color: rgb(50, 121, 128); line-height: 40px; text-align: center; color: white;
    margin: auto; position: absolute; top: 0;bottom: 0;left: 0;right: 0;
}
.alert {
    position: absolute; background-color: rgb(0, 204, 255); border-radius: 1000px; width: 30px; height: 30px; text-align: center; line-height: 30px; top: 28px; left: 65px;
    display: none;
}
body,html {
    font-family: 'Open Sans';
    height: 100%; background-color: rgb(45, 38, 61);
}

это в основном div с огромным радиусом границы, но малая ширина и высота, которые заставляют его казаться кругом, и он абсолютно позиционируется, в моем случае, но обычно относится к родительскому элементу и отображается или скрывается через javascript.

Techsin 12 нояб. 2013, в 23:21

Ещё вопросы

Bigood · Accepted Answer · 2013-11-12T23-40-00.000Z

Я лично использую атрибут data элементов HTML, а затем использую content:attr(data) для создания значка только CSS:

Вот минимальный код (без стилизации):

HTML

<span class="badged" data-count="1">I'm badged!</span>

CSS

.badged:after{
    content:attr(data-count);
    position:relative;
    top:-10px;
    right:0px;
}

Если вы хотите попробовать код, вот скрипка с полным кодом!