Uwaga! Od sierpnia 2017 forum jest w trybie tylko do odczytu.

Dlaczego? Dlatego, że społeczność TYPO3 przeniosła się na slack'a i stackoverflow:
  • Przeczytaj artykuł wprowadzający do slacka, w którym dowiesz gdzie i jak się zarejestrować.
  • Jeżeli masz pytania odnośnie Polskiej Społeczności TYPO3 zapraszamy na kanał slack'a #community-pl. Rozmawiamy tam w języku polskim.
  • Pytania dotyczące samego TYPO3 zadawaj po angielsku na stackoverflow oznaczając je tagiem "typo3". Następnie posługując się linkiem do tego pytania postaraj się zachęcić ludzi z kanału slack'a #typo3-cms lub bardziej pasujących kanałów tematycznych, żeby na nie odpowiedzieli.
  • Możesz też oczywiście zadawać pytania na slacku bez zakładania wątków na stackoverflow, ale wówczas wiedza ta nie jest indeksowana przez googla i część osób nie będzie chciała Ci z tego powodu pomagać.
  • Dla części osób dzielących się wiedzą ważne jest też budowanie reputacji na stackoverflow. Jest to kolejny powód dla którego powinieneś zadawać pytania na stackoverflow by zwiększyć swoje szanse na znalezienie odpowiedzi. Pamiętaj, żeby oceniać odpowiedzi!
Forum » TYPO3 » Menu
Temat z wieloma odpowiedziami

jQuery Drop Down Menu - Apycom jQuery Menu


Autor Wiadomość
Napisane: 04.06.2012 [09:35]
mwolanski
Twórca tematu
zarejestrowany: 23.11.2011
Posty: 88
Witam,
zamierzalem zaimplementowac menu ze strony: http://apycom.com/menus/2-white-smoke.html
do typo3, dodalem jquery.js oraz menu.js do pozycji header w templacie - nie dziala, pozniej probowalem z T3 Jquery, integrowalem pliki js z glownym i nic.

Strona
Moj TS do Menu wyglada nastepujaco:

MAINMENU WITH A JQUERY SUBMENU
TYPOSCRIPT
lib.menu= HMENU
lib.menu {
 
  1.entryLevel = 0
  1.expAll = 1
  1 = TMENU
  1.wrap = <ul>|</ul>
  1.noBlur = 0
 
  1.ACT = 1
  1.NO = 1
  1.CUR = 1
 
  1.NO.wrapItemAndSub = <li>|</li>
  1.ACT < .1.NO
  1.CUR < .1.NO
 
 
  2 < .1
  2.entryLevel = 1
  2.wrap = <div class="parent"><ul>|</ul>
}


Gdzie lezy blad ? moze jakis konflikt w jQuery ? probowalem wylaczyc wszystko co moglem i dalej menu nie dziala. Cos widac w kodzie html, ale nie tak jak trzeba.

O czym zapomnialem? o czym nalezy pamietac w takich przypadkach ?

Ewentualnie chetnie uzyje innego skryptu do DropDown Menu i najchetniej uzyl bym tego co jest na obecnej stronie typo3.org - ktos wie co to za skrypt? Typo3 jest opensource wiec podejrzewam, ze ten skrypt nie powinien byc ograniczony prawem autorskim icon_smile.gif

Dziekuje za pomoc
Załącznik

Napisane: 04.06.2012 [11:58]
mushroomhead
zarejestrowany: 25.11.2009
Posty: 51
sprawdz czy masz właczony jquery non-conflict..


Napisane: 04.06.2012 [12:11]
mwolanski
Twórca tematu
zarejestrowany: 23.11.2011
Posty: 88
Mam wlaczony, w Jquery core: noConflict
niestety to nie pomaga. Nie wiem gdzie zrobilem blad.
Moze lepiej jak zaczne od nowa z innym skryptem.
Szukam takiego samego menu jak na stronie typo3.org uzywaja. Jak by ktos mial namiary to dziekuje za informacje.

