Canvasmenu для Typo3 с использованием jQuery Sidr

20 октября 2017, 08:55

Canvasmenu для Typo3 с использованием jQuery Sidr

Хотел с вами поделиться простым и удобным Canvas Menu Sidr jQuery для Typo3, но использовать можно на любых других движках.

На последних версий Typo3 используется пакет Mask. С его помощью можно создать в контенте разнового рода формы, от текстовых форм, до вставки файлов и изображений.

Первым делом в файле fluidTemplate.tsнам нужно связать наше Canvasmenu с системой.

Путь до файла

/html/typo3/typo3conf/ext/snet_tmpl_stimmenet/Configuration/TypoScript/Templates

Для этого в нём добавляем:

offcanvas < lib.offcanvas

Подключаем стили в файле page.typeNum.0.ts

	includeCSS {
		f1 = {$snet_tmpl_stimmenet.cssRootPath}/sections/snet_project_showcase.css
		f2 = {$snet_tmpl_stimmenet.cssRootPath}/pages/main.css
		f3 = {$snet_tmpl_stimmenet.cssRootPath}/vendor/jquery.sidr.dark.css
		f4 = {$snet_tmpl_stimmenet.cssRootPath}/vendor/FontAwesome/css/font-awesome.min.css
	}	

А также JavaScript:

includeJS {
		...
		sidr = {$snet_tmpl_stimmenet.jsRootPath}/jquery.sidr.min.js
		custom = {$snet_tmpl_stimmenet.jsRootPath}/custom.js
		...
}

В файл custom.js вставляем:

	jQuery(document).ready(function () {
		$offCanvasMenu = jQuery('#sidr-right-bottom > .menu');
		
		jQuery('#sidr-right-bottom-button').sidr({
			name: 'sidr-right-bottom',
			speed: 800,
			side: 'left',
		});	
		jQuery('ul.menu li i.fa-plus').click(function(){
			jQuery(this).parent('li').toggleClass('active');
			if(jQuery(this).parent('li').hasClass('active')) {
				jQuery(this).parent('li').children('li i').removeClass('fa-plus');
				jQuery(this).parent('li').children('li i').addClass('fa-minus');
			} else {
				jQuery(this).parent('li').children('li i').removeClass('fa-minus');
				jQuery(this).parent('li').children('li i').addClass('fa-plus');
			}
			$checkTotalHeight = true;
			jQuery(this).parent('li').children('ul.submenu').toggle('normal');
			return false;
		});
		jQuery('.offCanvasClose').click(function(){
			jQuery('#sidr-right-bottom-button').click();
		});
		jQuery('.header div.offcanvas-button .fa-bars').click(function(){
			jQuery('#sidr-right-bottom-button').click();
		});
		jQuery('#sidr-right-bottom .menu li .fa-minus').click(function(){
			jQuery('#sidr-right-bottom-button').click();
		});
		jQuery('.headerslider .slide').load(function(){
			jQuery(this).css("height", "1000px");
		});
		$("#scrolldown").on("click","a", function (event) {
			event.preventDefault();
			var id  = $(this).attr('href'),
				top = $(id).offset().top;
			$('body,html').animate({scrollTop: top}, 1500);
		});
		$(".live-tile").liveTile();
		$(document).mouseup(function (e)
		{
			//console.log(jQuery(e.target).closest($offCanvasMenu).length == 0);
			//console.log(!jQuery(e.target).is($offCanvasMenu));
			if (!$offCanvasMenu.is(jQuery(e.target)) && $offCanvasMenu.has(e.target).length === 0 && $('body').hasClass('sidr-open sidr-right-bottom-open')) {
				jQuery('#sidr-right-bottom-button').click();
			}
		});
    });
    jQuery( window ).resize(function () {
		jQuery.sidr('close', 'sidr-right-bottom');
    });

После чего в файл menu.ts вставляем:

		lib.offcanvas = COA
		lib.offcanvas {

			wrap = <nav id="sidr-right-bottom">|</nav>

			# Close button
			10 = COA
			10 {
				10 = TEXT
				10 {
					value = Menü schließen
					wrap = <div class="offCanvasClose"><i class="fa fa-times"></i><a title="Menü schließen">|</a></div>
				}

				wrap = <div class="offcanvastop">|</div>
			}
			
			# Menu
			20 = COA
			20 {
				wrap = <ul class="menu">|</ul>
				10 = HMENU
				10 {
					special = directory
					special.value = 32

					1 = TMENU
					1 {
						expAll = 1
						NO {
							wrapItemAndSub = <li>|</li>
							ATagTitle.field = title
						}
				
						ACT < .NO
						ACT = 1
						ACT.ATagParams = class="active"
						ACT.wrapItemAndSub = <li class="active">|</li>
				
						IFSUB < .NO
						IFSUB = 1
						IFSUB {
							linkWrap = |<i class="fa fa-plus" aria-hidden="true"></i><i class="fa fa-minus" aria-hidden="true"></i>
						}
					
						ACTIFSUB < .IFSUB
						ACTIFSUB = 1
						ACTIFSUB.ATagParams = class="active"
						ACTIFSUB.wrapItemAndSub = <li class="active">|</li>
						
						CUR < .NO
						CUR = 1
						CUR.ATagParams = class="current"
						CUR.wrapItemAndSub = <li class="current">|</li>
					
						CURIFSUB < .IFSUB
						CURIFSUB = 1
						CURIFSUB.ATagParams = class="active current"
						CURIFSUB.wrapItemAndSub = <li class="active current">|</li>
					}
				
					2 < .1
					2 {
						wrap >
						wrap = <ul class="submenu">|</ul>
					#	IFSUB.wrapItemAndSub = <li class="active">|</li>
					}
				
					3 < .1
					3 {
						wrap >
						wrap = <ul class="submenu">|</ul>
				#		IFSUB.wrapItemAndSub = <li class="active">|</li>
					}
				
					4 < .1
					4 {
						wrap >
						wrap = <ul class="submenu">|</ul>
						ACTIFSUB = 0
						IFSUB = 0
					}
				
					5 < .1
					5 {
						wrap >
						wrap = <ul class="submenu">|</ul>
						ACTIFSUB = 0
						IFSUB = 0
					}
				}
			}
		}
Андрей Копп
0    408    0
+3

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Топики

    Андрей Копп 03 октября 2018, 11:55
    Компоненты MODX Обзор компонента SEO Pro 0
    Андрей Копп 02 октября 2018, 11:18
    MODX Настройка MySQL 5.7 для работы pdoTools 0
    Андрей Копп 27 сентября 2018, 20:49
    MODX MinifyX в Fenom 0
    Андрей Копп 01 июля 2018, 15:13
    Другое Fenom в MODX (шпаргалки) 0

    Комментарии

    Андрей Копп 02 октября 2018, 09:04
    ComboBox с данными из другой таблицы modExtra 1
    Андрей Копп 08 сентября 2017, 20:24
    Всевозможная очистка кэша в Laravel 5 1