info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  [ 1 сообщение ]  Просмотры: 175

Автор Сообщение
Не в сети
(Андрей)  
Администратор
Аватара пользователя

Стаж: 8 лет 1 день
Сообщения: 1219
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Скрипт скрытой панели, открывающейся "поворотом" страницы

Довольно оригинальная разработка. Ставится очень просто и вроде багов не наблюдается.

посмотреть демо
(наведите курсор на полоски слева страницы)

Установка:

Скачать из файлового архива сайта

Распаковать, загрузить в корень форума папку 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('ваш путь до картинки')">


либо (если фон-цвет)

Код: Выделить всё

<div style="background: #цвет">


Вставить перед </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')}


часть кода

Код: Выделить всё

background:url('images/fon.jpg')


отвечает за фон "за дверью". в данном случае картинка фона находится в папке images в скачанной папке скрипта.
если вы хотите вместо картинки цветной фон - замените

Код: Выделить всё

background:url('images/fon.jpg')


на

Код: Выделить всё

background:#цвет


строка

Код: Выделить всё

.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 формирует ширину рабочей зоны "за дверью" и т.д....


может кому и пригодится... :)


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
javascript поворота
Показать сообщения за:  Поле сортировки  
Ответить на тему  [ 1 сообщение ] 

Кто сейчас на сайте:

Всего посетителей: 0, из них зарегистрированных: 0, скрытых: 0 и гостей: 0 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (46) здесь было 01 янв 2023, 13:40

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 0

Часовой пояс: UTC + 2 часа



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения
Вы можете защищать свои темы паролем

Найти:
Перейти:  




cron

Текущее время: 22 сен 2023, 16:50

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид