duyuru Güncel Duyurular!
Flatcast Tasarım Kampanyaları!.... Flatcast Tasarım Detayları!....
bilgi mybb

Konu Bilgileri
Konu Başlığı
Menu
Konudaki Cevap Sayısı
2
Konuyu Açan Kişi
EFSANE UyGaR
Görüntülenme Sayısı
1029
Yeni Yorum Gönder 
 
Menu
Yazar Konu
EFSANE UyGaR
Çevrimiçi

**********

Yorum Sayısı: 29,012
Üyelik Tarihi: 29-03-2012
Yorum: #1
Question Menu
Kod:
<!-- www.trturka.com -->
  <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
    msnadresiniz@hotmail.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 -->

Mutluluğun Resmini Çizemem Ama?
Acının Heykelini Bile Dikerim...!
(Bu konu en son: 04-02-2012 tarihinde, saat: 23:53 düzenlenmiştir. Konuyu düzenleyen: EFSANE UyGaR.)
04-02-2012 23:51
kullanıcının web sitesini ziyaret et kullanıcının tüm mesajlarını bul
10suz_1hayat
Çevrimdışı

**

Yorum Sayısı: 98
Üyelik Tarihi: 09-04-2012
Yorum: #2
RE: Menu
Emegıne saglık güzel paylaşim

2Le 100 VeRMeM
04-09-2012 23:15
kullanıcının web sitesini ziyaret et kullanıcının tüm mesajlarını bul
EFSANE UyGaR
Çevrimiçi

**********

Yorum Sayısı: 29,012
Üyelik Tarihi: 29-03-2012
Yorum: #3
RE: Menu
PAYLASIM ADINA TSKLER
[Resim: rose-gif3.gif]

Mutluluğun Resmini Çizemem Ama?
Acının Heykelini Bile Dikerim...!
04-10-2012 0:06
kullanıcının web sitesini ziyaret et kullanıcının tüm mesajlarını bul
Yeni Yorum Gönder 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
Question Mavi Tonlama Dikey Css Menü EFSANE UyGaR 3 1,581 05-06-2015 12:00
Son Yorum: HeRSeYiM
Question Açılır Menu Kodu EFSANE UyGaR 2 1,529 04-10-2012 0:18
Son Yorum: EFSANE UyGaR
Question KATEGORİLİ GRİ MENÜ KODU EFSANE UyGaR 2 1,249 04-10-2012 0:16
Son Yorum: EFSANE UyGaR
Question Güzel bir hazır menü html kodu EFSANE UyGaR 2 2,868 04-10-2012 0:13
Son Yorum: EFSANE UyGaR
Question Menü kodu (yatay) EFSANE UyGaR 2 1,878 04-10-2012 0:11
Son Yorum: EFSANE UyGaR

Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi