1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
Для добавления необходима авторизация
Ваша корзина
Ваша корзина пуста
Зона обмена Вертикальное меню копия вк от waaka

Архив
Объём архива 5.7 Kb
Количество скачиваний 9

Скачать архив
закрыть
Скачивание файлов без ограничений доступно только зарегистрированным пользователям. ВХОДРЕГИСТРАЦИЯ
waak
написать автору
пожаловаться
ID материала № 45
Авторwaak
CMSuCoz
Просмотров 333
Добавлено 24.03.2018
Комментариев 0

Вертикальное меню копия вк от waaka

Всем привет! вот выкладываю как и обещал рип вертикального меня с сайта вконтакте со всеми пунктами и иконками как в оригинале

Размер блока меню 150px
вид меню



Установка


Копируем код ниже и размещаем его в нужное место

Код

<div class="left_bc">
  <nav>
  <ul>
  <li><a href=""> <span class="left_icon" style=" background-position: 7px 6px;"></span> Моя страница</a></li>
  <li><a href=""> <span class="left_icon" style="background-position: 7px -917px;"></span> Новости</a></li>
  <li><a href=""> <span class="left_icon" style="background-position: 7px -21px;"></span> Сообщения</a></li>
  <li><a href=""> <span class="left_icon" style="background-position: 7px -77px;"></span> Друзья</a></li>
  <li><a href=""> <span class="left_icon" style="background-position: 7px -105px;"></span> Группы</a></li>
  <li><a href=""> <span class="left_icon" style="background-position: 7px -133px;"></span> Фотографии</a></li>
  <li><a href=""> <span class="left_icon" style="background-position: 7px -161px;"></span> Музыка</a></li>
  <li><a href=""> <span class="left_icon" style="background-position: 7px -189px;"></span> Видео</a></li>
  <li><a href=""> <span class="left_icon" style="background-position: 7px -217px;"></span> Игры</a></li>
  <div class="more_div l_main"></div>
  <li><a href=""> <span class="left_icon" style="background-position: 7px -944px;"></span> Товары</a></li>
  <li><a href=""> <span class="left_icon" style="background-position: 7px -301px;"></span> Закладки</a></li>
  <li><a href=""> <span class="left_icon" style="background-position: 7px -273px;"></span> Документы</a></li>
  <div class="more_div l_main"></div>
  <li><a href=""> <span class="left_icon"></span> Моя страница</a></li>
  </ul>
  <div class="foot">
  <a href="">Правила</a> <a href="">Реклама</a> Хостинг от <a href="">ucoz</a>
  </div>
  </nav>
  </div>


Ну и стили нашего меню нужно поместить в таблицу стилей в самый конец

Код

.left_bc {
  width: 150px;
  overflow: hidden;
}
.left_bc ul li:hover {
  background: #e1e5eb;
  text-decoration: none;
  border-radius: 2px;
}

.left_bc ul li a {
  height: 28px;
  line-height: 27px;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #285473;
  display: block;
}
.left_bc .left_icon {
  width: 35px;
  height: 25px;
  background: url("../img/menu_icon.png") no-repeat 7px -441px;
  display: block;
  float: left;
}

.more_div {
  margin-top: 9px;
  margin-left: 27px;
  margin-right: 6px;
  padding-top: 9px;
  border-top: 1px solid #dfe2e8;
}

.foot {
  padding-top: 16px;
  margin-top: 10px;
  border-top: 1px solid #dfe2e8;
  color: #939699;
  line-height: 19px;
  font-size: 12px;
}

.foot a {
  padding-right: 10px;
  color: #939699;
  white-space: nowrap;
  line-height: 19px;
  font-size: 12px;
}

.foot a:hover {
  text-decoration: underline;
}


Теперь скачаем архив и загрузим картинку из него в папку img в свой файловый менеджер
0 6
Вимание:
При копирование материалов. указание автора материала и наличие в теле копируемого (перерабатываемого) материала активной ссылки на сайт talantlev.ucoz.ru обязательно!
Уважайте чужой труд!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Гость
Для добавления необходима авторизация