Одностроничный шаблон FerroMenu для uCoz
827материалов
228тем на форуме
3004комментария
6159пользователей

Одностроничный шаблон FerroMenu для uCoz


Описание:

Одностраничный шаблон FerroMenu - это не обычные табы, которые можно заполнить любим содержимым.

Установка:

Для начала скачиваете архив с нашего сайта и папку ferromenu загружаете в свой файловый менеджер.

Теперь создаете страницу динамическую (через редактор страниц) или статическую (в файловым менеджере с расширением html) страницу и вставляете в нее данный код:
Код
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Название страницы</title>
<link rel="stylesheet" href="/ferromenu/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/ferromenu/ferromenu.css" />
<link rel="stylesheet" href="/ferromenu/matereails.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="/ferromenu/jquery.js" type="text/javascript"></script>
<script src="/ferromenu/jqueryferro.js" type="text/javascript"></script>
<script src="/ferromenu/transit.js" type="text/javascript"></script>       
<script type="text/javascript">
var currentIndex = 0;
var currentId = "templateblocks";
$(document).ready(function() {
$("#nav").ferroMenu({
position : "left-center",
delay : 50,
rotation : 720,
margin : 20
});
});
var colors = {
"templateblocks" : {
"background" : "#45688E",
"index" : 0
},
"templateblocks1" : {
"background" : "#3b5998",
"index" : 1
       },
       "templateblocks2" : {
       "background" : "#00aced",
       "index" : 2
       },
       "templateblocks3" : {
       "background" : "#0d4d42",
       "index" : 3
       },
       "templateblocks4" : {
       "background" : "#F6881F",
       "index" : 4
       },
       "templateblocks5" : {
       "background" : "#c08d64",
       "index" : 5
       }
             
       };
             
       function goTo(id){
       var obj = eval("colors."+id);
             
       $("body").css("background",obj.background);
       $(".ferromenu-controller,#nav li a").css("color",obj.background);
       if(obj.index > currentIndex){
       $(".active").addClass("off");
       $(".active").transition({
       x : -100,
       opacity : 0,
       zIndex : 0
       },600);
             
       $("#"+currentId).removeClass("active");
             
       $("#"+id).addClass("active");
       $("#"+id).transition({
       x : 400
       },0,function(){
       $("#"+id).removeClass("off");
       $("#"+id).transition({
       x : 0,
       opacity : 1,
       zIndex : 2
       },600);
       });
       }else if(obj.index < currentIndex){
       $(".active").addClass("off");
       $(".active").transition({
       x : 100,
       opacity : 0,
       zIndex : 0
       },600);
       $("#"+currentId).removeClass("active");
             
             
       $("#"+id).addClass("active");
       $("#"+id).transition({
       x : -400
       },0,function(){
       $("#"+id).removeClass("off");
       $("#"+id).transition({
       x : 0,
       opacity : 1,
       zIndex : 2
       },600);
       });
       }
       currentIndex = obj.index;
       currentId = id;
             
       }
       </script>
       </head>
       <body>
       <ul id="nav">
       <li><a href="javascript:goTo('templateblocks');"><i class="fa fa-vk"></i></a></li>
       <li><a href="javascript:goTo('templateblocks1');"><i class="fa fa-facebook"></i></a></li>
       <li><a href="javascript:goTo('templateblocks2');"><i class="fa fa-twitter"></i></a></li>
       <li><a href="javascript:goTo('templateblocks3');"><i class="fa fa-whatsapp"></i></a></li>
       <li><a href="javascript:goTo('templateblocks4');"><i class="fa fa-odnoklassniki"></i></a></li>
       <li><a href="javascript:goTo('templateblocks5');"><i class="fa fa-instagram"></i></a></li>
       </ul>
       <section id="content">
             
       <article id="templateblocks" class="active">
       <i class="fa fa-vk"></i>
       <h1>Название первой вкладки</h1>
       <div class="cnt">
       Содержимое первой вкладки
       </div>
       </article>
       <article id="templateblocks1" class="off">
       <i class="fa fa-facebook"></i>
       <h1>Название второй вкладки</h1>
       <div class="cnt">
Содержимое второй вкладки
       </div>
       </article>
       <article id="templateblocks2" class="off">
       <i class="fa fa-twitter"></i>
       <h1>Название третей вкладки</h1>
       <div class="cnt">
Содержимое третей вкладки
       </div>
       </article>
       <article id="templateblocks3" class="off">
       <i class="fa fa-whatsapp"></i>
       <h1>Название четвертой вкладки</h1>
       <div class="cnt">
       Содержимое четвертой вкладки
       </div>
       </article>
       <article id="templateblocks4" class="off">
       <i class="fa fa-odnoklassniki"></i>
       <h1>Название пятой вкладки</h1>
       <div class="cnt">
Содержимое пятой вкладки
       </div>
       </article>
       <article id="templateblocks5" class="off">
       <i class="fa fa-instagram"></i>
       <h1>Название шестой вкладки</h1>
       <div class="cnt">
       Содержимое шестой вкладки
       </div>
       </article>
       </section>
       </body>
</html>

P.S при создании динамической страница не забудьте добавить код $POWERED_BY$, а то система не даст сохранить шаблон.

Основные особенности FerroMenu:

  • Положение меню в одном из 9 якорных точек экрана: верхний левый, верхний центр, верхний правый, центральный левый, центральный-центр, центр справа, внизу слева, снизу-центр, нижний правый
  • Меню двигаться просто путем перетаскивания его по экрану. Когда сопротивление заканчивается, меню будет позиционировать себя в ближайшей точке крепления
  • Настроить аспект меню, просто изменив это CSS
  • Настроить переходы установки их продолжительность, ослабление, задержку пунктов меню, угол поворота для открывания / закрывания действия, поля от края окна просмотра, радиус (т.е. расстояние элементов от контроллера)
  • Пункты этого меню будут перестроены после каждого движения, основываясь на доступного пространства вокруг меню
Настройка расположения меню:

Чтобы расположить меню в другом месте страницы, найдите кусок кода position : "left-center" и left-center замените на ниже приведенные варианты:
  • left-top - слева сверху
  • center-top - сверху по середине
  • right-top - справа сверху
  • right-bottom - справа снизу
  • center-bottom - по середине снизу
  • left-bottom - слева снизу
  • right-center - справа по центре
  • left-center - слева по центру
  • center-center - по центру

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Шаблон опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о шаблоне:
Дата добавления материала: 25.08.2016 в 21:00
Материал просмотрен: 851 раз
Категория материала: Шаблоны для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта