NK-uCoz.Ru » Каталог файлов » uCoz » Скрипты для uCoz » Вертикальное меню от waak"a для uCoz

Вертикальное меню от waak"a для uCoz

Вертикальное меню от waak"a для uCoz
Скрипты для uCoz
na3uTuB4uk
31.05.16, 14:51
576
0
Описание:
Всем привет сегодня я выкладываю очередную свою работу для вашего сайта на uCoz
в этот раз это вертикальное меню подробнее можете посмотреть на демо странице

Установка:
Копируем данный код и вставляем в нужное место на сайте
Код
<div id="meny_left_bloc">  
  <div id="meny_left_bloc_top">  
  <a href="/index/8-$USER_ID$"><span><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="ТУТ ССЫЛКА НА КАРТИНКУ НЕТ АВАТАРА"><?endif?></span>Моя страница</a>  
  <b style="background-position: 40px"><a href="#"></a></b>  
  </div>  
  <ul>  
  <li><a href="#"><i></i>Мои фото</a> <b><a href="#">+</a></b></li>  
  <li><a href="#"><i style="background-position: 142px"></i>Мои друзья</a> </li>  
  <li><a href="#"><i style="background-position: 238px"></i>Моя музыка</a> <b><a href="#">+</a></b></li>  
  <li><a href="#"><i style="background-position: 205px"></i>Моё видео</a> <b><a href="#">+</a></b></li>  
  <li><a href="#"><i style="background-position: 173px"></i>Мои группы</a> <b><a href="#">+</a></b></li>  
  <li><a href="#"><i style="background-position: 110px"></i>Мой дневник</a> <b><a href="#">+</a></b></li>  
  <li><a href="#"><i style="background-position: 78px"></i>Мои файлы</a> <b><a href="#">+</a></b></li>  
   
  </ul>  
  </div>

Теперь подключаем стили нашего меню для этого нам нужно скопировать данный код и вставляем в низ таблицы стилей вашего сайта
Код
  
  /* meny_left_bloc  
  -----------------------------------------------------------------------------*/  
  #meny_left_bloc {  
  padding: 10px;  
  }  
  #meny_left_bloc ul {  
  list-style: none;  
  overflow: hidden;  
  }  
  #meny_left_bloc ul li {  
  width: 180px;  
  height: 30px;  
  }  
  #meny_left_bloc ul li:hover b {  
  display: block;  
  }  
  #meny_left_bloc ul li:hover {  
  background: #ddeaf3;  
  }  

  #meny_left_bloc ul li a {  
  display: block;  
  font:11px Tahoma,Arial,sans-serif;  
  color: #80828d;  
  width: 150px;  
  line-height: 30px;  
  float: left;  
  }  

  #meny_left_bloc ul li i {  
  width: 30px;  
  height: 30px;  
  background: url("../img/img_meny_left.png");  
  float: left;  
  margin: 0px 10px;  
  }  
  #meny_left_bloc ul li b {  
  display: none;  
  width: 30px;  
  float: right;  
  }  
  #meny_left_bloc ul li b a {  
  display: block;  
  width: 30px;  
  text-align: center;  
  font:14px Tahoma,Arial,sans-serif;  
  color: #80828d;  
  line-height: 30px;  
  }  

  #meny_left_bloc ul li b:hover {  
  background: #c8d4dc;  
  color: #4753b1;  
  }  

  #meny_left_bloc_top {  
   
  width: 180px;  
  height: 30px;  
  background: #ddeaf3;  

  }  
  #meny_left_bloc_top a {  
  display: block;  
  font:11px Tahoma,Arial,sans-serif;  
  color: #80828d;  
  line-height: 30px;  
  float: left;  

  }  
  #meny_left_bloc_top span {  
  width: 23px;  
  height: 22px;  
  float: left;  
  margin: 4px 10px 4px 15px;  
  overflow: hidden;  

  }  
  #meny_left_bloc_top span img {  
  width: 23px;  
  min-height: 22px;  
  }  

  #meny_left_bloc_top b {  
  width: 25px;  
  height: 30px;  
  background: url("../img/img_meny_left.png");  
  line-height: 30px;  
  float: right;  
  }  
  #meny_left_bloc_top b a {  
  width: 25px;  
  height: 30px;  
  }  
  #meny_left_bloc_top b:hover a {  
  background: #c8d4dc url("../img/img_meny_left.png");  
  background-position: 40px;  
  }

Меняем текст в первом коде
Цитата
"ТУТ ССЫЛКА НА КАРТИНКУ НЕТ АВАТАРА"

На ссылку картинки
Теперь качаем архив и заливаем его содержимое в папку img в файловый менеджер своего сайта
1712_img_meny_left.rar [5.4 Kb] (Скачали 23)
Ctrl
Enter
Заметили ошЫбку
Выделите текст и нажмите Ctrl+Enter
Вернуться назад
Комментарии (0)