imageMenu
version 2.3
horizontal menu, reveals more of the image as you rollover it.
features
- 2 optional onClick events - open & close
- href passed to onClick events
- stays open when clicked
- closes when clicked
- select item to pre-open
basic example
advanced example
usage
add these javascript files to your page
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="/js/fx.elements.js"></script>
<script type="text/javascript" src="/js/imageMenu.js"></script>
create your menu html like this
<div id="imageMenuBasic" class="imageMenu">
<ul>
<li class="landscapes"><a href="#">Landscapes</a></li>
<li class="people"><a href="h#">People</a></li>
<li class="nature"><a href="#">Nature</a></li>
<li class="urban"><a href="#">Urban</a></li>
<li class="abstract"><a href="#">Abstract</a></li>
</ul>
</div>
style it something like this
.imageMenu { position: relative; width: 500px; height: 200px; overflow: hidden; }
.imageMenu ul { list-style: none; margin: 0px; display: block; height: 200px; width: 1000px; }
.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:98px; height: 200px; }
.imageMenu ul li.landscapes a { background: url(/images/imageMenu/landscapes.jpg) repeat scroll 0%; }
initialize the script like this
window.addEvent('domready', function(){
new ImageMenu($$('#imageMenu a'), {
openWidth:310,
border:2
});
});
requirements:
- mootools v1.2 core
- mootools v1.2 more - fx.elements
API
syntax:
new ImageMenu(elements [, options]);
arguments:
- elements - (array)
- options - (object, optional)
options:
- openWidth
- width in px of the items when rolled over. default: 200
- transition
- default: Fx.Transitions.Quad.easeOut
- duration
- the length of the transition. default: 400
- open
- the id or index of the item to open on start. default: null
- border
- a px value to tweak the widths when an item is open. default: 0
events:
- OnOpen
- a function to execute when an item opens (mouseover). If there is an href within the li then that is passed to the function.
- OnClose
- same as above but when closed. (mouseout)
- OnClickOpen
- a function to execute when an item is clicked open. If there is an href within the li then that is passed to the function.
- OnClickClose
- same as above but when clicked closed.
returns:
- (object) a new imageMenu instance.
Please somebody write me code for the advanced example? very very please
Hi There
I do not know if i can get some help over here but anyway i am going to give a try.
it is kind of weird but the donwloaded files work properly on my pc but as soon as I upload them onto a web server, it does not wokr anymore. I was wondering if i removed some part of the code while editing it but i have the same problem if i only donwload the files and place them directly onto the server. http://www.cusconews.com/bladicito/imageMenu/
can you please take a look?
any help will be really apreciated.
have a nice day
best regards
blady
Hi Bladimir, your url is not work:( i need a full html source code for advanced example
Hi, i love your javascripts! Can I put this javascript in vertical
Hi I am sort of tracking with you until the last part “Initialize the script like this:”. Where does that go and what type of file is that? Is it a separate file? Sorry I am new to this java stuff. Thanks
Drew
Hi experiencing the same problem as Bladamir. In the absence of knowing how to fully implement this so far I have uploaded the download package and loaded the index.htm file included to see the results. Similar to Bladamir it works when run locally, but not when hosted live.
Please see http://www.yournukes.com/imagemenu/index.htm to see, and http://yournukes.com/imagemenu/Picture7.png to see how it works on my local drive.
It seems that the menu just becomes a static block when I upload it no interactivity. Thanks Petr!
I had the same problem and I found it in my implementation: The file handling on the web server is case sensitive and therefore the file Fx.Elements.js will not be loaded if it will be called in the html file like this: fx.elements.js.
So it will work on a local windows machine but not on a linux based web server.
Hey !
Excellent, and the same vertical ?
Is it possible to have a vertical image menu with this package?
Hi
A really great script, but I got one problem: If I am working local it works fine, but if I am loading the new site from the server I get the message in the script imagemenu.js:
Line 38 Fx.Elements is not a constructor
and the menu does not work.
Can some one tell me what is wrong?
Thanks for your support.
Uli