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

rubinded

  • Захожу иногда
  • 54
  • 0 / 0
Ребята, недавно столкнулся с такой задачей - "Реализация Off-Canvas меню на сайте под управлением Joomla 2.5". Столкнулся и застрял уже на неделю. Посмотрев в интернете, нашел много примеров создания такого меню: на чистом CSS, на CSS + скрипты и прочее, прочее, прочее. Но есть ОГРОМНАЯ проблема: как вставить это меню на сайт? С CSS и скриптами все ясно. Не понятно другое: куда вставлять HTML код этих меню? Перерыл весь интернет, и так и не нашел вразумительного ответа... :( :( :( Если в модуль HTML, то в какую позицию его выводить? В одну из колонок глючит, не работает. В общем слезно прошу Вашей помощи... Помогите разобраться, неужели никто с этим не сталкивался...? очень нужно!

Вот несколько примеров таких меню (я работаю над первым):
http://www.sitehere.ru/mnogourovnevoe-vydvigayushheesya-menyu#comment-4249
http://sarbas.org/posts/offcanvas.html

Буду очень благодарен за любую подсказку  !
*

zikkuratvk

  • Глобальный модератор
  • 4819
  • 344 / 2
  • Обслуживаем проекты - дорого.
Судя по примерам. Тут вам надо подходить комплексно.
Переопределить шаблон модуля меню. А лучше создать отдельный шаблон модуля.
Внести в этот шаблон необходимую разметку.
После чего отредактировать шаблон самого сайта и создать необходимую позицию с разметкой.
Хотя судя по HTML коду можно просто шаблон модуля меню отредактировать и вывести чуть ли не на любой позиции сайта.
Хочется уникальное расширение? ===>>>> JoomLine - Разрабатываем расширения под заказ.
Использую хостинг TimeWeb и Reg
*

Arkadiy

  • Гуру
  • 5317
  • 463 / 2
  • Крепитесь, други.
Это надо делать в шаблоне. Пример на foundation http://foundation.zurb.com/docs/components/offcanvas.html Все просто. Как два пальца об асфальт.
*

МихаилМ

  • Захожу иногда
  • 55
  • 2 / 0
шаблон править надо (если ваш не предусматривает)

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

1. откройте файл шаблона и сразу после тега <body> поставьте кусочек
Код
<div class="off-canvas-menu" id="off-canvas-menu">
                        <button class="close-button" id="close-button">Закрыть меню</button>
<nav>
<jdoc:include type="modules" name="off-canvas-menu" style="none" />
</nav>
</div>

2. в файле templateDetails.xml шаблона найдите позиции (<positions>) модулей и вставьте
Код
<position>off-canvas-menu</position>

3. в файле стилей CSS  шаблона накидайте нечто вроде:
Код
body {
overflow-x:hidden;
}
.off-canvas-menu {
position: fixed;
z-index: 999999;
width: 300px;
height: 100%;
background: black;
color:white;
-webkit-transform: translate3d(-320px,0,0);
transform: translate3d(-320px,0,0);
-webkit-transition: transform 0.5s;
transition: transform 0.5s;
}
.off-canvas-menu.open {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: transform 0.2s;
transition: transform 0.2s;
}
по своему вкусу делайте анимацию и эффекты

4. далее вставляем кнопку куда вам надо на сайте - триггер для меню
Код
<button class="open-button" id="open-button">Открыть меню</button>

5. далее, нам нужен обработчик триггера для меню, чтобы оно выплывало, ищем файл скриптов шаблона, или же внутри какого либо модуля можно вставить код
а. если на сайте есть jQuery  то
Код
$("#open-button, #close-button").click(function() {
        $("#off-canvas-menu").toggleClass("open");
});

б, если нет jQuery то "ванилла"
возвращаемся к пункту 4, правим кнопку
Код
<button class="open-button" id="open-button" onclick="openmenu()">Открыть меню</button>
кнопку закрытия (пункт 1) тоже изменим
Код
<button class="close-button" id="close-button" onclick="closemenu()">Закрыть меню</button>
вставляем javascript код
Код
function openmenu(){
document.getElementById('off-canvas-menu').classList.add('open');
}
function closemenu(){
         document.getElementById('off-canvas-menu').classList.remove('open');
        }

важно чтобы код скрипта был после загрузки jQuery  и ниже самого элемента-кнопки


вот вкратце все. есть куча еще способов,  и даже без javascript  а чисто на css3

возможно есть ошибки в коде, опечатки могли быть, сама логика должна быть понятна
« Последнее редактирование: 17.02.2015, 20:40:48 от МихаилМ »
*

rubinded

  • Захожу иногда
  • 54
  • 0 / 0
Огромное спасибо что откликнулись!
Цитировать
1. откройте файл шаблона и сразу после тега </head>  поставьте кусочек
Вы имеете в виду index.php? или index.htm
*

МихаилМ

  • Захожу иногда
  • 55
  • 2 / 0
Огромное спасибо что откликнулись! Вы имеете в виду index.php? или index.htm

корень - /templates/папка_вашего_шаблона/index.php

если шаблон клубный и на какой-нибудь фреймворке  найдите php файл отвечающий за вывод страницы
*

rubinded

  • Захожу иногда
  • 54
  • 0 / 0
Спасибо, по Вашему примеру почти получилось сделать (подглючивает немножко, но это уже огромный шаг вперед). Не могли бы Вы посмотреть куда вставить такое меню (код напишу ниже). Смысл благодаря Вам я уже понял, но тут ХТМЛ-ка в едином файле, я так понимаю, что ее нужно разбить и вставлять в разные части (файлы, но вот куда что...?) Файлы с CSS со скриптами я уже залил на сайт. Как быть теперь с этим HTML не пойму... Гляньте если не сложно:
Код
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,nofollow" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Многоуровневое меню - Демо 3</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<div class="mp-pusher" id="mp-pusher">
<nav id="mp-menu" class="mp-menu">
<div class="mp-level">
<h2 class="icon icon-world">Категории сайта</h2>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-news" href="#">Авто</a>
<div class="mp-level">
<h2 class="icon icon-news">Авто</h2>
<a class="mp-back" href="#">Назад</a>
<ul>
<li><a href="#">Автомойки</a></li>
<li><a href="#">Автосалоны</a></li>
<li><a href="#">Автосервисы</a></li>
<li><a href="#">Автостайлинг</a></li>
<li><a href="#">Автостоянки</a></li>
<li><a href="#">Автошколы</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-news" href="#">Перевозки</a>
<div class="mp-level">
<h2 class="icon icon-news">Перевозки</h2>
<a class="mp-back" href="#">Назад</a>
<ul>
<li><a href="#">Грузовые перевозки</a></li>
<li><a href="#">Пасажирские перевозки</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-news" href="#">Дтстрибьюторы товаров</a>
<div class="mp-level">
<h2 class="icon icon-news">Дтстрибьюторы товаров</h2>
<a class="mp-back" href="#">Назад</a>
<ul>
<li><a href="#">Непродовольственные</a></li>
<li><a href="#">Продовольственные</a></li>
</ul>
</div>
</li>
<li><a class="icon icon-photo" href="#">Оптовые склады</a></li>
<li><a class="icon icon-photo" href="#">Агенства недвижимости</a></li>
<li><a class="icon icon-photo" href="#">Ветеринарные клиники</a></li>
<li><a class="icon icon-photo" href="#">ВУЗЫ</a></li>
<li class="icon icon-arrow-left">
<a class="icon icon-news" href="#">Здоровье</a>
<div class="mp-level">
<h2 class="icon icon-news">Здоровье</h2>
<a class="mp-back" href="#">Назад</a>
<ul>
<li><a href="#">Аптеки</a></li>
<li><a href="#">Поликлиники</a></li>
<li><a href="#">Стоматология</a></li>
<li><a href="#">Частные клиники</a></li>
</ul>
</div>
</li>
<li><a class="icon icon-photo" href="#">Кинотеатры</a></li>
<li class="icon icon-arrow-left">
<a class="icon icon-news" href="#">Магазины</a>
<div class="mp-level">
<h2 class="icon icon-news">Магазины</h2>
<a class="mp-back" href="#">Назад</a>
<ul>
<li><a href="#">Бытовая техника</a></li>
<li><a href="#">Детские</a></li>
<li><a href="#">Компьютеры</a></li>
<li><a href="#">Мебель</a></li>
<li><a href="#">Мобильные телефоны</a></li>
<li><a href="#">Музыкальные</a></li>
<li><a href="#">Одежда и обувь</a></li>
<li><a href="#">Охота и рыбалка</a></li>
<li><a href="#">Строительство и ремонт</a></li>
<li><a href="#">Ювелирные</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-news" href="#">Отдых и релаксация</a>
<div class="mp-level">
<h2 class="icon icon-news">Отдых и релаксация</h2>
<a class="mp-back" href="#">Назад</a>
<ul>
<li><a href="#">Масажные кабинеты</a></li>
<li><a href="#">Салоны красоты</a></li>
<li><a href="#">СПА-салоны</a></li>
<li><a href="#">Солярии</a></li>
</ul>
</div>
</li>
<li><a class="icon icon-photo" href="#">Гостиницы и отели</a></li>
<li class="icon icon-arrow-left">
<a class="icon icon-news" href="#">Развлечения</a>
<div class="mp-level">
<h2 class="icon icon-news">Развлечения</h2>
<a class="mp-back" href="#">Назад</a>
<ul>
<li><a href="#">Для семьи и детей</a></li>
<li><a href="#">Ночные клубы</a></li>
<li><a href="#">Бары</a></li>
</ul>
</div>
</li>
<li><a class="icon icon-photo" href="#">Реклама и маркетинг</a></li>
<li class="icon icon-arrow-left">
<a class="icon icon-news" href="#">Кафе и рестораны</a>
<div class="mp-level">
<h2 class="icon icon-news">Кафе и рестораны</h2>
<a class="mp-back" href="#">Назад</a>
<ul>
<li><a href="#">Кафе</a></li>
<li><a href="#">Рестораны</a></li>
<li><a href="#">Бары</a></li>
<li><a href="#">Пиццерии</a></li>
<li><a href="#">Кофейни</a></li>
<li><a href="#">Доставка на дом</a></li>
</ul>
</div>
</li>
<li><a class="icon icon-wallet" href="#">Кредит</a></li>
</ul>
</div>
</nav>

<div class="scroller">
<div class="scroller-inner">
<div class="content clearfix">
<div class="block block-40 clearfix">
<p><a href="#" id="trigger" class="menu-trigger">Открыть/Закрыть</a></p>
<nav class="codrops-demos">
<script src="js/classie.js"></script>
<script src="js/mlpushmenu.js"></script>
<script>
new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
</script>
</body>
</html>
Может хоть на мысль наведете...
Шаблон обычный на артистире.
*

МихаилМ

  • Захожу иногда
  • 55
  • 2 / 0
Может хоть на мысль наведете...
Шаблон обычный на артистире.

ну у вас шаблон не джумловский а просто HTML файл.
проблема у вас - в незакрытых тегах, если вы весь код привели в цитате

вот так попробуйте:
Код
<div class="mp-pusher" id="mp-pusher">
        <nav id="mp-menu" class="mp-menu">
          <div class="mp-level">
            <h2 class="icon icon-world">Категории сайта</h2>
            <ul>                              
              <li class="icon icon-arrow-left">
                <a class="icon icon-news" href="#">Авто</a>
                <div class="mp-level">
                  <h2 class="icon icon-news">Авто</h2>
                  <a class="mp-back" href="#">Назад</a>
                  <ul>
                    <li><a href="#">Автомойки</a></li>
                    <li><a href="#">Автосалоны</a></li>
                    <li><a href="#">Автосервисы</a></li>
                    <li><a href="#">Автостайлинг</a></li>
                    <li><a href="#">Автостоянки</a></li>
                    <li><a href="#">Автошколы</a></li>
                  </ul>
                </div>
              </li>            
              <li class="icon icon-arrow-left">
                <a class="icon icon-news" href="#">Перевозки</a>
                <div class="mp-level">
                  <h2 class="icon icon-news">Перевозки</h2>
                  <a class="mp-back" href="#">Назад</a>
                  <ul>
                    <li><a href="#">Грузовые перевозки</a></li>
                    <li><a href="#">Пасажирские перевозки</a></li>                    
                  </ul>
                </div>
              </li>
              <li class="icon icon-arrow-left">
                <a class="icon icon-news" href="#">Дтстрибьюторы товаров</a>
                <div class="mp-level">
                  <h2 class="icon icon-news">Дтстрибьюторы товаров</h2>
                  <a class="mp-back" href="#">Назад</a>
                  <ul>
                    <li><a href="#">Непродовольственные</a></li>
                    <li><a href="#">Продовольственные</a></li>                    
                  </ul>
                </div>
              </li>
              <li><a class="icon icon-photo" href="#">Оптовые склады</a></li>
              <li><a class="icon icon-photo" href="#">Агенства недвижимости</a></li>
              <li><a class="icon icon-photo" href="#">Ветеринарные клиники</a></li>
              <li><a class="icon icon-photo" href="#">ВУЗЫ</a></li>
              <li class="icon icon-arrow-left">
                <a class="icon icon-news" href="#">Здоровье</a>
                <div class="mp-level">
                  <h2 class="icon icon-news">Здоровье</h2>
                  <a class="mp-back" href="#">Назад</a>
                  <ul>
                    <li><a href="#">Аптеки</a></li>
                    <li><a href="#">Поликлиники</a></li>
                    <li><a href="#">Стоматология</a></li>
                    <li><a href="#">Частные клиники</a></li>
                  </ul>
                </div>
              </li>
              <li><a class="icon icon-photo" href="#">Кинотеатры</a></li>
              <li class="icon icon-arrow-left">
                <a class="icon icon-news" href="#">Магазины</a>
                <div class="mp-level">
                  <h2 class="icon icon-news">Магазины</h2>
                  <a class="mp-back" href="#">Назад</a>
                  <ul>
                    <li><a href="#">Бытовая техника</a></li>
                    <li><a href="#">Детские</a></li>
                    <li><a href="#">Компьютеры</a></li>
                    <li><a href="#">Мебель</a></li>
                    <li><a href="#">Мобильные телефоны</a></li>
                    <li><a href="#">Музыкальные</a></li>
                    <li><a href="#">Одежда и обувь</a></li>
                    <li><a href="#">Охота и рыбалка</a></li>
                    <li><a href="#">Строительство и ремонт</a></li>
                    <li><a href="#">Ювелирные</a></li>
                  </ul>
                </div>
              </li>
              <li class="icon icon-arrow-left">
                <a class="icon icon-news" href="#">Отдых и релаксация</a>
                <div class="mp-level">
                  <h2 class="icon icon-news">Отдых и релаксация</h2>
                  <a class="mp-back" href="#">Назад</a>
                  <ul>
                    <li><a href="#">Масажные кабинеты</a></li>
                    <li><a href="#">Салоны красоты</a></li>
                    <li><a href="#">СПА-салоны</a></li>
                    <li><a href="#">Солярии</a></li>
                  </ul>
                </div>
              </li>
              <li><a class="icon icon-photo" href="#">Гостиницы и отели</a></li>
              <li class="icon icon-arrow-left">
                <a class="icon icon-news" href="#">Развлечения</a>
                <div class="mp-level">
                  <h2 class="icon icon-news">Развлечения</h2>
                  <a class="mp-back" href="#">Назад</a>
                  <ul>
                    <li><a href="#">Для семьи и детей</a></li>
                    <li><a href="#">Ночные клубы</a></li>
                    <li><a href="#">Бары</a></li>                
                  </ul>
                </div>
              </li>
              <li><a class="icon icon-photo" href="#">Реклама и маркетинг</a></li>
              <li class="icon icon-arrow-left">
                <a class="icon icon-news" href="#">Кафе и рестораны</a>
                <div class="mp-level">
                  <h2 class="icon icon-news">Кафе и рестораны</h2>
                  <a class="mp-back" href="#">Назад</a>
                  <ul>
                    <li><a href="#">Кафе</a></li>
                    <li><a href="#">Рестораны</a></li>
                    <li><a href="#">Бары</a></li>
                    <li><a href="#">Пиццерии</a></li>
                    <li><a href="#">Кофейни</a></li>
                    <li><a href="#">Доставка на дом</a></li>
                  </ul>
                </div>
              </li>
              <li><a class="icon icon-wallet" href="#">Кредит</a></li>
            </ul>
          </div>
        </nav>

        <div class="scroller">
          <div class="scroller-inner">            
            <div class="content clearfix">
              <div class="block block-40 clearfix">
                <a href="#" id="trigger" class="menu-trigger">Открыть/Закрыть</a>
                <nav class="codrops-demos">
                </nav>
              </div>
            </div>
          </div>
        </div>                    
    <script src="js/classie.js"></script>
    <script src="js/mlpushmenu.js"></script>
    <script>
      new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
    </script>
  </body>
</html>

а еще лучше, если сделаете как  я написал
« Последнее редактирование: 17.02.2015, 21:39:12 от МихаилМ »
*

rubinded

  • Захожу иногда
  • 54
  • 0 / 0
Шаблон сделан на Артистире, а код который я привел - сторонний. Его то и нужно адаптировать  к Joomla. Спасибо Вам огромное за ответ, сейчас попробую Ваш вариант. И еще раз СПАСИБО, что находите время!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

В Joomla 2.5 VirtueMart 2.0.26d не работает добавление в корзину под мобилку

Автор kvintovskiy

Ответов: 8
Просмотров: 825
Последний ответ 15.04.2024, 17:29:25
от Vastriet
Модуль устанавливается, но Joomla его не видит

Автор ruppert

Ответов: 20
Просмотров: 16975
Последний ответ 01.08.2022, 05:30:50
от rezon777
[Решено] title материалов и категорий без пунктов меню

Автор pharaoh

Ответов: 269
Просмотров: 60229
Последний ответ 03.02.2022, 02:45:26
от globus812
Как добавить описание к пункту меню в Joomla 2.5? (Как у материалов)?

Автор nia

Ответов: 7
Просмотров: 5549
Последний ответ 29.03.2021, 12:10:26
от sivers
Конструктор страниц (Page Builder) для Joomla 2.5

Автор nia

Ответов: 4
Просмотров: 1439
Последний ответ 14.03.2021, 12:17:35
от nia