Новости Joomla

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

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

  • Глобальный модератор
  • 4817
  • 344 / 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 Все просто. Как два пальца об асфальт.
Записан
*

МихаилМ

  • Захожу иногда
  • 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. Спасибо Вам огромное за ответ, сейчас попробую Ваш вариант. И еще раз СПАСИБО, что находите время!
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Модуль устанавливается, но Joomla его не видит

Автор ruppert

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

Автор pharaoh

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

Автор nia

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

Автор nia

 Ответов: 4
Просмотров: 1266 		Последний ответ 14.03.2021, 12:17:35
от nia
В моб версии не откриваються норм меню

Автор umsbeauty

 Ответов: 0
Просмотров: 1148 		Последний ответ 11.01.2021, 17:55:15
от umsbeauty