Форум русской поддержки Joomla!® CMS
04.12.2016, 20:20:39 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Меню для мобильных приложений и много других вопросов

 (Прочитано 437 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Bismuth
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Сообщений: 141



« : 16.05.2015, 12:52:07 »

Всем доброе время суток
Вот я решил сверстать простеньки мобильный сайт к основному сайту и возникли пару вопрос
Есть ли подходящий плагин меню обычный при нажатии выпадал полное меню, или виде барабана с прокруткой?
и как лучше сделать мобильный сайт разместить на под домене, типа такого мобайл.сайт.ру, или создать в корне основного сайта папку для мобильного и выводилась типа этого сайт.ру/мобайл?
И еще вопрос, какой нужен скрипт, чтоб определял с чего заходят на основной домен, и если заходят с мобилы, или с планшетника, автоматом перекидывал на мобильную версию?

пока вот все
Записан
vegushka
Завсегдатай
*****

Репутация: +36/-1
Offline Offline

Пол: Мужской
Сообщений: 542


Мажьте лоб вазеленкой


« Ответ #1 : 17.05.2015, 00:14:39 »

а можно сделать проще. Использовать шаблон от Rockettheme(ссылка в подписи). Там мобильная версия сайта шаблоном делается. Azn
Записан
Bismuth
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Сообщений: 141



« Ответ #2 : 17.05.2015, 01:28:28 »

а можно сделать проще. Использовать шаблон от Rockettheme(ссылка в подписи). Там мобильная версия сайта шаблоном делается. Azn

Проще это не значит лучше, да и зачем мне чужие шаблоны, я предпочитаю делать свои, хоть и ни чего особого простые, но мне они нравятся, так что это не мое, но все равно спасибо
 
Записан
vegushka
Завсегдатай
*****

Репутация: +36/-1
Offline Offline

Пол: Мужской
Сообщений: 542


Мажьте лоб вазеленкой


« Ответ #3 : 17.05.2015, 01:37:04 »

Проще это не значит лучше, да и зачем мне чужие шаблоны, я предпочитаю делать свои, хоть и ни чего особого простые, но мне они нравятся, так что это не мое, но все равно спасибо
 
ну раз вы по такому пути идете, то кто мешает вам взять все лучшее из шаблона рОкетов и интегрировать в свой шаблон?
Записан
Bismuth
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Сообщений: 141



« Ответ #4 : 17.05.2015, 01:40:44 »

ну раз вы по такому пути идете, то кто мешает вам взять все лучшее из шаблона рОкетов и интегрировать в свой шаблон?
Я плохо знаю РНР можно сказать что вообще не знаю, а про JavaScrip для меня это темный лес, а вот сверстать на HTML с CSS, это я могу, и то правда без наворотов, позно начал изучать это все(((
Записан
bolonia
Осваиваюсь на форуме
***

Репутация: +22/-0
Offline Offline

Сообщений: 197



« Ответ #5 : 17.05.2015, 09:50:15 »

Мобильное меню делается очень просто. Я делал по примеру разработчиков YooTheme. Для начала нужно создать позицию, которая будет выезжать по клику на «Гамбургер». Назовем ее «offcanvas».
Вот примерно как выглядит этот код в index.php шаблона. Этот кусок должен находится внутри <body>:
Код:
<?php if ($this->countModules('offcanvas')) : ?>
    <div class="main-offcanvas">
        <jdoc:include type="modules" name="offcanvas" />
    </div>
<?php endif; ?>

Не забыть прописать позицию в templateDetails.xml!

Далее, задаем стили для offcanvas'а в CSS. Я писал на LESS, перевести в CSS не составит труда, так что учтите это Azn

Код:
/* ==========================================================================
   Offcanvas
   ========================================================================== */

.main-offcanvas {
  display: none;
  width: 300px;
  height: auto;
  position: fixed;
  z-index: 1050;
  top: 0;
  left: -320px;
  bottom: 0;
  overflow-y: auto;
  border-right: 1px solid #949494;
  background: #434343;
  color: #fff;
  transition: all 300ms;

  .menu {
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
    list-style: none;

    a,
    .separator {
      display: block;
      padding: 10px 20px;
      text-decoration: none;
      color: #fff;
      border-bottom: 1px solid #696969;

      &:hover,
      &.active {
        background: #696969;
      }
    }

    .active,
    .current {
      & > a,
      & > .separator {
        background: #696969;
      }
    }

    .separator {
      &.parent {
        &:after {
          content: "";
          display: inline-block;
          position: relative;
          top: -2px;
          margin-left: 10px;
          background: url("../images/arrow-down-white.png") no-repeat center;
          width: 9px;
          height: 5px;
        }

        &.active {

          &:after {
            background-image: url("../images/arrow-up-white.png");
          }
        }
      }
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      a {
        padding-left: 30px;
      }
    }
  }

  &.active {
    transition: all 300ms;
  }
}

Добавляем @media queries, чтобы наш offcanvas был виден только на мелких дисплеях:

Код:
@media all and (max-width: 1023px) {
  .main-offcanvas {
    display: block;

    &.active {
      left: 0;
    }
  }
}

Теперь JS часть. Добавляем 2 функции, которые будут показывать и скрывать offcanvas.

Код:
function showMobileMenu() {
    jQuery('.main-offcanvas').addClass('active');
    jQuery('[data-offcanvas]').addClass('active');

    function hideEvent(e) {
        if(!jQuery(e.target).closest('.main-offcanvas').length) {
            hideMobileMenu();
            jQuery(document).off('click', 'body', hideEvent);
        }
    }

    jQuery(document).on('click', 'body', hideEvent);
}

function hideMobileMenu() {
    jQuery('.main-offcanvas').removeClass('active');
    jQuery('[data-offcanvas]').removeClass('active');
}

И повесим событие на все элементы с аттрибутом data-offcanvas, для удобства (кнопка гамбургера)

Код:
jQuery('[data-offcanvas]').click(function(){
        if (jQuery(this).hasClass('active')) {
            hideMobileMenu();
        } else {
            showMobileMenu();
        }
        return false;
    });

Ну и небольшая вишенка, которая делает аккордеон для пунктов меню разделителей:

Код:
jQuery('.main-offcanvas .separator').each(function() {
        var navChild = jQuery(this).siblings('.nav-child');
        console.log(navChild.length);
        if (navChild.length > 0) {
            jQuery(this).addClass('parent');
            navChild.hide();
        }

        jQuery(this).click(function() {
            if (jQuery(this).hasClass('active')) {
                jQuery(this).removeClass('active');
                navChild.slideUp();
            } else {
                jQuery(this).addClass('active');
                navChild.slideDown();
            }
        });
    });
Записан
bolonia
Осваиваюсь на форуме
***

Репутация: +22/-0
Offline Offline

Сообщений: 197



« Ответ #6 : 17.05.2015, 09:53:03 »

Самое важное забыл написать: для мобильного меню нужно создавать свой модуль меню и публиковать его в offcanvas. Да, это не так оптимально, если бы мы копировали текущее меню через JS, но дает больше преимуществ, например, при настройке модуля через админку. Помимо модуля меню, в offcanvas можно опубликовать модуль поиска.
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #7 : 17.05.2015, 09:56:14 »

граммотно написано, сохраню себе в закладку...
а я использовал компонент Мобилесайт
нужно будет-дам ссылку(может не так назвал, непомню дословно имя)
он автоматом сайт переводит под мобильно-планшетную версию и ставить легко, только там уже в настройках нужно правку для шаблона своего.
Записан
Bismuth
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Сообщений: 141



« Ответ #8 : 17.05.2015, 11:53:02 »

Спасибо попробую Ваш метод создание меню

граммотно написано, сохраню себе в закладку...
а я использовал компонент Мобилесайт
нужно будет-дам ссылку(может не так назвал, непомню дословно имя)
он автоматом сайт переводит под мобильно-планшетную версию и ставить легко, только там уже в настройках нужно правку для шаблона своего.

Дайте пожалуйста ссылку )))
Записан
vipiusss
Профи
********

Репутация: +260/-8
Offline Offline

Пол: Мужской
Сообщений: 4570


Skype: renor_


« Ответ #9 : 17.05.2015, 12:05:01 »

http://www.mobilejoomla.com
там есть фри версия.
лично я ставил и работает.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet