Скрипт скрытой панели, открывающейся "поворотом" страницы Довольно оригинальная разработка. Ставится очень просто и вроде багов не наблюдается.
скачать из архива сайта посмотреть демо(в демо наведите курсор на полоски слева страницы)
Установка:
Скачать архив, распаковать, загрузить в корень форума папку
list_repeatОткрыть файл "шапки", например overall_header.html
Найти
Вставить перед найденным
Код: Выделить всё
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="list_repeat/css/box-lid.css">
<link rel="stylesheet" type="text/css" href="list_repeat/css/box-lid-nav.css">
<script src="list_repeat/js/jquery.box-lid.js"></script>Найти
Вставить после найденного
Код: Выделить всё
<div class="box-lid-menu">
<div class="box-lid-icon"></div>
<nav>
<!---- здесь находится то самое меню, которое "за дверью" --->
<h4>Меню</h4>
<ul>
<li><a href="#" title="ссылка 1">ссылка 1</a></li>
<li><a href="#" title="ссылка 2">ссылка 2</a></li>
<li><a href="#" title="ссылка 3">ссылка 1</a></li>
</ul>
<!--- меню закончено --->
</nav>
</div>
<div class="box-lid">
<div class="box-lid-content">
<!--- открывается "поворачиваемый" блок --->
<!--- скрипт вывода полоски открытия. в данном месте влияет на ВСЕ страницы сайта --->
<script>
$('.box-lid-menu').boxLid();
</script>
<!--- скрипт вывода закончен --->Открыть "подвал" сайта, например overall_footer.html
Найти
Вставить перед найденным
Код: Выделить всё
<!--- "поворачиваемый" блок закончен --->
</div>
</div> Если у вас на сайте был поставлен фон-картинка, то, после установки этого скрипта он перестанет работать, так как скрипт затрагивает всё поле
<body> и всё настройки до него уже не работают.
Для исправления этой проблемы надо "обрамить" всё содержание
<body> в отдельный блок.
Вот так:
Вставить после (в файле overall_header.html) /шапке/
Код: Выделить всё
</script>
<!--- скрипт вывода закончен --->код (если картинка)
Код: Выделить всё
<div style="background: url('ваш путь до картинки')">либо (если фон-цвет)
Вставить перед
</body> в файле overall_footer.html /подвале/
ещё один
</div> чтобы получилось так
Код: Выделить всё
<!--- "поворачиваемый" блок закончен --->
</div>
</div>
</div>
небольшие пояснения по коду
в файле
box-lid.css находятся основные настройки дизайна.
например, в строке
Код: Выделить всё
.box-lid{-webkit-perspective:2000px;-moz-perspective:2000px;-ms-perspective:2000px;-o-perspective:2000px;perspective:2000px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;-ms-perspective-origin:50% 50%;-o-perspective-origin:50% 50%;perspective-origin:50% 50%;background:url('images/fon.jpg')}часть кода
отвечает за фон "за дверью". в данном случае картинка фона находится в папке images в скачанной папке скрипта.
если вы хотите вместо картинки цветной фон - замените
на
строка
Код: Выделить всё
.box-lid-menu{-webkit-transition:all 250ms cubic-bezier(0.75, 0, 0.175, 1);-moz-transition:all 250ms cubic-bezier(0.75, 0, 0.175, 1);-o-transition:all 250ms cubic-bezier(0.75, 0, 0.175, 1);transition:all 250ms cubic-bezier(0.75, 0, 0.175, 1);width:200px;background:rgba(0,0,0,0.08);position:fixed;height:100%;top:0;left:0;z-index:2}это полоска открытия слева экрана, в строках ниже код
width:200px формирует ширину рабочей зоны "за дверью" и т.д....
может кому и пригодится...
