<script type="text/javascript"> /* 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'; } } }; }; })(); </script> <script type="text/javascript"> (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'); } )(); </script> <style> .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; } </style> <div id="demo"> <span id="demo1">Demo</span> <span id="demo2">Demo2</span> <span id="demo3">Demo3</span> </div>

 Kodu Kopyala

Hata Bildir | Tavsiye Et
 

Bu içeriğe oy verin: 1 2 3 4 5 6 7 8 9 10

Yorumlar / Yeni Yorum Yaz

Bu içeriğe yorum yazılmamış.