1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

Боковое меню

Тема в разделе "Модификации шаблонов", создана пользователем Георгий Шевченко, 2 июл 2014.

Загрузка
  1. Георгий Шевченко

    Георгий Шевченко Пользователь

    Регистрация:
    07.12.13
    Сообщения:
    44
    Симпатии:
    25
    Версия XF:
    1.4.7
    Автор: Георгий Шевченко

    Возможности меню:
    • Быстро прокрутить вверх страницу
    • Вернуться на предыдущею страницу
    • Начать переписку
    • Полностью перезагрузить страницу форума
    • Остановить автоматическую прокрутку
    • Включить автоматическую прокрутку
    • Если вы нажали на предыдущею страницу , имеется возможность вернуться на ту страницу с который вы нажали вернуться назад
    • Быстро прокрутить вниз страницу
    Установка:

    1) Залить содержимое папки styles

    2) Идем в шаблон PAGE_CONTAINER
    После тэга [/head] вставляем
    Код:
    <script language="javascript">
      suspendcode="<div id='ew_toolbox' align='center'><a onclick='javascript:amutop();return false;' href='#'  title='Вверх'><img border=0 src=\"styles/EternalWorld/Menu/up.png\" width=\"24\"></a><br><a onclick='javascript:history.back();return false;' href='#' title='Назад'><img border=0 src=\"styles/EternalWorld/Menu/back.png\" width=\"24\"></a><br><a href='{xen:link conversations/add}' title='Начать переписку'><img border=0 src=\"styles/EternalWorld/Menu/contact.png\" width=\"24\"></a><br><a href='javascript:confirmRefresh();' title='Обновить страницу'><img border=0 src=\"styles/EternalWorld/Menu/refresh.png\" width=\"24\"></a><br><a onclick='javascript:sc();return false;' href='#' title='Стоп'><img border=0 src=\"styles/EternalWorld/Menu/pause.png\" width=\"24\"></a><br><a onclick='javascript:clearInterval(timer);initialize();return false;' href='#'  title='Включить авто прокрутку'><img border=0 src=\"styles/EternalWorld/Menu/autodown.png\" width=\"24\"></a><br><a onclick='javascript:history.go(+1);return false;'  href='#' title='Вперед'><img border=0 src=\"styles/EternalWorld/Menu/to.png\" width=\"24\"></a><br><a onclick='javascript:amubutton();return false;'  href='#' title='Вниз'><img border=0 src=\"styles/EternalWorld/Menu/down.png\" width=\"24\"></a></div>"
      document.write(suspendcode);
      var currentpos,timer;
      function initialize()
      {
      timer=setInterval ("scrollwindow ()",30);
      }
      function sc()
      {
      clearInterval(timer);
      }
      function scrollwindow()
      {
      currentpos = document.documentElement.scrollTop || document.body.scrollTop;
      window.scrollTo(0,++currentpos);
      }
      function amutop()
      {
      window.scrollTo(0,0)
      clearInterval(timer);
      }
      function amubutton()
      {
      window.scrollTo(0,80000)
      clearInterval(timer);
      }
      function confirmRefresh() {
      var okToRefresh = confirm("Вы хотите полностью перезагрузить страницу?");
      if (okToRefresh)
      {
      setTimeout("location.reload(true);",500);
      }
    }
    </script>
    

    3) Ищем шаблон EXTRA.CSS
    Вставляем
    в любое место
    Код:
    #ew_toolbox{z-index:99;opacity: .7;width:26px;position:fixed;left:1px;top:250px;background:transparent;-moz-border-radius:5px}
    #ew_toolbox:hover{opacity:1}
    
    4) Готово.

    Живая демонстрация:
     

    Вложения:

    Oleg-2012 и Skaiman нравится это.
  2. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    221
    Версия XF:
    1.4.0
    Протестил меню, понравилось, но не удержался и внес свои изменения, да простит меня автор! ;)
    1. Картинки заменил на одну, теперь на спрайтах.
    sprite_ew.png
    2. Ну немного изменил расположение кнопок (это не столь важно, каждому на свое усмотрение)
    3. Внес изменения в js, в соответствии с моей картинкой, сделал сам файл ew_menu.js, в моем варианте в PAGE_CONTAINER, вносится только
    Код:
    <script type="text/javascript" src="js/ew_menu.js"></script>
    Перед закрывающим тегом </body>, я добавил так:
    Код:
    <xen:include template="page_container_js_body" />
    <script type="text/javascript" src="js/ew_menu.js"></script>
    </xen:hook>
    </body>
    4. Изменил немного стили CSS, прозрачность увеличил с 0.7 до 0.4 и при наведении курсора проявляется не вся менюшка, а только отдельная кнопка, на которую наведен курсор.
    Код:
    #ew_toolbox{z-index:99;width:32px;position:fixed;left:1px;top:250px;background:transparent;}
    .sprite_ew {
        display:block;
        width:32px;
        height:32px;
        background:url(./styles/EternalWorld/Menu/sprite_ew.png)!important;
        background-repeat:no-repeat;
        border-radius: 0!important;
        border: 0!important;
        float: left;
    }
    #to {background-position:0 0!important;opacity: .4;}
    #to:hover {opacity:1}
    #back {background-position:0 -32px!important;opacity: .4;}
    #back:hover {opacity:1}
    #up {background-position:0 -64px!important;opacity: .4;}
    #up:hover {opacity:1}
    #down {background-position:0 -96px!important;opacity: .4;}
    #down:hover {opacity:1}
    #autodown {background-position:0 -128px!important;opacity: .4;}
    #autodown:hover {opacity:1}
    #pause {background-position:0 -160px!important;opacity: .4;}
    #pause:hover {opacity:1}
    #contact {background-position:0 -192px!important;opacity: .4;}
    #contact:hover {opacity:1}
    #refresh {background-position:0 -224px!important;opacity: .4;}
    #refresh:hover {opacity:1}
    Во вложение архив меню и PSD кнопок.
     

    Вложения:

    • EW-MENU 1.0.1.zip
      Размер файла:
      10 КБ
      Просмотров:
      14
    • sprite_ew.zip
      Размер файла:
      18,7 КБ
      Просмотров:
      13
    Romchik®, Oleg-2012, Mirovinger и ещё 1-му нравится это.
  3. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    221
    Версия XF:
    1.4.0
    Еще одно маленькое дополнение. Если в CSS заменить строчку:
    Код:
    #ew_toolbox{z-index:99;width:32px;position:fixed;left:1px;top:250px;background:transparent;}
    На:
    Код:
    #ew_toolbox{z-index:99;width:32px;position:fixed;left:-20px;top:250px;background:transparent;}
    #ew_toolbox{
         -webkit-transition: 0.55s;
         -moz-transition: 0.55s;
         transition: 0.55s;
    }
    #ew_toolbox:hover{left:1px;}
    То меню будет скрываться где то на 2/3, а при наведении появляться с небольшим замедлением.
     
    demon124, Romchik® и Oleg-2012 нравится это.
  4. Oleg-2012

    Oleg-2012 Местный

    Регистрация:
    21.04.12
    Сообщения:
    644
    Симпатии:
    263
    Георгий Шевченко, Skaiman хочу выразить слова благодарности, эта менюшка просто находка !:thumbsup:
     

Поделиться этой страницей