[jquery] wysuwane menu, błąd w ie,chrome


(Discochaos) #1

Witam serdecznie.

Mam problem który doprowadza mnie już do szału.

Pierwszy raz próbuje zainstalować wysuwane menu, które jest skryptem jquery.

Firefox czyta wszystko bez problemu, chrome, i ie wyświetlają błąd.

może ktoś natknął się na podobny problem i byłby w stanie pomóc? byłbym BARDZO wdzięczny.

wyswietlanie.jpg

problem pojawia się tylko w tych częściach menu, która są wysuwane

KOD Z index.html

jakiś tytuł

plik jqueryslidemenu

/ *********************

//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/

//* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering

//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/

********************* /


//Update: April 12th, 10: Fixed compat issue with jquery 1.4x


//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):

var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}


var jqueryslidemenu={


animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds


buildmenu:function(menuid, arrowsvar){

	jQuery(document).ready(function($){

		var $mainmenu=$("#"+menuid+"ul")

		var $headers=$mainmenu.find("ul").parent()

		$headers.each(function(i){

			var $curobj=$(this)

			var $subul=$(this).find('ul:eq(0)')

			this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}

			this.istopheader=$curobj.parents("ul").length==1? true : false

			$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})

			$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(

				''

			)

			$curobj.hover(

				function(e){

					var $targetul=$(this).children("ul:eq(0)")

					this._offsets={left:$(this).offset().left, top:$(this).offset().top}

					var menuleft=this.istopheader? 0 : this._dimensions.w

					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft

					if ($targetul.queue().length=1) //if 1 or less queued animations

						$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)

				},

				function(e){

					var $targetul=$(this).children("ul:eq(0)")

					$targetul.slideUp(jqueryslidemenu.animateduration.out)

				}

			) //end hover

			$curobj.click(function(){

				$(this).children("ul:eq(0)").hide()

			})

		}) //end $headers.each()

		$mainmenu.find("ul").css({display:'none', visibility:'visible'})

	}) //end document.ready

}

}


//build menu with ID="myslidemenu" on page:

jqueryslidemenu.buildmenu("myslidemenu", arrowimages)[/code]




plik css jquery

[code] .jqueryslidemenu{ font: bold 10px TAHOMA; background: menu.png; width: 100%; } .jqueryslidemenu ul{ margin: 0; padding: 0; list-style-type: none; } /*Top level list items*/ .jqueryslidemenu ul li{ position: relative; display: inline; float: left; } /*Top level menu link items style*/ .jqueryslidemenu ul li a{ display: block; background: #01a881; /*background of tabs (default state)*/ color: white; padding: 8px 8px; border-right: 0px solid #778; color: #2d2b2b; text-decoration: none; } * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ display: inline-block; } .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ color: white; } .jqueryslidemenu ul li a:hover{ background: #f57e20; /*tab link background during hover state*/ color: white; } /*1st sub level menu*/ .jqueryslidemenu ul li ul{ position: absolute; left: 0; right: 0; display: block; visibility: hidden; } /*Sub level menu list items (undo style from Top level List Items)*/ .jqueryslidemenu ul li ul li{ display: list-item; float: none; } /*All subsequent sub menu levels vertical offset after 1st level sub menu */ .jqueryslidemenu ul li ul li ul{ top: 0; } /* Sub level menu links style */ .jqueryslidemenu ul li ul li a{ font: normal 10px Tahoma; width: 100%; /*width of sub menus*/ padding: 5px; margin: 0; border-top-width: 0; border-bottom: 0px solid gray; } .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/ background: #eff9ff; color: f57e20; } /* ######### CSS classes applied to down and right arrow images ######### */ .downarrowclass{ position: absolute; top: 0px; right: 5px; } .rightarrowclass{ position: absolute; top: 6px; right: 5px; }


(E Mr Koka) #2

Chyba masz nie prawidłowe ścieżki do obrazków dla strzałek przy tych menu. Nie zagłębiałem się ale prawdopodobnie dla schowanego menu jest strzałka w prawo a dla rozwiniętego strzałka w dół. Firefox nie wyświetla zamiennie ikonki tak jak robią to inne przeglądarki gdy obrazek nie może zostać wyświetlony. Jeśli pokombinuj z umiejscowieniem plików które odpowiadają za te dwie ikonki (prawdopodobnie down.png, right.png). Gdybyś miał to na jakimś hostingu mógłbym to kliknąć za Ciebie.

Firefox nie wyświetla tej ikonki braku obrazu więc musisz kliknąć prawym w jej pobliżu, następnie w kodzie znaleźć tag który odpowiada za wyświetlenie ikony (może to być IMG) i sprawdzić co znajduje się w src lub w background(-image) w stylu css i na tej podstawie kombinować z umiejscowieniem plików ikon.