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

Bismuth

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

пока вот все
*

vegushka

  • Завсегдатай
  • 535
  • 35
  • Мажьте лоб вазеленкой
а можно сделать проще. Использовать шаблон от Rockettheme(ссылка в подписи). Там мобильная версия сайта шаблоном делается. :)
ненавижу icetheme, обожаю Rockettheme
Ваше спасибо - в репу, а лучше на Яндекс 41001140731879
*

Bismuth

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

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

vegushka

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

Bismuth

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

bolonia

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

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

vipiusss

  • Профи
  • 5656
  • 324
  • Злой я сегодня.Без обид.
граммотно написано, сохраню себе в закладку...
а я использовал компонент Мобилесайт
нужно будет-дам ссылку(может не так назвал, непомню дословно имя)
он автоматом сайт переводит под мобильно-планшетную версию и ставить легко, только там уже в настройках нужно правку для шаблона своего.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Bismuth

  • Осваиваюсь на форуме
  • 140
  • 2
Спасибо попробую Ваш метод создание меню

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

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

vipiusss

  • Профи
  • 5656
  • 324
  • Злой я сегодня.Без обид.
http://www.mobilejoomla.com
там есть фри версия.
лично я ставил и работает.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Странно ведет себя стандартное меню. Помогите, люди добрые

Автор Little Muk

Ответов: 0
Просмотров: 45
Последний ответ 24.09.2017, 23:20:34
от Little Muk
Меню во всю ширину

Автор mastamatey

Ответов: 9
Просмотров: 117
Последний ответ 20.09.2017, 13:25:44
от mastamatey
Пункт меню - Блог категорий

Автор Pusr

Ответов: 0
Просмотров: 32
Последний ответ 19.09.2017, 13:02:33
от Pusr
Как сделать два разных меню для конкретных страниц\?

Автор aniangeless

Ответов: 1
Просмотров: 70
Последний ответ 17.09.2017, 13:32:50
от vipiusss
не отображается привязка модуля к пунктам меню

Автор s0l0mka

Ответов: 3
Просмотров: 52
Последний ответ 04.09.2017, 13:40:08
от effrit