TalkPHP

TalkPHP (http://www.talkphp.com/forums.php)
-   Javascript, AJAX, E4X (http://www.talkphp.com/javascript-ajax-e4x/)
-   -   Some help with dropdown menu (http://www.talkphp.com/javascript-ajax-e4x/2270-some-help-dropdown-menu.html)

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

sjaq 02-18-2008 06:49 AM

CSS:
Code:

.dropdown_item { position: relative; z-index: 100; }
Should do the trick

Tanax 02-18-2008 04:38 PM

Quote:

Originally Posted by sjaq (Post 10970)
CSS:
Code:

.dropdown_item { position: relative; z-index: 100; }
Should do the trick

Nope, it didn't work :-(


All times are GMT. The time now is 08:58 PM.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0