Вертикальное меню со счетчиком на CSS
827материалов
228тем на форуме
3003комментария
6152пользователя

Вертикальное меню со счетчиком на CSS


Меню достаточно компактное, не занимает много места. В основе рассчитано для сайтов со светлым оформлением. Вертикальное меню со счетчиком на CSS – это меню с заголовком, ссылки в котором могут иметь оформленный счетчик рядом. Счетчик будет отображаться справа от надписи в ссылке. Таким образом, можно сделать меню для социальной сети: к примеру, счетчик полезен для ссылки на сообщения или ленту новостей.

Код CSS
Код
<style type="text/css">  
.over_1 {width:180px;text-align:left;}  
.titl {text-align:left;padding:7px;margin:0;font-size:14px;font-family:Arial;color:white;background:#4B4F55;display:block}  
.menus {text-align:left;border-bottom:1px solid #D8D8D8}  
.menus a sup {font-family:Arial;margin-top:-1px;float:right;font-size:10px;border-radius:13px;padding:3px;background:#efefef;color:#646464}  

.menus a.active sup {font-family:Arial;margin-top:-1px;float:right;font-size:10px;border-radius:13px;padding:3px;background:#F13B3B;color:white}  

.menus a {  
border-left:1px solid #D8D8D8;  
border-right:1px solid #D8D8D8;  
font-family:Arial;  
font-size:14px;  
background:white;  
display:block;  
padding:7px;  
color:#8B8E93;  
border-bottom:1px solid #F0F0F0;  
text-decoration:none;  
}  
.menus a.active {  
font-family:Arial;  
display:block;  
font-size:14px;  
padding:7px;  
color:#FFFFFF;  
border-bottom:1px solid #62666B;  
text-decoration:none;  
background:#6E757F;  
border-left:1px solid #6E757F;  
border-right:1px solid #6E757F;  
}  
.menus a:hover {  
font-family:Arial;  
display:block;  
font-size:14px;  
padding:7px;  
color:#FFFFFF;  
border-bottom:1px solid #62666B;  
text-decoration:none;  
background:#6E757F;  
border-left:1px solid #6E757F;  
border-right:1px solid #6E757F;  
}  
</style>

Код HTML
Код
<div class="over_1">  
<div class="titl">Меню</div>  
<div class="menus">  
<a href="#" class="active"><sup>56</sup>Лента</a>  
<a href="#"><sup>32</sup>Сообщения</a>  
<a href="#">Новая запись</a>  
<a href="#">Выход</a>  
</div>  
</div>

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 05.04.2014 в 01:07
Материал просмотрен: 1100 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта