Dropdown Menu

JavaScriptSource Staff Oct 1, 2008

General

This is a very nice animated dropdown menu. Highly customizable, using unobtrusive JavaScript and CSS. Easy to implement.

Demo Demo2 Demo3

Notes

Created by: SCL Software
Web Site: http://www.sclsoftware.com/en
Posted: October 1, 2008

To display the menu from bottom to top:: menu.bottomToTop = true;
To set CSS styles to the menu:: menu.menuCssClass = 'menuCssStyle';; menu.menuItemCssClass = 'menuItemCssStyle'
To display the menu without the animation:: menu.animationType = 0;

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: sclmenu.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: SCL Software | http://www.sclsoftware.com/enLicensed under: U.S. Copyright
 */


/*======================================================================
  Javascript Menu 1.0
  Copyright (c) 2008 SCL Software (http://www.sclsoftware.com)
  You can use it freely as long as all copyright messages are intact.
======================================================================*/

if (typeof Scl == "undefined")
{
    var Scl = {};
}

(function()
{
    Scl.MenuItem = function(text, link, cssClass)
    {
        this.text = text;
        this.link = link;
        this.cssClass = cssClass;
    };

	Scl.Menu = function(menuWidth)
	{
	    var instance = this;
	    var menuDiv;
	    var menuItems = new Array();
	    var dockElement;
	    var left = 0;
	    var top = 0;
	    var width = menuWidth ? menuWidth : 200;
	    var height = 0;
	    var hideThread;
	    var fullVisible = false;
	    var animationThread;
	    var animationStart = 0;
	    var animationEnd = 0;
	    var ANIMATION_NONE = 0;
	    var ANIMATION_VERTICAL = 1;
	    this.animationType = ANIMATION_VERTICAL;
	    this.animationSpeed = 10;
	    this.animationStep = 15;
	    this.margin = 10;
	    this.menuCssClass = 'menu';
	    this.menuItemCssClass = 'menuItem';
	    this.rightToLeft = false;
	    this.bottomToTop = false;
	    this.hideTimeOut = 120;

		this.addItem = function(text, link, cssClass)
		{
		    menuItems.push(new Scl.MenuItem(text, link, cssClass));
		};

		this.dockTo = function(element)
		{
	        addEvent(window, 'load', function(){ dockToElement(element); }, false);
		};

		this.showAt = function(element)
		{
		    initialize();

	        var position = getPosition(element);
	        position.y += (instance.bottomToTop) ? (height + instance.margin) * -1 : instance.margin + element.offsetHeight;

	        show(position.x, position.y);
		};

		this.showAtPosition = function(x, y)
		{
		    initialize();
		    show(x, y);
		};

		this.hide = function()
		{
		    hideThread = setTimeout(hideMenu, instance.hideTimeOut);
		};

		function dockToElement(element)
		{
		    if(typeof(element) == 'string')
            {
                element = document.getElementById(element);
            }

            dockElement = element;
	        addEvent(element, 'mouseover', showAtDockElement, false);
	        addEvent(element, 'mouseout', instance.hide, false);
		};

		function showAtDockElement()
		{
	        instance.showAt(dockElement);
		};

		function initialize()
		{
		    if(menuDiv == null)
		    {
		        createMenu();
		    }
		};

		function show(x, y)
		{
		    cancelHide();

	        menuDiv.style.left = x + 'px';
	        menuDiv.style.top = y + 'px';

	        // Asignar para la animacion
	        left = x;
	        top = y;

	        switch(instance.animationType)
	        {
	            case ANIMATION_NONE:
		            menuDiv.style.display = 'block';
		            break;

	            default:
		            startAnimation(0, height);
		            break;
	        }
		};

		function createMenu()
	    {
            menuDiv = document.createElement('div');
            menuDiv.style.position = 'absolute';

	        var innerDiv = document.createElement('div');
            menuDiv.appendChild(innerDiv);

            innerDiv.className = instance.menuCssClass;
            innerDiv.style.width = width + 'px';

	        addEvent(menuDiv, 'mouseover', cancelHide, false);
	        addEvent(menuDiv, 'mouseout', instance.hide, false);

	        // Add items
	        for(var i=0; i< menuItems.length; i++)
	        {
	            var menuItemDiv = createMenuItem(menuItems[i]);
                innerDiv.appendChild(menuItemDiv);
	        }

	        // Add to the document
            document.body.appendChild(menuDiv);

	        height = menuDiv.offsetHeight;
		};

		function createMenuItem(menuItem)
	    {
            var menuItemDiv = document.createElement('div');
            menuItemDiv.className = menuItem.cssClass != null ? menuItem.cssClass : instance.menuItemCssClass;

            if(menuItem.link != null)
            {
                menuItemDiv.link = menuItem.link; // Crear la propiedad con el link para cada elemento
                menuItemDiv.onclick = function(){ window.location = menuItem.link; };
                var link = document.createElement('a');
                link.setAttribute('href', menuItem.link);
                link.appendChild(document.createTextNode(menuItem.text));
                menuItemDiv.appendChild(link);
            }

            return menuItemDiv;
		};

		function cancelHide()
		{
		    clearTimeout(hideThread);
		    hideThread = null;
		};

		function hideMenu()
		{
		    switch(instance.animationType)
	        {
	            case ANIMATION_NONE:
		            menuDiv.style.display = 'none';
		            break;

	            default:
		            startAnimation(parseStyle(menuDiv.style.height), 0);
		            break;
	        }
		};

		function parseStyle(value)
		{
		    return parseInt(value.substring(0, value.length-2));
		};

		function getPosition(element)
        {
            var posx = 0;
            var posy = 0;

            if (element.offsetParent)
            {
                do
                {
                    posx += element.offsetLeft;
                    posy += element.offsetTop;

                    if (!element.offsetParent)
                    {
                         break;
                    }
                }
                while (element = element.offsetParent)
            }
            else if (element.x)
            {
                posx += element.x;
                posy += element.y;
            }

            return {x:posx, y:posy};
        };

        function addEvent(element, evType, functionName, useCapture)
        {
            if(element.addEventListener)
            {
                element.addEventListener(evType, functionName, useCapture);
            }
            else if(element.attachEvent)
            {
                element.attachEvent('on' + evType , functionName);
            }
            else
            {
                element['on' + evType] = functionName;
            }
        };

		function startAnimation(start, end)
		{
            var showing = end > start;

		    if(showing & fullVisible)
		    {
		        return;
		    }

		    menuDiv.style.zIndex = showing ? 20 : 1;

		    animationStart = start;
		    animationEnd = end;
	        menuDiv.style.overflow = 'hidden';
		    menuDiv.style.display = 'block';
	        menuDiv.style.height = animationStart + 'px';

	        fullVisible = false;

	        clearInterval(animationThread);

            switch(instance.animationType)
	        {
	            case ANIMATION_VERTICAL:
	                if(instance.bottomToTop)
                    {
	                    menuDiv.style.top = (top + height - menuDiv.offsetHeight) + 'px';
	                }
	                animationThread = setInterval(animateVertical, instance.animationSpeed);
		            break;
	        }
		};

        function animateVertical()
        {
            var showing = animationEnd > animationStart;

            var strHeight = menuDiv.style.height;
            var animationHeight = parseInt(strHeight.substring(0, strHeight.length-2));

            if((showing & animationHeight >= animationEnd) || (!showing & animationHeight <= animationEnd))
            {
                clearInterval(animationThread);

		        if(showing)
		        {
		            fullVisible = true;
		        }
		        else
		        {
		            menuDiv.style.display = 'none';
		        }
            }
            else
            {
                animationHeight += showing ? instance.animationStep : -instance.animationStep;

                if((showing & animationHeight > animationEnd) || (!showing & animationHeight < animationEnd))
                {
                    animationHeight = animationEnd;
                }

                menuDiv.style.height = animationHeight + 'px';

                if(instance.bottomToTop)
                {
                    menuDiv.style.top = (top + height - animationHeight) + 'px';
                }
            }
        };
	};
})();

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

.menu {
  border: solid 1px #BFBFBF;
  padding:10px 10px 15px 10px;
  background-color:white;
}

.menuItem {
  padding:4px 10px 4px 10px;
  border-bottom:solid 1px #dddddd;
}

.menuItem:hover {
  background-color:#f1f1f1;
}

.menuItem a {
  color:#666666;
  text-decoration:none;
}

#demo {
  background-color:#eeeeee;
  cursor:pointer;
  padding:5px 20px 5px 20px;
  margin: 30px 0;
  width: 425px;
}

#demo span {
  padding:3px 20px 0px 20px;
  cursor:pointer;
}

#demo span:hover {
  text-decoration:underline;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="sclmenu.js"></script>

(function(){

var menu1=new Scl.Menu(130);
  menu1.addItem('Google Search','http://www.google.com');
  menu1.addItem('Yahoo Search','http://www.yahoo.com');
  menu1.addItem('MSN Live Search','http://www.live.com');
  menu1.addItem('Ask Search','http://www.ask.com');
  menu1.dockTo('demo1');

var menu2=new Scl.Menu(130);
  menu2.addItem('CNN News','http://www.cnn.com');
  menu2.addItem('Fox News','http://www.foxnews.com');
  menu2.addItem('BBC News','http://news.bbc.co.uk');
  menu2.addItem('abc News','http://abcnews.go.com');
  menu2.addItem('Google News','http://news.google.com');
  menu2.dockTo('demo2');

var menu3=new Scl.Menu();
  menu3.bottomToTop=true;
  menu3.addItem('Google Search','http://www.google.com');
  menu3.addItem('Yahoo Search','http://www.yahoo.com');
  menu3.addItem('MSN Live Search','http://www.live.com');
  menu3.addItem('Ask Search','http://www.ask.com');
  menu3.dockTo('demo3');
}
)();

Body

Paste this code into the BODY section of your HTML document


<div id="demo">
  <span id="demo1">Demo</span>
  <span id="demo2">Demo2</span>
  <span id="demo3">Demo3</span>
</div>

Leave a Response

(10 comments)

Without knowing the exact situation and the error message, it would ne hard to answer your question. Your question would be best answered over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Dec 2, 2008

Hi, I want to use this script but it keeps prompting the warning message about ActiveX in IE &. Any solution?

Poyi Nov 21, 2008

Wow..... very nice thanks

Riyan Nov 8, 2008

Well, Clyde, as stated at the top of these comments, we don't provide that kind of help. That's why we recommend the forums. You don't "find" anything there, you post your problem and you will get help.

Lee Nov 6, 2008

Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Nov 6, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details