javascript导航

<SCRIPT type=text/javascript>
 
// JavaScript Document
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';
                }
            }
        };
    };
})();
 
 
 
</SCRIPT>
 
<SCRIPT type=text/javascript>
(function(){
 
var menu1=new Scl.Menu(140);
  menu1.addItem('Founders Legacy','1_1_comp_profile.ashx');
  menu1.addItem('Message From The President','1_2_comp_profile.ashx');
  menu1.addItem('Mission, Vision, Values','1_3_comp_profile.ashx');
  menu1.addItem('Make A Wish Foundation','1_4_comp_profile.ashx');
  menu1.addItem('Press Room','1_5_comp_profile.ashx');
  menu1.dockTo('top_nav1');
 
var menu2=new Scl.Menu(120);
  menu2.addItem('Be Your Own Boss','2_1_opportunity.ashx');
  menu2.addItem('Testimonials','2_2_opportunity.ashx');
  menu2.addItem('Fabulous Rewards','2_3_opportunity.ashx');
  menu2.addItem('Sign Up','PWPRegistrationAgreement.ashx');
  menu2.dockTo('top_nav2');
 
var menu3=new Scl.Menu(120);
  menu3.addItem('Hostess Plan/ Free Products','3_1_host_party.ashx');
  menu3.addItem('Your Role','3_2_host_party.ashx');
  menu3.addItem('Sign Up','ContactMe.ashx');
  menu3.addItem('More Information','3_4_host_party.ashx');
  menu3.dockTo('top_nav3');
 
var menu4=new Scl.Menu(110);
 
  menu4.addItem('Products','productcategorylist.ashx');
  menu4.addItem('Cart','PWPShowShoppingCart.ashx ');
  menu4.addItem('Check Out','PWPShop.ashx ');
  menu4.dockTo('top_nav4');
 
var menu5=new Scl.Menu(110);
  menu5.addItem('What Is Special?','5_1_fundraising.ashx');
  menu5.addItem('Profits','5_2_fundraising.ashx');
  menu5.addItem('Products','5_3_fundraising.ashx');
  menu5.addItem('Personal Service','5_4_fundraising.ashx');
  menu5.dockTo('top_nav5');
}
)();
 
//-->
</SCRIPT>

 

<DIV id=navigation>
<DIV id=top_nav><SPAN id=top_nav1><A
href="1_0_comp_profile.ashx">Company
Profile</A></SPAN> <SPAN id=top_nav2><A
href="2_0_opportunity.ashx">Opportunity</A></SPAN>
<SPAN id=top_nav3><A
href="3_0_host_party.ashx">Host
a Party</A></SPAN> <SPAN id=top_nav4><A
 target="_blank">Shop</A></SPAN>
<SPAN id=top_nav5><A
href="5_0_fundraising.ashx">Fundraising</A></SPAN>
<SPAN id=top_nav5><A
href="PWPSearchProduct.ashx">Search</A> </SPAN></DIV>
<!--    <a href="#" title="My Home Page">Company Profile</a> <a href="#">Opportunity</a><a href="#">Host A Party</a>

<a href="#" title="">Shop</a> <a href="#" title="">Fundraising</a> --></DIV>