ZorNet.Ru — сайт для вебмастера » Меню для сайта » Вертикальное меню как в контакте на CSS

Вертикальное меню как в контакте на CSS

Вашему вниманию графическое меню как на сайте в контакте, где идет вертикальным и по стилистике выполнено аналогично и по функциям. Что можно поставить на светлый дизайн, где по умолчанию оно настроено. Только нужно изначально понимать, где размер блока, должен быть меню 150px и больше. Безусловно все выставлено на стилистике, где сам веб мастер может выставлять тот оттенок, который более подходит под ваш интернет ресурс. Но его оформление не будем описывать, так как большинство понимает, как оно выглядит, и можно посмотреть на изображение.

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

Для определенных типов веб сайтов и дизайне меню могут сделать больше, чем добавить немного визуальной специи на ваш сайт, где также могут улучшить работу пользователя и сделать сайт более удобным для навигации. Если вы подумываете о том, чтобы отказаться от этого маршрута проектирования, вот посмотрите на плюсы и минусы использования.

Установка:

HTML

Код

<div class="zornet_ru_gresam">
  <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="tukolpersa_lintes">
  <a href="">Правила</a> <a href="">Реклама</a> Хостинг от <a href="">ucoz</a>
  </div>
  </nav>
  </div>

CSS

Код

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

  .zornet_ru_gresam ul li a {
  height: 28px;
  line-height: 27px;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #285473;
  display: block;
  }
  .zornet_ru_gresam .left_icon {
  width: 35px;
  height: 25px;
  background: url("http://zornet.ru/Aben/ABGDA/zornet_ru/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;
  }

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

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

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

Источник: Talantlev.ucoz.ru

04 Апреля 2018 Просмотров: 2216 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0