ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Красивое вертикальное меню minecraft-3 для uCoz

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

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

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

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

Каркас:

Код

<div id="block-cont">
<ul class="bnav">
<li><a class="mgreen" href="/">Читы для Minecraft</a></li>
<li><a class="mgreen" href="http://zornet.ru/">САЙТ ZORNET.RU</a></li>
<li><a class="mgreen" href="/">Сервера для Minecraft</a></li>
<li><a class="mgreen" href="/">Плагины для Minecraft</a></li>
<li><a class="mgreen" href="/">Текстуры для Minecraft</a></li>
<li><a class="mgreen" href="/">Скачать Minecraft</a></li>
<li><a class="mgreen" href="/load/204">Программы для Minecraft</a></li>
<li><a class="mgreen" href="/">Моды для Minecraft</a></li>
<li><a class="mgreen" href="/">Разное для Minecraft</a></li>
<li><a class="mgreen" href="/">Скины для Minecraft</a></li>
</ul> 
</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 Мая 2015 Просмотров: 1553 Комментариев: (0)

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

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

Kosten

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