Вертикальное меню от waak"a для uCoz - Меню - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Меню


Всем привет!!! сегодня я выкладываю очередную свою работу для вашего сайта на 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 в файловый менеджер своего сайта

Важно!

При копировании материала указывать ссылку на источник.

- 367
- 13-Января-2017
- 2
- 0
Материал разместил:

Похожий материал
Статьи сайта