TalkPHP
 
 
Account Login
Latest Articles
» The basic usage of PHPTAL, a XML/XHTML template library for PHP
» Vulnerable methods and the areas they are commonly trusted in.
» Simple way to protect a form from bot
» The Basics On: How Session Stealing Works
» How to keep your forms from double posting data
IRC Channel
IRC Speech Bubble Join the friendly bunch on IRC...
(#TalkPHP on Freenode)

...Also available via a web interface.

See this thread for information on the TalkPHP Free Hugs Initiative™. Subject to availability.
Associates
Associates
CSS Tutorials
 
 
LinkBack Thread Tools Search this Thread Display Modes
Prev Previous Post   Next Post Next
Old 02-17-2008, 07:30 PM   #1 (permalink)
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
 



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


All times are GMT. The time now is 05:59 AM.

 
     

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Inactive Reminders By Icora Web Design