Off-Canvas меню для Joomla. Миф или реальность?

rubinded

Захожу иногда
54
0 / 0

Off-Canvas меню для Joomla. Миф или реальность?

« : 17.02.2015, 13:04:15 »

Ребята, недавно столкнулся с такой задачей - "Реализация 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

Глобальный модератор
4824
346 / 2
Обслуживаем проекты - дорого.

Re: Off-Canvas меню для Joomla. Миф или реальность?

« Ответ #1 : 17.02.2015, 13:20:08 »

Судя по примерам. Тут вам надо подходить комплексно.
Переопределить шаблон модуля меню. А лучше создать отдельный шаблон модуля.
Внести в этот шаблон необходимую разметку.
После чего отредактировать шаблон самого сайта и создать необходимую позицию с разметкой.
Хотя судя по HTML коду можно просто шаблон модуля меню отредактировать и вывести чуть ли не на любой позиции сайта.

Записан

Хочется уникальное расширение? ===>>>> JoomLine - Разрабатываем расширения под заказ.
Использую хостинг TimeWeb и Reg

Arkadiy

Гуру
5317
463 / 2
Крепитесь, други.

Re: Off-Canvas меню для Joomla. Миф или реальность?

« Ответ #2 : 17.02.2015, 18:15:21 »

Это надо делать в шаблоне. Пример на foundation http://foundation.zurb.com/docs/components/offcanvas.html Все просто. Как два пальца об асфальт.

Записан

А так ли проста Joomla? | Мои расширения для Joomla и Joostina

МихаилМ

Захожу иногда
55
2 / 0

Re: Off-Canvas меню для Joomla. Миф или реальность?

« Ответ #3 : 17.02.2015, 19:28:49 »

шаблон править надо (если ваш не предусматривает)

любой 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

Re: Off-Canvas меню для Joomla. Миф или реальность?

« Ответ #4 : 17.02.2015, 19:41:58 »

Огромное спасибо что откликнулись!

Цитировать

1. откройте файл шаблона и сразу после тега </head> поставьте кусочек

Вы имеете в виду index.php? или index.htm

Записан

МихаилМ

Захожу иногда
55
2 / 0

Re: Off-Canvas меню для Joomla. Миф или реальность?

« Ответ #5 : 17.02.2015, 20:35:56 »

Цитата: rubinded от 17.02.2015, 19:41:58

Огромное спасибо что откликнулись! Вы имеете в виду index.php? или index.htm

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

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

Записан

rubinded

Захожу иногда
54
0 / 0

Re: Off-Canvas меню для Joomla. Миф или реальность?

« Ответ #6 : 17.02.2015, 20:43:41 »

Спасибо, по Вашему примеру почти получилось сделать (подглючивает немножко, но это уже огромный шаг вперед). Не могли бы Вы посмотреть куда вставить такое меню (код напишу ниже). Смысл благодаря Вам я уже понял, но тут ХТМЛ-ка в едином файле, я так понимаю, что ее нужно разбить и вставлять в разные части (файлы, но вот куда что...?) Файлы с 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

Re: Off-Canvas меню для Joomla. Миф или реальность?

« Ответ #7 : 17.02.2015, 21:34:59 »

Цитата: rubinded от 17.02.2015, 20:43:41

Может хоть на мысль наведете...
Шаблон обычный на артистире.

ну у вас шаблон не джумловский а просто 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

Re: Off-Canvas меню для Joomla. Миф или реальность?

« Ответ #8 : 18.02.2015, 02:15:49 »

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

Записан

В Joomla 2.5 VirtueMart 2.0.26d не работает добавление в корзину под мобилку Автор kvintovskiy	Ответов: 8 Просмотров: 3551	15.04.2024, 17:29:25 от Vastriet
Модуль устанавливается, но Joomla его не видит Автор ruppert	Ответов: 20 Просмотров: 20147	01.08.2022, 05:30:50 от rezon777
[Решено] title материалов и категорий без пунктов меню Автор pharaoh	Ответов: 269 Просмотров: 71594	03.02.2022, 02:45:26 от globus812
Как добавить описание к пункту меню в Joomla 2.5? (Как у материалов)? Автор nia	Ответов: 7 Просмотров: 6784	29.03.2021, 12:10:26 от sivers
Конструктор страниц (Page Builder) для Joomla 2.5 Автор nia	Ответов: 4 Просмотров: 2454	14.03.2021, 12:17:35 от nia

Off-Canvas меню для Joomla. Миф или реальность? - Joomla 2.5: Настройка и оптимизация

Новости Joomla

Вышли релизы Joomla 6.1 и Joomla 5.4.5: новые возможности и стабильность

👩‍💻 Компонент "CS Афиши" для Joomla.

Яндекс выпустил инструмент Видимость сайта в Алисе AI.

rubinded

Off-Canvas меню для Joomla. Миф или реальность?

zikkuratvk

Re: Off-Canvas меню для Joomla. Миф или реальность?

Arkadiy

Re: Off-Canvas меню для Joomla. Миф или реальность?

МихаилМ

Re: Off-Canvas меню для Joomla. Миф или реальность?

rubinded

Re: Off-Canvas меню для Joomla. Миф или реальность?

МихаилМ

Re: Off-Canvas меню для Joomla. Миф или реальность?

rubinded

Re: Off-Canvas меню для Joomla. Миф или реальность?

МихаилМ

Re: Off-Canvas меню для Joomla. Миф или реальность?

rubinded

Re: Off-Canvas меню для Joomla. Миф или реальность?

Похожие темы