View Single Post
Old 02-17-2008, 07:30 PM   #1 (permalink)
Tanax
The Prestige
Upcoming Programmer Inquisitive 
 
Tanax's Avatar
 
Join Date: Sep 2007
Location: Sweden, Stockholm
Posts: 1,080
Thanks: 115
Tanax is on a distinguished road
Default 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
__________________
Tanax is offline  
Reply With Quote