| Tanax |
02-17-2008 07:30 PM |
Some help with dropdown menu
Hey!
I got this dropdown menu, from a guy on the mootools forums..
javascript Code:
var SlideMenu = { create: function (elementID, direction, menuID) { this.props = 0; this.mode = 'vertical'; if (typeof(direction) != "undefined" && direction != null) this.mode = direction; //Move the menu of the screen, show the menu, create the Menu, collapse the menu, replace the menu. this.menu = $(elementID); this.menu.style.visibility = "hidden"; this.menu.style.display = "block"; this.menu.style.left = (this.menu.offsetLeft - 1000) + "px"; this.menu.style.visibility = "visible"; this.slider = new Fx.Slide(elementID, {duration: 500, mode: this.mode}).hide(); this.menu.style.left = (this.menu.offsetLeft + 1000) + "px"; this.instanceID = menuID?menuID:elementID; SlideMenu.instances[this.instanceID] = this; this.show = function(force) { if (force) this.props = 0; if (this.props == 0) { this.slider.stop(); this.slider.slideIn(); this.prop(); setTimeout("SlideMenu.instances['"+this.instanceID+"'].hide();", 400); } } this.hide = function() { if (this.props == 0) { this.slider.stop(); this.slider.slideOut(); } else { setTimeout("SlideMenu.instances['"+this.instanceID+"'].hide();", 400); } } this.prop = function() { this.props++; } this.unprop = function() { if (this.props <= 0) this.props = 0; else this.props--; } }, instances: new Array(), //Public static member containing references to all isntances of SlideMenu objects. //show will show a menu if it is not already shown, prop it open, and set a timeout for it to auto-hide when it is unpropped. show: function (id, force) { if (typeof(SlideMenu.instances[id]) == "object") SlideMenu.instances[id].show(force || false); }, //unprop takes the prop off a menu so it can hide the next time it tries. unprop: function (id) { if (typeof(SlideMenu.instances[id]) == "object") SlideMenu.instances[id].unprop(); }, //prop adds another prop to the menu so that it won't hide until it is unpropped. prop: function (id) { if (typeof(SlideMenu.instances[id]) == "object") SlideMenu.instances[id].prop(); } };
window.addEvent('domready', function() { myMenu = SlideMenu.create('services_slidemenu', 'vertical', 'services'); });
HTML Code:
<a href="javascript:void(0);" onclick="SlideMenu.unprop('services');" onmouseover="SlideMenu.show('services')" onmouseout="SlideMenu.unprop('services')">Services</a>
<div id="services_dropdown" onmouseover="SlideMenu.prop('services');" onmouseout="SlideMenu.unprop('services');">
<div id="services_slidemenu">
<div class="dropdown_item">
<a href="">Negative/Slide Scan</a>
</div>
<div class="dropdown_item">
<a href="">Original Artwork Scan</a>
</div>
<div class="dropdown_item">
<a href="">Digital Copy</a>
</div>
<div class="dropdown_item">
<a href="">Large Format Printing</a>
</div>
</div>
</div>
So what I wonder is, is there a way to make this menu floating? So that I can write stuff below the "services" link, and the menu floats ABOVE that text/images? Because right now, the whole content is pushed down when the menu is opened.
If you need a live example of what I want, take the quick links on the vBulletin for example..
Thanks in advance :-)
|