Чтение RSS
По вопросам сотрудничества и рекламы на портале MixliP, обращаться на почту admin@turklib.ru
MixliP - Территория вебмастера! На нашем сайте вы найдете все для веб-мастеров и не только =) ! Различные скрипты для вашего сайта. И еще на нашем сайте немало софта! Заходи не пожалеешь!

Новый вид меню категорий ucoz

Новый вид меню категорий ucoz



Шаг 1 - Установим иконки:

Для начала нам следует установить иконки, для этого заходим в Админ панель => Новости сайта => Управление категориями и выбираем нужную категорию, нажимаем на гаечный ключ с правой стороны экрана и в появившемся Ajax окне заполняем поле "Описание категории", а именно вставляем обычную html ссылку на иконку:

<img alt="" src="адрес" />


сразу хочу сказать, что ссылка не должна быть длинной, иначе uCoz её обрежет и вы увидите не иконку, а половина кода, из-за чего всё решение полетит в тартарары.

Шаг 2 - Установим CSS:




Теперь следует прописать следующие css стили, предварительно удалив старые, относящиеся к стилизации меню категорий:

/* Новый вид меню категорий ucoz 
 ------------------------------------------*/ 
.menu_rubrika {  
  width:250px; 
  background: #fff; 
  border: 1px solid #CAD3DA; margin:0!important; 
} 

.catsTable {  
  width:250px; 
  overflow: hidden;  
  margin: 15px 0px;  
  border-collapse: collapse!important;`  
  font:11px Verdana,Arial,sans-serif; 
 } 

 .catsTable tr {  
  float:left; 
  position:relative; 
  margin: 5px 0px 5px 0px;  
 } 

 .catsTd { 
  width: 81px; 
  height: 50px; 
  text-align:center; 
 } 

 .catName { 
  top:0; 
  left:0; 
  float:left; 
  z-index: 2; 
  width: 81px;  
  position:absolute; 
  padding-top: 30px;  
 } 

 a.catName:link,  
 a.catName:visited,  
 a.catName:active {color:#555;} 
 a.catName:hover {color:#2C68A6; font-weight: bold;} 

 .catsTd div { 
  z-index:3; 
  width: 81px; 
  height: 30px;  
 } 
   
 .catNumData {  
  z-index: 1;  
  top:-5px; 
  right:5px; 
  position:absolute;  
  font:9px Verdana,Arial,sans-serif; color:#999; 
 }




Примечание:

В данном решении я не стал скрывать ячейку span, в которой отображается количество новостей в той или иной рубрики сайта. Если вы захотели скрыть данную функцию, то в css стилях замените:

.catNumData {  
  z-index: 1;  
  top:-5px; 
  right:5px; 
  position:absolute;  
  font:9px Verdana,Arial,sans-serif; color:#999; 
}


на

.catNumData {  
  display:none!important; 
}


Demo_vid_rubrika_2.rar

Просмотры: 2960 Комментарии (0)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Владельцы и пользователи сайта MixliP.ru не осуществляют никакой продажи либо перепродажи программных и иных продуктов интеллектуальной собственности. На нашем сайте не хранится ни одного файла или документа, который нарушал бы смежное или авторское право.


Сайт MixliP.ru представляет собой набор новостей и ссылок на внешние общедоступные источники в сети Интернет, не подконтрольные администрации сайта MixliP.ru, а, следовательно, не несет никакой ответственности за их содержание.


Вся информация о программном обеспечении и скриптах, размещенная на данном сайте, предоставлена исключительно в ознакомительных целях и только для просмотра, и призвана помочь посетителям сайта MixliP.ru выбрать для себя и в последствии приобрести соответствующие лицензионные авторские программные продукты.


Читать полностью информацию правообладателям.




Наши друзья

Полезное

Разделы сайта

 Пользователи онлайн

  • Всего на сайте: 16
    Пользователей: 0
    Гостей: 15
    Роботов: 1
    Yandex