hi i have use this phatfusion image menu (http://www.phatfusion.net/imagemenu/)
mu problem is i use width :725 and my menu have 8 item so it still item number 8 not show in the menu how can i resolve it
html code is :
in header:
in body:Code:<link href="../imageMenu.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../mootools.js"></script> <script type="text/javascript" src="../imageMenu.js"></script>
imageMenu.cssCode:<div id="imageMenu"> <ul> <li class="landscapes"><a href="../Corporatestructure.aspx" > Corporate structure</a></li> <li class="people"><a href="../FUNCTIONALSCOPEOFACTIVITIES.aspx" > FUNCTIONAL SCOPE OF ACTIVITIES</a></li> <li class="nature"><a href="../SUBCIDIARIESAFFILIATES.aspx"> SUBCIDIARIES & AFFILIATES</a></li> <li class="urban"><a href="../ALARGANDEVELOPMENTS.aspx"> ALARGAN DEVELOPMENTS</a></li> <li class="abstract"><a href="../CSR.aspx" >CSR</a></li> <li class="abstract2"><a href="../MEDIACENTER.aspx" > MEDIA CENTER</a></li> <li class="abstract3"><a href="../ALARGANMARKETRESEARCH.aspx"> ALARGAN MARKET RESEARCH</a></li> <li class="abstract4"><a href="../INVESTORRELATIONS.aspx"> INVESTOR RELATIONS</a></li> </ul> </div> <script type="text/javascript"> window.addEvent('domready', function(){ var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:320, border:0,open:1}); }); </script> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-3333085-1"); pageTracker._initData(); pageTracker._trackPageview(); </script>
imagemenu.jsCode:/************************************************************** Image Menu v 2.2 **************************************************************/ #imageMenu { padding-top:0px; margin-top:0px; margin-left:0px; margin-right:0px; padding-left:0px; padding-right:0px; position: relative; width: 730px; height: 151px; overflow: hidden; } #imageMenu ul { list-style: none; margin: 0px; display: block; height: 151px; width: 730px; } #imageMenu ul li { float: left; } #imageMenu ul li a { text-indent: -1000px; background:#FFFFFF none repeat scroll 0%; border-right: 2px solid #fff; cursor:pointer; display:block; overflow:hidden; width:68px; height: 151px; } #imageMenu ul li.home a { background: url(images/logo.jpg) repeat scroll 0%; } #imageMenu ul li.landscapes a { background: url(images/CORPORATE_STRUCTURE/1.jpg) repeat scroll 0%; } #imageMenu ul li.people a { background: url(images/FUNCTIONAL_SCOPE_OF_ACTIVITIES/0904_Alargan_office_3869.jpg) repeat scroll 0%; } #imageMenu ul li.nature a { background: url(images/SUBSIDIARIES_&_AFFILIATES/85569765.jpg) repeat scroll 0%; } #imageMenu ul li.urban a { background: url(images/ALARGAN_DEVELOPMENTS/0904_New_Office_3812B.jpg) repeat scroll 0%; } #imageMenu ul li.abstract a { background: url(images/CSR/0905_DFY_E3782.jpg) repeat scroll 0%; } #imageMenu ul li.abstract2 a { background: url(images/MEDIA_CENTER/km.jpg) repeat scroll 0%; } #imageMenu ul li.abstract3 a { background: url(images/ALARGAN_MARKET_RESEARCH/78530258.jpg) repeat scroll 0%; } #imageMenu ul li.abstract4 a { background: url(images/INVESTOR_RELATION/ALARGAN_CP.jpg) repeat scroll 0%; } .clear { clear: both; } /*************************************************************/
Code:/************************************************************** Script : Image Menu Version : 2.2 Authors : Samuel Birch Desc : Licence : Open Source MIT Licence **************************************************************/ var ImageMenu = new Class({ getOptions: function(){ return { onOpen: false, onClose: Class.empty, openWidth: 320, transition: Fx.Transitions.quadOut, duration: 400, open: 0, border: 0 }; }, initialize: function(elements, options){ this.setOptions(this.getOptions(), options); this.elements = $$(elements); this.widths = {}; this.widths.closed = this.elements[0].getStyle('width').toInt(); this.widths.openSelected = this.options.openWidth; this.widths.openOthers = Math.round(((this.widths.closed*this.elements.length) - (this.widths.openSelected+this.options.border)) / (this.elements.length-1)) this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition}); this.elements.each(function(el,i){ el.addEvent('mouseenter', function(e){ new Event(e).stop(); this.reset(i); }.bind(this)); el.addEvent('mouseleave', function(e){ new Event(e).stop(); this.reset(this.options.open); }.bind(this)); var obj = this; el.addEvent('click', function(e){ if(obj.options.onOpen){ new Event(e).stop(); if(obj.options.open == i){ obj.options.open = null; obj.options.onClose(this.href, i); }else{ obj.options.open = i; obj.options.onOpen(this.href, i); } } }) }.bind(this)); if(this.options.open){ if($type(this.options.open) == 'number'){ this.reset(this.options.open); }else{ this.elements.each(function(el,i){ if(el.id == this.options.open){ this.reset(i); } },this); } } }, reset: function(num){ if($type(num) == 'number'){ var width = this.widths.openOthers; if(num+1 == this.elements.length){ width += this.options.border; } }else{ var width = this.widths.closed; } var obj = {}; this.elements.each(function(el,i){ var w = width; if(i == this.elements.length-1){ w = width+5 } obj[i] = {'width': w}; }.bind(this)); if($type(num) == 'number'){ obj[num] = {'width': this.widths.openSelected}; } this.fx.start(obj); } }); ImageMenu.implement(new Options); ImageMenu.implement(new Events); /*************************************************************/



Reply With Quote
Bookmarks