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

Bismuth

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

пока вот все
*

vegushka

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

Bismuth

  • Захожу иногда
  • 138
  • 2 / 0
а можно сделать проще. Использовать шаблон от Rockettheme(ссылка в подписи). Там мобильная версия сайта шаблоном делается. :)

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

vegushka

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

Bismuth

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

bolonia

  • Захожу иногда
  • 222
  • 27 / 0
Мобильное меню делается очень просто. Я делал по примеру разработчиков 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

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

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
граммотно написано, сохраню себе в закладку...
а я использовал компонент Мобилесайт
нужно будет-дам ссылку(может не так назвал, непомню дословно имя)
он автоматом сайт переводит под мобильно-планшетную версию и ставить легко, только там уже в настройках нужно правку для шаблона своего.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Bismuth

  • Захожу иногда
  • 138
  • 2 / 0
Спасибо попробую Ваш метод создание меню

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

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

vipiusss

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

Один пункт меню думает что он главный

Автор DamaVbubi

Ответов: 4
Просмотров: 248
Последний ответ 13.02.2024, 19:49:10
от DamaVbubi
[Решено] Перестали работать переходы по меню сайта

Автор AlexP750

Ответов: 12
Просмотров: 480
Последний ответ 06.02.2024, 12:42:26
от AlexP750
Пропало главное меню, и контент на главной (после обновления)

Автор GTHack

Ответов: 15
Просмотров: 517
Последний ответ 07.01.2024, 16:00:15
от ProtectYourSite
Автоматическая снятие с публикации пункта меню

Автор all_zer

Ответов: 2
Просмотров: 322
Последний ответ 30.12.2023, 15:29:58
от all_zer
Отображение меню мобильной версии сайта

Автор AnSk

Ответов: 1
Просмотров: 331
Последний ответ 22.08.2023, 18:52:55
от arma