MENU
Главная » Шаблоны и Скрипты для uCoz » Скрипты для uCoz » Меню для uCoz

Вертикальное меню для сайта uCoz

22.08.2015, 13:49
Наверное все видели данную навигацию в киношаблоне, но может кому понадобится просто навигационное меню такого оттенка, сделан рип и получается, что оно не плохо выглядит.

Точнее оно выглядит на все 100% красиво и идеально подойдет для светлого ресурса, если умеете работать с картинками в фотошопе, или другими програмами то можно переделать сами иконки и сделать под свою тематику. С изображениями думаю не трудно что-то придумать под любую тему.

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

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

Код
<div class="bloc1">
  <div class="bloc1_t">Навигация</div>
  <ul class="reset bloc1_btns">
  <li><a href="/">Главная страница</a> </li>
  <li><a href="/">Фильмы</a>
  </li><li><a href="/">Сериалы онлайн</a></li>
  <li><a href="/">Мультфильмы</a>
   
  </li></ul>
  <a href="/">Заказ фильма</a>
  </div>


Далее в стили (css)

Код
.bloc1 {
  background: url(http://uwebik.ru/1/bloc1.png) no-repeat;
  width: 253px;
  margin: 0 0 17px 9px;
}
li {
  list-style-type: none;  
  }
.bloc1_t {
  font-size: 17px;
  color: #FFF;
  text-shadow: 1px 1px 0 #1d508b;
  padding: 18px 0 0 43px;
  height: 51px;
}
.bloc1_btns {
  margin-left: -18px;
  font-size: 16px;
}
ul.reset.bloc1_btns {}
.bloc1_btns li a {
  background: url(http://uwebik.ru/1/bloc1_btns.png) no-repeat;
  width: 218px;
  height: 36px;
  display: block;
  margin-bottom: 3px;
  text-decoration: none;
  color: #2d2d2d;
  line-height: 36px;
  text-indent: 15px;
}
.bloc1_btns li a:hover {
  background-position: 0 -36px;
  color: #FFF;
  text-shadow: 1px 1px 0 #3e7e0d;
}
.bloc1 {
background: url(http://uwebik.ru/1/bloc1.png) no-repeat;
width: 253px;
margin: 0 0 17px 9px;
}
li {
list-style-type: none;
}
.bloc1_t {
font-size: 17px;
color: #FFF;
text-shadow: 1px 1px 0 #1d508b;
padding: 18px 0 0 43px;
height: 51px;
}
.bloc1_btns {
margin-left: -20px;
font-size: 16px;
}
ul.reset.bloc1_btns {}
.bloc1_btns li a {
background: url(http://uwebik.ru/1/bloc1_btns.png) no-repeat;
width: 218px;
height: 36px;
display: block;
margin-bottom: 3px;
text-decoration: none;
color: #2d2d2d;
line-height: 36px;
text-indent: 15px;
}
.bloc1_btns li a:hover {
background-position: 0 -36px;
color: #FFF;
text-shadow: 1px 1px 0 #3e7e0d;
}
.zakaz {
background-image: url(http://uwebik.ru/1/zakaz.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
height: 68px;
width: 250px;
cursor:pointer;
text-indent:-9999px;
margin:20px 0 0 -5px;
}.zakaz:hover {
background-position: 0px -68px;
}



Проверить работоспособность меню можно
нажать
Категория: Меню для uCoz | Добавил: kredit-oformi | Теги: Вертикальное, ucoz, сайта, для, Меню
Просмотров: 1096 | | Комментарии: 1






Всего комментариев: 1
kredit-oformi пишет: | 06.09.2015 | 09:32 #1 Страница с комментарием
kredit-oformi кто-нибудь ставил данное меню?
Like | 0
Оставить свой комментарий

Используются технологии uCoz