Pozdrawiam
Napisane: 04.06.2012 [12:29]
mushroomhead
zarejestrowany: 25.11.2009
Posty: 51
moze zrób inaczej: wyłącz kompletnie wtyczke t3jquery i daj do strony normalna biblioteke jquery. Wtedy musi działać. Jesli nie bedzie działać to moze oznaczać jeszcze cos innego (np. ze kodzie jest bład, jakis niedomkniety nawias lub cos w tym stylu)
Napisane: 04.06.2012 [13:21]
mwolanski
Twórca tematu
zarejestrowany: 23.11.2011
Posty: 88
Witam,

Zrobilem jak mowiles, wylaczylem wszysto i wrzucilem go recznie. Okazuje sie, ze skrypt dziala ale w jakis dziwny sposob.
Wyswietlone elementy nie animuja sie (nie wysuwa). Analizujac kod html mozna zauwazyc ze <ul> dostaje styl: display: none; left: 0px; top: 54px;
wiec po skasowaniu opcji display widac ze dropdown menu sie pojawia.
Sprawdzilem skrypt lokalnie i dziala, wiec podejrzewam, ze blad lezy gdzies w konfiguracji Typo3?

Moze ktos zerknie na wygenerowany kod html?

http://www.auclairgloves.com.two.nwgextra.com

Napisane: 07.06.2012 [09:13]
mwolanski
Twórca tematu
zarejestrowany: 23.11.2011
Posty: 88
DropDown Menu dalej nie dziala, a ja musze znalesc cos innego.
Czy ktos wie gdzie mozna znalesc podobne menu jak jest na nowej typo3.org ?
z gory dziekuje!
Napisane: 07.06.2012 [11:47]
Imp
zarejestrowany: 13.04.2011
Posty: 170
Napisz jaką dokładnie strukturę listy menu potrzebujesz aby ten skrypt, którego próbujesz użyć zadziałał.

Skąd ci się tam bierze
HTML
<div class="parent"> </div>

jako wrap dla unsorted list drugiego poziomu? Z java scriptu?

Spróbuj ddsmoothmenu.

IMP
Napisane: 07.06.2012 [11:53]
mwolanski
Twórca tematu
zarejestrowany: 23.11.2011
Posty: 88
Przykladowa skladnia menu dolaczona wrac z jsem do apycom.com-2-white-smoke wyglada nastepujaco:
HTML
<div id="menu">
		<ul class="menu">
			<li><a href="#" class="parent"><span>Home</span></a>
				<div><ul>
					<li><a href="#" class="parent"><span>Sub Item 1</span></a>
						<div><ul>
							<li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
								<div><ul>
								<li><a href="#"><span>Sub Item 1.1.1</span></a></li>
								<li><a href="#"><span>Sub Item 1.1.2</span></a></li>
								</ul></div>
							</li>
							<li><a href="#"><span>Sub Item 1.2</span></a></li>
							<li><a href="#"><span>Sub Item 1.3</span></a></li>
							<li><a href="#"><span>Sub Item 1.4</span></a></li>
							<li><a href="#"><span>Sub Item 1.5</span></a></li>
							<li><a href="#"><span>Sub Item 1.6</span></a></li>
							<li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
								<div><ul>
								<li><a href="#"><span>Sub Item 1.7.1</span></a></li>
								<li><a href="#"><span>Sub Item 1.7.2</span></a></li>
								</ul></div>
							</li>
						</ul></div>
					</li>
					<li><a href="#"><span>Sub Item 2</span></a></li>
					<li><a href="#"><span>Sub Item 3</span></a></li>
				</ul></div>
			</li>
			<li><a href="#"><span>Product Info</span></a>
				<div><ul>
					<li><a href="#" class="parent"><span>Sub Item 1</span></a>
						<div><ul>
						<li><a href="#"><span>Sub Item 1.1</span></a></li>
						<li><a href="#"><span>Sub Item 1.2</span></a></li>
						</ul></div>
					</li>
					<li><a href="#" class="parent"><span>Sub Item 2</span></a>
						<div><ul>
						<li><a href="#"><span>Sub Item 2.1</span></a></li>
						<li><a href="#"><span>Sub Item 2.2</span></a></li>
						</ul></div>
					</li>
					<li><a href="#"><span>Sub Item 3</span></a></li>
					<li><a href="#"><span>Sub Item 4</span></a></li>
					<li><a href="#"><span>Sub Item 5</span></a></li>
					<li><a href="#"><span>Sub Item 6</span></a></li>
					<li><a href="#"><span>Sub Item 7</span></a></li>
				</ul></div>
			</li>
			<li><a href="#"><span>Help</span></a></li>
			<li class="last"><a href="#"><span>Contacts</span></a></li>
		</ul>
	</div>


