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

  • 9 Ответов
  • 632 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Оффлайн Bismuth

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

пока вот все

*

Оффлайн vegushka

  • *****
  • 535
  • [+]36 / [-]1
  • Мажьте лоб вазеленкой
    • Просмотр профиля
а можно сделать проще. Использовать шаблон от Rockettheme(ссылка в подписи). Там мобильная версия сайта шаблоном делается. :)
ненавижу icetheme, обожаю Rockettheme
Ваше спасибо - в репу, а лучше на Яндекс 41001140731879

*

Оффлайн Bismuth

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

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

*

Оффлайн vegushka

  • *****
  • 535
  • [+]36 / [-]1
  • Мажьте лоб вазеленкой
    • Просмотр профиля
Проще это не значит лучше, да и зачем мне чужие шаблоны, я предпочитаю делать свои, хоть и ни чего особого простые, но мне они нравятся, так что это не мое, но все равно спасибо
 
ну раз вы по такому пути идете, то кто мешает вам взять все лучшее из шаблона рОкетов и интегрировать в свой шаблон?
ненавижу icetheme, обожаю Rockettheme
Ваше спасибо - в репу, а лучше на Яндекс 41001140731879

*

Оффлайн Bismuth

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

*

Оффлайн bolonia

Мобильное меню делается очень просто. Я делал по примеру разработчиков 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 не составит труда, так что учтите это :)

/* ==========================================================================
   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();
            }
        });
    });
Бесплатный модуль обратного звонка / обратной связи для J3: http://joomlaforum.ru/index.php?topic=309065.0

*

Оффлайн bolonia

Самое важное забыл написать: для мобильного меню нужно создавать свой модуль меню и публиковать его в offcanvas. Да, это не так оптимально, если бы мы копировали текущее меню через JS, но дает больше преимуществ, например, при настройке модуля через админку. Помимо модуля меню, в offcanvas можно опубликовать модуль поиска.
Бесплатный модуль обратного звонка / обратной связи для J3: http://joomlaforum.ru/index.php?topic=309065.0

*

Онлайн vipiusss

  • ********
  • 5435
  • [+]327 / [-]10
  • Skype: renor_
    • Просмотр профиля
граммотно написано, сохраню себе в закладку...
а я использовал компонент Мобилесайт
нужно будет-дам ссылку(может не так назвал, непомню дословно имя)
он автоматом сайт переводит под мобильно-планшетную версию и ставить легко, только там уже в настройках нужно правку для шаблона своего.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

Оффлайн Bismuth

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

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

Дайте пожалуйста ссылку )))

*

Онлайн vipiusss

  • ********
  • 5435
  • [+]327 / [-]10
  • Skype: renor_
    • Просмотр профиля
http://www.mobilejoomla.com
там есть фри версия.
лично я ставил и работает.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями