» »

Красивое вертикальное меню minecraft-3 для uCoz


Популярная тематика и под нее создано Красивое вертикальное меню minecraft-3 для uCoz в светлом оттенке цвета. Если честно, только по кнопке можно понять какая тема ресурса, ну если ее поменять, то будет совершенно другой вид. Но должен зеленый дизайн, так как при наведение на рубрику, появляется эта гамма. Можно безусловно переделать к примеру на синий, но мы будем отталкиваться от оригинала.

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

Просто можно посмотреть на картинке, как сам код и стили лягут на белый фон.

Каркас:

Код
<div id="block-cont">
<ul class="bnav">
<li><a class="mgreen" href="/"><span><i class="ico ico_green"></i>Читы для Minecraft</span></a></li>
<li><a class="mgreen" href="http://zornet.ru/"><span><i class="ico ico_green"></i>САЙТ ZORNET.RU</span></a></li>
<li><a class="mgreen" href="/"><span><i class="ico ico_green"></i>Сервера для Minecraft</span></a></li>
<li><a class="mgreen" href="/"><span><i class="ico ico_green"></i>Плагины для Minecraft</span></a></li>
<li><a class="mgreen" href="/"><span><i class="ico ico_green"></i>Текстуры для Minecraft</span></a></li>
<li><a class="mgreen" href="/"><span><i class="ico ico_green"></i>Скачать Minecraft</span></a></li>
<li><a class="mgreen" href="/load/204"><span><i class="ico ico_green"></i>Программы для Minecraft</span></a></li>
<li><a class="mgreen" href="/"><span><i class="ico ico_green"></i>Моды для Minecraft</span></a></li>
<li><a class="mgreen" href="/"><span><i class="ico ico_green"></i>Разное для Minecraft</span></a></li>
<li><a class="mgreen" href="/"><span><i class="ico ico_green"></i>Скины для Minecraft</span></a></li>
</ul><br>
</div>


CSS:

Код
.bnav {
  margin: 0;
  padding: 0;
  width: 238px;
  margin: auto;
  display: block;
  list-style: none;
}

.bnav li {
  margin: 0;
  border-bottom: 1px solid #e4e2e0;
}

.bnav li:last-child {
  border-bottom: 0;
}

.bnav li a {
  display: block;
  color: #747474;
  text-decoration: none;
}

.bnav li a span {
  height: 36px;
  line-height: 36px;
  display: block;
  color: #747474;
  padding: 0 0 0 36px;
  position: relative;
}

.bnav li a.mgreen:hover span {
  color: #ffffff;
  text-shadow: 0 1px 1px #3d9510;
  background: #6eb521;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

.bnav li a.mblue:hover span {
  color: #ffffff;
  text-shadow: 0 1px 1px #1788b2;
  background: #1281aa;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

.ico {
  display: inline-block;
  vertical-align: middle;
  background-position: 0 0;
  width: 16px;
  height: 16px;
}

.ico_green {
  background: url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/minecraft1.png) no-repeat 0 0;
  position: absolute;
  left: 12px;
  top: 10px;
}

.ico_blue {
  background: url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/minecraft1.png) no-repeat 0 -17px;
  position: absolute;
  left: 12px;
  top: 10px;
}


17.05.2015 Просмотров: 409 Комментарий: (0)

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

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

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