Fokuslu Slide Menü

Basit bir menü uygulaması. Tarz açısından diğer uygulamalara göre daha farklı ve kullanışlı bir yapısı bulunuyor.
Basit bir menü uygulaması. Tarz açısından diğer uygulamalara göre daha farklı ve kullanışlı bir yapısı bulunuyor.
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 */  /****************************************************** 	Focus Slide 	version 1.0 	last revision: 12.17.2004 	steve@slayeroffice.com  	Should you improve upon or 	modify this code, please let me know 	so that I can update the version hosted 	at slayeroffice.  	PLEASE LEAVE THIS NOTICE INTACT!  ******************************************************/  var d=document;		// shortcut reference to the document object var activeLI = 0;		// the currently "active" list element - value represents its index in the liObj array var zInterval = null;	// interval variable  var SLIDE_STEP = 8;	// how many pixels to move the sliding div at a time var SLIDER_WIDTH = 74;	// the width of the sliding div. used to calculate                         // its left based on the width and left of the active LI element   function init() { 	// bail out if this is an older browser or Opera which gets the offsets wrong 	// the opera issue is fixable by subtracting the container UL's width from the   // offsetLefts...but I don't care enough to do it 	// this does NOT break opera, it just wont get the sliding thing  	if(!document.getElementById || window.opera)return;  	// create references to the LI's 	mObj = d.getElementById("mContainer"); 	liObj = mObj.getElementsByTagName("li");  	// set up the mouse over events 	for(i=0;i<liObj.length;i++) { 		liObj[i].xid = i; 		liObj[i].onmouseover = function() { initSlide(this.xid); } 	}  	// create the slider object 	slideObj = mObj.appendChild(d.createElement("div")); 	slideObj.id = "slider";  	// position the slider over the first LI 	x = liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3)-5; 	y = liObj[activeLI].offsetTop-3; 	slideObj.style.top = y + "px"; 	slideObj.style.left = x + "px"; }   function initSlide(objIndex) { 	// return if the user is mousing over the currently active LI 	if(objIndex == activeLI)return; 	// clear the interval so we can start it over in a few lines to avoid doubling up on intervals 	clearInterval(zInterval);  	// set the active list item to the object index argument 	activeLI = objIndex; 	// figure out the destination for the sliding div element 	destinationX = Math.floor(liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3))-5; 	// start the interval 	intervalMethod = function() { doSlide(destinationX); } 	zInterval = setInterval(intervalMethod,10); }  function doSlide(dX) { 	// get the current left of the sliding div 	x = slideObj.offsetLeft; 	if(x+SLIDE_STEP<dX) { 		// div is less than its destination, move it to the right 		x+=SLIDE_STEP; 		slideObj.style.left = x + "px"; 	} else if (x-SLIDE_STEP>dX) { 		// div is more than its destination, move to the left 		x-=SLIDE_STEP; 		slideObj.style.left = x + "px"; 	} else  { 		// div is within the boundaries of its destination. put it where its supposed to be 		// and clear the interval 		slideObj.style.left = dX + "px"; 		clearInterval(zInterval); 		zInterval = null; 	} }  // Multiple onload function created by: Simon Willison // http://simonwillison.net/2004/May/26/addLoadEvent/ function addLoadEvent(func) {   var oldonload = window.onload;   if (typeof window.onload != 'function') {     window.onload = func;   } else {     window.onload = function() {       if (oldonload) {         oldonload();       }       func();     }   } }  addLoadEvent(function() {   init(); }); </script>  <style> #mContainer { 	position:relative; 	margin:0 auto; 	width:404px; 	height:25px; 	border-top:1px solid #638DA1; 	border-bottom:1px solid #638DA1; 	background-color:#F2F5F6; 	padding:5px 0 0 0; 	z-index:0; }  #mContainer li { 	position:relative; 	display:inline; 	margin:0 10px 0 12px; 	font:0.8em arial,verdana; 	padding:0; 	z-index:20; }  #mContainer li a { 	text-decoration:none; 	color:#638DA1; }  #slider { 	position:absolute; 	background-color:	#98B4C1; 	border:1px solid #78919B; 	width:74px; 	height:20px; 	padding:0; 	z-index:1; } </style>   <!-- this list is the actionable markup --> <ul id="mContainer"> 	<li><a href="#" title="Item One">Item One</a></li> 	<li><a href="#" title="Item Two">Item Two</a></li>  	<li><a href="#" title="Item Three">Item Three</a></li> 	<li><a href="#" title="Item Four">Item Four</a></li> 	<li><a href="#" title="Item Five">Item Five</a></li> </ul>  <!-- 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ı

Fokuslu Slide Menü

Fokuslu Slide Menü

Paylas:

Kod:

Reklam

YARARLI BİLGİLER

İÇERİKLER

Dost Siteler

Bilgiler