Moj TypoScript wyglada nastepujaco:

TYPOSCRIPT
##### MAINMENU WITH A JQUERY SUBMENU #####
 
lib.menu= HMENU
lib.menu {
 
  1.entryLevel = 0
  1.expAll = 1
  1 = TMENU
  1.wrap = <ul>|</ul>
  1.noBlur = 0
 
  1.ACT = 1
  1.NO = 1
  1.CUR = 1
 
  1.NO.wrapItemAndSub = <li>|</li>
  1.ACT < .1.NO
  1.CUR < .1.NO
 
 
  2 < .1
  2.entryLevel = 1
  2.wrap = <div class="parent"><ul>|</ul>
}
Napisane: 12.06.2012 [12:18]
mwolanski
Twórca tematu
zarejestrowany: 23.11.2011
Posty: 88
Witam,

Uzylem tak jak poleciles:
http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

i zmienilem TS na nastepujacy:


TYPOSCRIPT
##### MAINMENU WITH A JQUERY SUBMENU #####
 
 
lib.menu= HMENU 
lib.menu{
 
  entryLevel = 0
  special = directory
  special.value = 1
  expAll = 1
  wrap = <div id="smoothmenu1" class="ddsmoothmenu">|</div>    
 
  1 = TMENU
 
  1.entryLevel = 0
  1.wrap = <ul>|</ul>
  1.expAll = 1
  1{        
    NO{
      wrapItemAndSub = <li>|</li>
    }
 
    ACT=1
    ACT{
      wrapItemAndSub = <li>|</li>
    }
 
    CUR=1
    CUR{
      wrapItemAndSub = <li>|</li>
    }
 
    IFSUB=1
    IFSUB{
      wrapItemAndSub = <li>|</li>
    }
  }
 
  2 = TMENU
  2.wrap = <ul>|</ul>
  2.expAll = 1
  2{
    NO{
      wrapItemAndSub = <li>|</li>
    }
    ACT=1
    ACT{
      wrapItemAndSub = <li>|</li>
    }
    CUR=1
    CUR{
      wrapItemAndSub = <li>|</li>
    }
    IFSUB=1
    IFSUB{
      wrapItemAndSub = <li>|</li>
    }
  }
 
  3 = TMENU
  3.wrap = <ul>|</ul>
  3.expAll = 1
  3{
    NO{
      wrapItemAndSub = <li>|</li>
    }
    ACT=1
    ACT{
      wrapItemAndSub = <li>|</li>
    }
    CUR=1
    CUR{
      wrapItemAndSub = <li>|</li>
    }
    IFSUB=1
    IFSUB{
      wrapItemAndSub = <li>|</li>
    }
  }
}
 
 
 
 
### MAINMENU DROPDOWN DDSMOOTHMENU SCRIPT ###
 
page.headerData.90 = TEXT
page.headerData.90.value (
<script type="text/javascript">
ddsmoothmenu.init({
  mainmenuid: "smoothmenu1", //menu DIV id
  orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
  classname: 'ddsmoothmenu', //class added to menu's outer DIV
  //customtheme: ["#1c5a80", "#18374a"],
  contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
)


Odpowiedni .js dodany do headera strony i menu dziala.

Strona

Teraz interesuje mnie przerobienie TS i JS do takiej funkcjonalnosci jak na zdjeciu:
https://dl.dropbox.com/u/462712/prodpage_overview_menu.png

Gdzie submenu sa wyswietlane w rzedach z widocznymi submenu w kolejnym lewelu.

Mam nadzieje, ze bedzie ktos mi w tym mogl pomoc...

Zalaczony ddsmoothmenu.js wyglada nastepujaco:
JAVASCRIPT
//** Smooth Navigational Menu- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
//** Menu created: Nov 12, 2008
 
//** Dec 12th, 08" (v1.01): Fixed Shadow issue when multiple LIs within the same UL (level) contain sub menus: http://www.dynamicdrive.com/forums/showthread.php?t=39177&highlight=smooth
 
//** Feb 11th, 09" (v1.02): The currently active main menu item (LI A) now gets a CSS class of ".selected", including sub menu items.
 
//** May 1st, 09" (v1.3):
//** 1) Now supports vertical (side bar) menu mode- set "orientation" to 'v'
//** 2) In IE6, shadows are now always disabled
 
//** July 27th, 09" (v1.31): Fixed bug so shadows can be disabled if desired.
//** Feb 2nd, 10" (v1.4): Adds ability to specify delay before sub menus appear and disappear, respectively. See showhidedelay variable below
 
//** Dec 17th, 10" (v1.5): Updated menu shadow to use CSS3 box shadows when the browser is FF3.5+, IE9+, Opera9.5+, or Safari3+/Chrome. Only .js file changed.
 
var ddsmoothmenu={
 
//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: {down:['downarrowclass', 'clear.gif'], right:['rightarrowclass', 'right.gif']},
transition: {overtime:300, outtime:600}, //duration of slide in/ out animation, in milliseconds
shadow: {enable:true, offsetx:5, offsety:5}, //enable shadow?
showhidedelay: {showdelay: 100, hidedelay: 250}, //set delay in milliseconds before sub menus appear and disappear, respectively
 
///////Stop configuring beyond here///////////////////////////
 
detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />!=-1, //detect WebKit browsers (Safari, Chrome etc)
detectie6: document.all && !window.XMLHttpRequest,
css3support: window.msPerformance || (!document.all && document.querySelector), //detect browsers that support CSS3 box shadows (ie9+ or FF3.5+, Safari3+, Chrome etc)
 
getajaxmenu:function($, setting){ //function to fetch external page containing the panel DIVs
	var $menucontainer=$('#'+setting.contentsource[0]) //reference empty div on page that will hold menu
	$menucontainer.html("Loading Menu...&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />
	$.ajax({
		url: setting.contentsource[1], //path to external menu file
		async: true,
		error:function(ajaxrequest){
			$menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText)
		},
		success:function(content){
			$menucontainer.html(content)
			ddsmoothmenu.buildmenu($, setting)
		}
	})
},
 
 
buildmenu:function($, setting){
	var smoothmenu=ddsmoothmenu
	var $mainmenu=$("#"+setting.mainmenuid+">ul&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" /> //reference main menu UL
	$mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu"
	var $headers=$mainmenu.find("ul&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />.parent()
	$headers.hover(
		function(e){
			$(this).children('a:eq(0)').addClass('selected')
		},
		function(e){
			$(this).children('a:eq(0)').removeClass('selected')
		}
	)
	$headers.each(function(i){ //loop through each LI header
		var $curobj=$(this).css({zIndex: 100-i}) //reference current LI header
		var $subul=$(this).find('ul:eq(0)').css({display:'block'})
		$subul.data('timers', {})
		this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
		this.istopheader=$curobj.parents("ul&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />.length==1? true : false //is top level header?
		$subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0})
		$curobj.children("a:eq(0)&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />.css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
			'<img src="'+ (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
			+'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
			+ '" style="border:0;" />'
		)
		if (smoothmenu.shadow.enable && !smoothmenu.css3support){ //if shadows enabled and browser doesn't support CSS3 box shadows
			this._shadowoffset={x<img src="typo3conf/ext/mm_forum//res/smilies/icon_frown.gif" alt="icon_frown.gif" />this.istopheader?$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y<img src="typo3conf/ext/mm_forum//res/smilies/icon_frown.gif" alt="icon_frown.gif" />this.istopheader? $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets
			if (this.istopheader)
				$parentshadow=$(document.body)
			else{
				var $parentLi=$curobj.parents("li:eq(0)&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />
				$parentshadow=$parentLi.get(0).$shadow
			}
			this.$shadow=$('<div class="ddshadow'+(this.istopheader? ' toplevelshadow' : '')+'"></div>').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'})  //insert shadow DIV and set it to parent node for the next shadow div
		}
		$curobj.hover(
			function(e){
				var $targetul=$subul //reference UL to reveal
				var header=$curobj.get(0) //reference header LI as DOM object
				clearTimeout($targetul.data('timers').hidetimer)
				$targetul.data('timers').showtimer=setTimeout(function(){
					header._offsets={left:$curobj.offset().left, top:$curobj.offset().top}
					var menuleft=header.istopheader && setting.orientation!='v'? 0 : header._dimensions.w
					menuleft=(header._offsets.left+menuleft+header._dimensions.subulw>$(window).width())? (header.istopheader && setting.orientation!='v'? -header._dimensions.subulw+header._dimensions.w : -header._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent
					if ($targetul.queue().length<=1){ //if 1 or less queued animations
						$targetul.css({left:menuleft+"px", width:header._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime)
						if (smoothmenu.shadow.enable && !smoothmenu.css3support){
							var shadowleft=header.istopheader? $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft
							var shadowtop=header.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : header._shadowoffset.y
							if (!header.istopheader && ddsmoothmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full
								header.$shadow.css({opacity:1})
							}
							header.$shadow.css({overflow:'', width:header._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:header._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)
						}
					}
				}, ddsmoothmenu.showhidedelay.showdelay)
			},
			function(e){
				var $targetul=$subul
				var header=$curobj.get(0)
				clearTimeout($targetul.data('timers').showtimer)
				$targetul.data('timers').hidetimer=setTimeout(function(){
					$targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime)
					if (smoothmenu.shadow.enable && !smoothmenu.css3support){
						if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
							header.$shadow.children('div:eq(0)').css({opacity:0})
						}
						header.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime)
					}
				}, ddsmoothmenu.showhidedelay.hidedelay)
			}
		) //end hover
	}) //end $headers.each()
	if (smoothmenu.shadow.enable && smoothmenu.css3support){ //if shadows enabled and browser supports CSS3 shadows
		var $toplevelul=$('#'+setting.mainmenuid+' ul li ul')
		var css3shadow=parseInt(smoothmenu.shadow.offsetx)+"px "+parseInt(smoothmenu.shadow.offsety)+"px 5px #aaa" //construct CSS3 box-shadow value
		var shadowprop=["boxShadow", "MozBoxShadow", "WebkitBoxShadow", "MsBoxShadow"] //possible vendor specific CSS3 shadow properties
		for (var i=0; i<shadowprop.length; i++){
			$toplevelul.css(shadowprop[i], css3shadow)
		}
	}
	$mainmenu.find("ul&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />.css({display:'none', visibility:'visible'})
},
 
init:function(setting){
	if (typeof setting.customtheme=="object" && setting.customtheme.length==2){ //override default menu colors (default/hover) with custom set?
		var mainmenuid='#'+setting.mainmenuid
		var mainselector=(setting.orientation=="v&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />? mainmenuid : mainmenuid+', '+mainmenuid
		document.write('<style type="text/css">\n'
			+mainselector+' ul li a {background:'+setting.customtheme[0]+';}\n'
			+mainmenuid+' ul li a:hover {background:'+setting.customtheme[1]+';}\n'
		+'</style>')
	}
	this.shadow.enable=(document.all && !window.XMLHttpRequest)? false : this.shadow.enable //in IE6, always disable shadow
	jQuery(document).ready(function($){ //ajax menu?
		if (typeof setting.contentsource=="object&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />{ //if external ajax menu
			ddsmoothmenu.getajaxmenu($, setting)
		}
		else{ //else if markup menu
			ddsmoothmenu.buildmenu($, setting)
		}
	})
}
 
} //end ddsmoothmenu variable


JS dziwnie generuje rozmiar szerokosci oraz polazenia submenu, da sie to zmienic i wpisac wartosci stale? nie znam sie na javie i nie wiem jak to ogarnac.

Dziekuje za pomoc

[Ten temat był edytowany 3 razy. Ostatnio 12.06.2012 o 14:17.]
Napisane: 12.06.2012 [15:19]
mwolanski
Twórca tematu
zarejestrowany: 23.11.2011
Posty: 88
Znalazlem ciekawe rozwiazanie

http://www.spacexplorer.net/examples/typoscriptMultiColumnMenuIllustration.png


Ale podejrzewam, ze to nie bedzie dobrze dzialac z obecnym skryptem.
Jestem w stanie z niego zrezygnowac jezeli bede mial pewnosc ze to bedzie dzialac.

Chodzi mi o dokladnie takie samo rozwiazanie jakie jest na nowej typo3.org
dziwi mnie ze jeszcze nikt nie napisal do tego dobrego tutoriala...