Açılır Menü

Açılır Menü Js

Hoş bir açılır menü uygulaması.
Hoş bir açılır menü uygulaması.
Paylas:

Kod:

  <!-- www.1htmlkodlari.tr.gg adresinden alınmıştır -->   <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>  <!-- www.1htmlkodlari.tr.gg adresinden alınmıştır -->
Yeni HTML Kodları

Araç Gereçler

HTML Kodları | tr.gg kod | Html kod | sitene ekle | FBML Kodları

Açılır Menü

Açılır Menü Js

Paylas:

Kod:

Reklam

YARARLI BİLGİLER

İÇERİKLER

Dost Siteler

Bilgiler
