Navigation : Dropdown Menu / The JavaScript Source

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://javascript.internet.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>

User Comments

Add a comment, suggestion, or correction

Comments feed

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

9. From: Poyi
ActiveX Control
11/21/2008 14:25:05

10. From: Lee (Admin)
12/02/2008 11:35:26

8. From: Riyan
11/08/2008 23:13:17

6. From: CLYDE
11/05/2008 18:48:00

7. From: Lee (Admin)
11/06/2008 12:04:53

1. From: Joe
Errors in the scripts??
10/20/2008 15:04:04

2. From: Lee (Admin)
10/31/2008 12:52:08

4. From: Ed
10/03/2008 16:43:24

5. From: Lee (Admin)
11/06/2008 11:14:50

3. From: Bob
target
10/01/2008 17:55:17

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

9. From: PoyiActiveX Control11/21/2008 14:25:05

10. From: Lee (Admin)12/02/2008 11:35:26

8. From: Riyan11/08/2008 23:13:17

6. From: CLYDE11/05/2008 18:48:00

7. From: Lee (Admin)11/06/2008 12:04:53

1. From: JoeErrors in the scripts??10/20/2008 15:04:04

2. From: Lee (Admin)10/31/2008 12:52:08

4. From: Ed10/03/2008 16:43:24

5. From: Lee (Admin)11/06/2008 11:14:50

3. From: Bobtarget10/01/2008 17:55:17

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

9. From: Poyi
ActiveX Control
11/21/2008 14:25:05

10. From: Lee (Admin)
12/02/2008 11:35:26

8. From: Riyan
11/08/2008 23:13:17

6. From: CLYDE
11/05/2008 18:48:00

7. From: Lee (Admin)
11/06/2008 12:04:53

1. From: Joe
Errors in the scripts??
10/20/2008 15:04:04

2. From: Lee (Admin)
10/31/2008 12:52:08

4. From: Ed
10/03/2008 16:43:24

5. From: Lee (Admin)
11/06/2008 11:14:50

3. From: Bob
target
10/01/2008 17:55:17