Боба
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1

Для добавления необходима авторизация
Граффити
Форма входа

Закрыть

Светлое вертикальное меню с мини профилем
Скрипты

Это простое светлое вертикальное меню с мини профилем.Скрипт очень полезен, и просто в использование.Сам установка легкая, вам нужно будет скачать картинку и залить в папку img, если нету такой папки то создайте.

Установка:
Вставьте этот код в то место где хотите видеть данное меню:

Код
<div id="menu_w">
  <ul>
  <li><a href="/index/8-$USER_ID$" style="float:left;width:80%"><span class="prof_w"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="/img/net_ava.png"><?endif?></span>Моя страница</a>
  <?ifnot $USER_LOGGED_IN$?><span ><a href="/index/11" style="float: right;width: 20%;height: 40px;"><img src="/img/settings.png" style="margin:10px 10px 0 8px;"></a>
  </span><?endif?>  
  </li>
  <li><a href="#"><i style="background: #a3ded6;"></i>Шаблоны для uCoz</a></li>
  <li><a href="#"><i style="background: #aedea3;"></i>Скрипты для uCoz</a></li>
  <li><a href="#"><i style="background: #d07653;"></i>Графика для сайта</a></li>
  <li><a href="#"><i style="background: #dea3d9;"></i>Раскрутка сайта</a></li>
  <li><a href="#"><i style="background: #a3bdde;"></i>Заработок на uCoz</a></li>
  <li><a href="#"><i style="background: #e9e887;"></i>Блог</a></li>
  <li><a href="#"><i style="background: #9c9fa3;"></i>Форум</a></li>
  </ul>
</div>

А вот этот в вашу таблицу стилей:

Код
#menu_w {
  padding: 10px;
}
#menu_w ul {
  list-style: none;
}
#menu_w ul li {
  border-bottom: 1px solid #dadada;
  height: 40px;
}
#menu_w ul li a {
  display: block;
  text-decoration: none;
  color: #959595;
  font: 15px Arial,Tahoma,sans-serif;
  line-height: 40px;
}
#menu_w ul li a:hover {
  background: #f0f3f7;
}
#menu_w ul li i {
  display: block;
  float: left;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  margin: 10px 20px 10px 13px;
}

#menu_w ul li span a i {
   
}

.prof_w {
  display: block;
  margin: 0px 10px 5px 5px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border: 3px solid #c7d6ea;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -webkit-border-radius: 3px;
  float: left;
}

.prof_w img {
  width: 30px;
  min-height: 30px;
}

Теперь найдите в первом коде вот такой участок:

Код
/img/net_ava.png

Это ссылка на картинку которая показывается если у пользователя нет аватара
её нужно заменить на свою.

Как я уже сказал выше, вам нужно будет скачать картинку и залить в папку img, если нету такой папки то создайте.На этом все!

Все вопросы - отзывы в комментарии.

Особености:

Тематика
Для любого сайта
Браузеры
Одинаково работаее на всех браузерах последней версии
Адаптация
Нет
Архив
Все нужные файлы
Размер
1.0Kb

Скачивать файлы могут только зарегистрированные пользователи, Войдите на сайт под своим именем.

Запись добавлена

Комментарии

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

Добавлять комментарии могут только зарегистрированные пользователи, Войдите на сайт под своим именем.