Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj16.11.2008, 16:23 (UTC)    
Mesaj konusu: Focus Slide Menü ( Odaklanan Kayan Menü )

Örnek Görünüm İçin :
Arrow http://net-tr.tr.gg/-Oe-rnek-Men.ue..htm

Kod :

Alıntı:
<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( at )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="Bilgide Değil Paylasmakta Marifet ">Net-tr</a></li>
<li><a href="#" title=" Bilgide Değil Paylasmakta Marifet"> Net-tr</a></li>

<li><a href=" #" title="Bilgide Değil Paylasmakta Marifet ">Net-tr</a></li>
<li><a href="#" title="Bilgide Değil Paylasmakta Marifet ">Net-tr</a></li>
<li><a href=" # " title="Bilgide Değil Paylasmakta Marifet"> Net-tr</a></li>
</ul>


Mavi İle Gösterdigim Yerler Menünün Ustunde Yazan Yazıların Ustune Mause İle Gelınınce Yanında Çıkan Yazıdır..
Kırmızı İle Gösterdigim Yerler Menünün Üstünde Yazan Yazıdır..
Turuncu İle Gösterdigim Yerlere Link Vericeksiniz..Yazının Uzerıne Tıklanınca İstediginiz Linke Gider..


Kolay Gelsin..
Mesaj16.11.2008, 17:25 (UTC)    
Mesaj konusu:

Mesaj16.11.2008, 17:44 (UTC)    
Mesaj konusu:

Very Happy güzel paylaşım teşekkürler
______________
Mesaj16.11.2008, 18:20 (UTC)    
Mesaj konusu:

teşekkürler böle kodlar lazım foruma Wink

SAygılar...
______________
Mesaj16.11.2008, 19:05 (UTC)    
Mesaj konusu:

ekledim ama benim sayfada küçüldü

sayfanın içine aldım yine küçük

neden acaba ?
______________
Mesaj16.11.2008, 19:09 (UTC)    
Mesaj konusu:

imanveislam yazmış:
ekledim ama benim sayfada küçüldü

sayfanın içine aldım yine küçük

neden acaba ?


Hangi sayfa linkini atarmısınız ?
Mesaj16.11.2008, 19:36 (UTC)    
Mesaj konusu:

Güzel Paylaşım,Teşekkürler!
______________
http://webninjasi.tr.gg
Mesaj16.11.2008, 19:36 (UTC)    
Mesaj konusu:

ckpweb yazmış:
Güzel Paylaşım,Teşekkürler!


Wink
Mesaj16.11.2008, 19:43 (UTC)    
Mesaj konusu:

Güzel Paylasımmmmm
______________
Mesaj16.11.2008, 19:44 (UTC)    
Mesaj konusu:

devkodservisi yazmış:
Güzel Paylasımmmmm


Wink
Mesaj16.11.2008, 19:45 (UTC)    
Mesaj konusu:

Tesekkurler!.. Wink
Mesaj16.11.2008, 19:48 (UTC)    
Mesaj konusu:

cevdetprizrenli yazmış:
Tesekkurler!.. Wink


Wink
Mesaj17.11.2008, 02:42 (UTC)    
Mesaj konusu: Re: Focus Slide Menü ( Odaklanan Kayan Menü )

net-tr yazmış:
Örnek Görünüm İçin :
Arrow http://net-tr.tr.gg/-Oe-rnek-Men.ue..htm

Kod :

Alıntı:
<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( at )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="Bilgide Değil Paylasmakta Marifet ">Net-tr</a></li>
<li><a href="#" title=" Bilgide Değil Paylasmakta Marifet"> Net-tr</a></li>

<li><a href=" #" title="Bilgide Değil Paylasmakta Marifet ">Net-tr</a></li>
<li><a href="#" title="Bilgide Değil Paylasmakta Marifet ">Net-tr</a></li>
<li><a href=" # " title="Bilgide Değil Paylasmakta Marifet"> Net-tr</a></li>
</ul>


Mavi İle Gösterdigim Yerler Menünün Ustunde Yazan Yazıların Ustune Mause İle Gelınınce Yanında Çıkan Yazıdır..
Kırmızı İle Gösterdigim Yerler Menünün Üstünde Yazan Yazıdır..
Turuncu İle Gösterdigim Yerlere Link Vericeksiniz..Yazının Uzerıne Tıklanınca İstediginiz Linke Gider..


Kolay Gelsin..
Mesaj17.11.2008, 12:13 (UTC)    
Mesaj konusu:

Gereksiz Alıntı Mesajlardan Kaçının..
Herhangı Bır Cevabınız,Söyliyeceğiniz,Sorunuz Vs Varsa Buyrun Yazın.
Mesaj17.11.2008, 12:36 (UTC)    
Mesaj konusu:

Güzel Paylaşım
Teşekkürler Emincan Wink

______________
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu