PDA

View Full Version : need help with phatfusion image menu



wael
08-19-2009, 07:55 AM
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:


<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>


in body:


<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 &amp; 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.css


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

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;
}

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


imagemenu.js


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

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);


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