Jquery'e Giriş ve Ahşap Desenli Jquery Menü Örneği

Vedat Yavuzoğlu

Vedat Yavuzoğlu

Üye
Kayıt
9 Nisan 2012
Mesaj
74
Tepki
9
Merhabalar, bu konuda Jquery'e temel bir giriş yapıp sonrasında güzel bir Jquery eklentisini inceleyeceğiz.

Jquery Nedir?


Jquery web tarayıcılarında çalışmak için tasarlanmış ve basitliği ön plana alan,açık kaynaklı bir Javascript kütüphanesidir.Sloganı "az kod çok iş"
şeklindedir.John Resig tarafından 2006 yılında geliştirilmiştir.


John Resig

Jquery ile Neler Yapılabilir?


Navigasyon Menüler
Animasyonlar
Çeşitli Efektler
Foto Slaytlar
Harita vb Uygulamaları
3D Uygulamalar
Ajax uygulamaları..
ve daha bir çok kullanım alanı vardır.


Nasıl Kullanılır?


Jquery'nin resmi sitesinden indirilebilir.(http://www.jquery.com)
Web sayfasını yayınladığınız dizine dosya olarak yerleştirilip yada online referans göstermek yöntemiyle eklenip kullanılabilir.
Özellikle google code'dan referans göstermek yüklenme hızı konusunda daha avantajlıdır.Günümüze kadar değişik Jquery versiyonları çıkmıştır.

Avantajları Nelerdir?


Jquery'nin en önemli avantajı çok uzun satırlarla yapılabilecek bir işlemi kısaltıp kod yükünü azaltmasıdır.Popülerliğinden dolayı
çok sayıda Jquery eklentisi olduğu için kullanım alanı oldukça geniştir.


Ahşap Desenli Yatay Jquery Menu Örneği


​
İnternette görüp arşivime almıştım.Güzel tasarlanmış bir Jquery navigasyon menü örneği.Menüleri ve açıklamaları tarafımdan türkçeleştirilmiştir.
İstenirse ek özelliklerde katılıp daha zengin tasarımlar yapılabilir.
Aşağıdaki linkten canlı olarak menünün ön izlemesini yapabilirsiniz.Text-box'ların üstüne geldiğinizde çıkan yorum pencereleri menüye ayrı bir
estetik kazandırmış.
Menünün yapımında kullanılan dosyalarada kısaca değinelim.
1- style.css: Menünün ana css dosyası.
2- formbox.js: Jquery dosyası.Bu dosyanın içerisindeki $(window).load(function() fonksiyonunun içinde bulunan ve menünün aşağı doğru açılan
bölümünün hızını kontrol eden iki satır var.Bunlar:
--var dropDownSpeed = 200; Bu satır menünün aşağı doğru açılma süresini kontrol ediyor.İstenilen değer girilebilir.
--var dropUpSpeed = 200; Bu satır ise mausla menü üzerinden ayrıldıktan sonra kapanma süresini kontrol eder.
Bu dosyanın içerisindeki parametrelerle oynayıp deneme yanılma yoluyla ek özelliklerde katılabilir.
3- 1.4.2.js: Ana Jquery kütüphanesi.
4- index.html: Ana html dosyası.
Style.Css İçeriği
Kod: 
body {
        
background-image:url('../images/162.png');
}
        
        
ul#tabPanes 
{
        
    margin-left:52px;
    position:relative;
    width:227px;
    overflow: hidden;
    clear:both;
    font-family:Arial;
    list-style-type: none;
    margin-top:-0px;
  
    position:absolute;
    
    
    
}

.subtitle{

color:white;
font-weight:bold;
font-family:Arial;
letter-spacing:-2px;
font-size:25px;

}

input[type=text] { width: 200px}

ul#tabPanes li 
{
    width: 227px;
    
   
    
}

ul#tabPanes li#tab1,li#tab2,li#tab3,li#tab4 
{ 
    background: #C7C7C7;
    margin-top:-30px;
    height:227px;
    margin-left:-3px;
    display:none;
    text-shadow: #ffffff 0px 1px 0px;
   
        
     background-color:#C9AA7C; 
        
     -moz-border-radius-bottomright: 5px;
     -moz-border-radius-bottomleft: 5px;
     -webkit-border-bottom-right-radius:5px;
     -webkit-border-bottom-left-radius:5px;
     background-image:url('../images/wood3.jpg');
     background-repeat:no-repeat;
     
     -webkit-box-shadow: 0px 3px 4px rgba(0,0,0,0.6);
     -moz-box-shadow: 0px 3px 4px ;
     box-shadow: 0px 3px 4px ; 
    
}


#tabMenu { 
clear:both; 
list-style-type:none;

}
#tabMenu li { 
    float:left;
    line-height:42px;
    padding-left:10px;
    padding-right:10px;
    
    
    
    
}

#tabContainer
{
 margin:0 auto;
 width:570px;

}


#tabMenu li a { 
    text-decoration:none; color:#291B16;
    text-shadow: #C9AA7C 0px 1px 0px;
    font-weight:bold;
    
}
#tabs {

    
width:650px;
height:47px;
    
background-image:url('../images/wooden8.png');
    
-webkit-box-shadow: 0px 5px 6px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 5px 6px ;
box-shadow: 0px 5px 6px ; 
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; 

font-family:Arial;
font-size:14px;
margin:0 auto;



}

.activeTab {
background-color:#C9AA7C; 
text-shadow: #ffffff 0px 1px 0px;   
background-image:url('../images/wood3.jpg');
}



.formcontainer { margin-left:10px}

.text label {
    display:block;
}


.edges { background-color:transparent;}
#edgesline { margin:0 auto; width:600px; height:10px;}


#bluebutton button 
{ background: none repeat scroll 0% 0% rgb(65, 98, 168); 
    border: 1px solid rgb(25, 37, 63); 
    -moz-border-radius: 5px 5px 5px 5px; 
    -moz-box-shadow: 0pt 1px 10px 1px rgb(92, 139, 238) inset, 0px 1px 0pt rgb(29, 44, 77), 0pt 6px 0px rgb(31, 48, 83), 0pt 8px 4px 1px rgb(17, 17, 17); color: rgb(255, 255, 255); 
    
    -webkit-border-radius: 5px 5px 5px 5px; 
    -webkit-box-shadow: 0pt 1px 10px 1px rgb(92, 139, 238) inset, 0px 1px 0pt rgb(29, 44, 77), 0pt 6px 0px rgb(31, 48, 83), 0pt 8px 4px 1px rgb(17, 17, 17); color: rgb(255, 255, 255); 
    
    font-family: Arial; font-size: 20px; font-weight: bold; line-height: 1; margin-bottom: 10px; padding:3px 7px 7px; text-align: center; text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8); width: 123px; }

#bluebutton button:hover { -moz-box-shadow: 0pt 1px 10px 1px rgb(92, 139, 238) inset, 0px 1px 0pt rgb(29, 44, 77), 0pt 3px 0px rgb(31, 48, 83), 0pt 3px 4px 1px rgb(17, 17, 17); margin-bottom: 6px; margin-top: 14px; -webkit-box-shadow: 0pt 1px 10px 1px rgb(92, 139, 238) inset, 0px 1px 0pt rgb(29, 44, 77), 0pt 3px 0px rgb(31, 48, 83), 0pt 3px 4px 1px rgb(17, 17, 17);}

#bluebutton button { margin-top: 10px; }

p { padding:3px}

#board { margin-top:10px;}

#menuTooltip{
  width: 160px;
  min-height:90px;
  position: absolute; display: none;
  text-align:center;
  font-family:Arial;
  font-size:12px;
  background-image:url('../images/tooltip_ao.png');
  background-repeat:no-repeat;
}

#menuTooltip p {
  width:145px;
  margin:5px;
  height:60px;
  margin-top:10px;
  
}

.footerlink {

color:#ccc;
font-size:12px;
font-family:Arial;
text-transform: none;
text-decoration: none;

}


Formbox.js
Kod: 
/* 

jQuery FormBox - Copyright AddyOsmani.com, 2010.
Released under the GPL for open-source use

*/

$(window).load(function(){

var tabs = $("#tabs");
var tabPanesContainer = $("ul#tabPanes");
var tabPanesAll = tabPanesContainer.find("li").css("position", "absolute");
var tabMenuLinks = $("ul#tabMenu .dropdown");
var regularLinks = $("ul#tabMenu .regular");
var dropDownSpeed = 200;//menu acılma suresi
var dropUpSpeed   = 200;// menu kapanma suresi
var menuHeight = '240px';


/*Close the currently open menu*/
function closeMenu()
{

tabMenuLinks.removeClass('activeTab');

    tabPanesContainer.stop().animate({
        height: '0px'
    }, dropUpSpeed);

    
}

/*Handle non tab-menu links*/
regularLinks.hover(function() 
{
    tabPanesContainer.stop().animate({
        height: '0px'
    });
    
    tabMenuLinks.removeClass('activeTab');
    $(this).addClass('activeTab');

}, function() {
    $(this).removeClass('activeTab');

});

/*Handle tab-menu links*/
tabMenuLinks.hover(function() 
{

    var thisMenuItem = $(this);

    /*get the offset of this item in respect to the page*/
    var thisMargin   = thisMenuItem.offset().left;
    
    /*get the offset of the navigation bar in respect to the page*/
    var tabsOffset   = tabs.offset().left;
    var thisIndex = thisMenuItem.index();
    
    thisMargin = Math.floor(thisMargin - tabsOffset);
    
       
    var thisOffset = thisMargin - 52;
    
    /* handle IE margin difference*/
    if($.browser.msie)
    {
      thisOffset = thisMargin - 15;
    }
    

    tabPanesContainer.css('margin-left', thisOffset);

    tabPanesContainer.stop().animate({
        height: menuHeight
    }, dropDownSpeed);
    
    
    
    tabMenuLinks.removeClass('activeTab');
    thisMenuItem.addClass('activeTab');


    var thisHash = thisMenuItem.find("a").attr('href');
    var tabClicked = tabPanesAll.filter(thisHash);

    
    tabClicked.appendTo(tabPanesContainer).show();
    
    
    
    return false;


}, function() {

   $(this).stop();
   
});


/*
Display Tooltips on hovering over the input fields if an
alt tag is present
*/
$('input').hover(function()
{
var thisItem = $(this);
var msgTip = thisItem.attr('alt');

if(msgTip.length)
{

  $('body').append('<div id="menuTooltip">\
            <p>'+  msgTip +'</p>\</div>');
 
        var pos = thisItem.offset();  
        var width = thisItem.width();
 
        $("#menuTooltip").css( { "left": (pos.left + 115) + "px", "top":pos.top - 90 + "px" } );
        $("#menuTooltip").fadeIn('slow');
}
 
}, function()
{
  
  $('div#menuTooltip').remove();

});




/*Handle a user hovering over the tab container*/
tabPanesContainer.hover(function() 
{
 
}, function() 
{  
    closeMenu();
});


$('.edges').hover(function()
{
   closeMenu();
   
}, function()
{
});

    });


İndex.html
Kod: 
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta ***********="Content-Type" content="text/html; charset=ISO-8859-9"> 
<title>Jquery Ahsap Navigasyon Ornegi</title>
<meta ***********="content-type" content="text/html; charset=UTF-8">
<meta ***********="edit-Type" edit="text/html; charset=utf-8">

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type='text/javascript' src='js/formbox.js'></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
    
<!--[if IE]>

<style type="text/css">

img, div, a, input { behavior: url(images/iepngfix.htc) }

#logo { margin-top:-40px; margin-bottom:5px;}

ul#tabPanes li#tab1,li#tab2,li#tab3,li#tab4 
{ 
margin-top:20px;
}

ul#tabPanes {
margin-top:-20px;
}

</style>
<![endif]-->

</head>
<body>
    <div id="edgesline" class="edges"></div>
    <div id="tabs">
    <ul id="tabMenu">
  
        <li class="regular"><a href="home.html">Anasayfa</a></li>
        <li class="dropdown"><a href="#tab1">Giriş</a></li>
        <li class="dropdown"><a href="#tab2">Kaydol</a></li>
        <li class="dropdown"><a href="#tab3">Şifre Hatırlat</a></li>
        <li class="regular"><a href="home.html">Hizmetler</a></li>
        <li class="regular"><a href="home.html">Hakkımızda</a></li>
        <li class="dropdown"><a href="#tab4">İletişim</a></li>
        <li class="edges">&nbsp;</li>
      
    </ul>
 
</div>
<div id="tabContainer">
<ul id="tabPanes">
    <li id="tab1">
        
        <p>
            
            <div class="formcontainer">
                
                <div class="text">
                    <label for="username">Kullanıcı Adı</label>

                    <input type="text" name="username" id="username" alt="Kayıt esnasındaki kullanıcı adınızı giriniz..">
                </div>
                
                <div class="text">
                    <label for="password">Şifre</label>
                    <input type="text" name="password" id="password" alt="Kayıt esnasındaki şifrenizi giriniz..">
                </div>
                
                <div class="text">
                    <br>

                    <input type="checkbox" name="rememberme" id="rememberme"> Beni Tanı
                    
                </div>
            </div>            
            
            <center>
            
                <div class="block" id="bluebutton">
                    <button>Giriş</button>
                </div>
            </center>
            
            
        </p>

    </li>
    
    <li id="tab2">
        
        <p>
            
            <div class="formcontainer">
                <div class="text">
                    <label for="username">Kullanıcı Adınız</label>
                    <input type="text" name="desusername" id="desusername" alt="Minumum 5 karakter gereklidir..">
                </div>

                
                <div class="text">
                    <label for="despassword">Şifreniz</label>
                    <input type="text" name="despassword" id="despassword" alt="Minumum 5 karakter gereklidir..">
                </div>
                <div class="text">
                    <label for="password">Şifre Tekrarı</label>
                    <input type="text" name="confpassword" id="confpassword" alt="Şifreyi tekrar giriniz..">
                </div>

            </div>
            
            
            <center>
                <div class="block" id="bluebutton">
                    <button>Kayıt Ol</button>
                </div>
            </center>
            
        </p>
    </li>

    <li id="tab3">
        
        <p>
            <div class="formcontainer">
                
                <div class="text">
                    <label for="username">Kullanıcı Adı</label>
                    <input type="text" name="username" id="username" alt="Lütfen geçerli bir kullanıcı adı yazınız..">
                </div>
                <br>    
                Lütfen buraya kullanıcı adınızı giriniz.Gönder'e bastığınızda şifreniz e-mail adresinize gönderilecektir.
                
                <center>

                    <div class="block" id="bluebutton">
                        <button>Gönder</button>
                    </div>
                </center>
                
            </p>
            </li>
                
                <li id="tab4">
                    
                    <p>

                        
                        <div class="formcontainer">
                            <div class="text">
                                <label for="yourname">Mail Adresiniz</label>
                                <input type="text" name="youremail" id="youremail" alt="Lütfen buraya kullandığınız geçerli bir mail adresi yazınız..">
                            </div>
                            
                            <div class="text">
                                <label for="msgsubject">Konu</label>
                                <input type="text" name="msgsubject" id="msgsubject" alt="Mesajınızın konusunu yazınız..">

                            </div>
                            <div class="text">
                                <label for="password">Mesajınız</label>
                                <input type="text" name="msgtext" id="msgtext" alt="Kısaca mesajınızı yazınız,mail adresinize geri dönüş yapılacaktır..">
                            </div>
                        </div>
                        
                        
                        <center>
                            <div class="block" id="bluebutton">

                                <button>Gönder</button>
                            </div>
                        </center>
                    </div>
                        
                    </p>
                </li>                

            </ul>
            
            </div>
</body>
</html>


Canlı Önizleme ve Resimleri İndirmek İçin Tıklayınız
http://www.teknik-web.com/menu1.html

Kendi Bilgisayarınızda İncelemek İçin
Bir klasöre css,images ve js isminde üç tane klasör oluşturun.İçerisine örnekte verilen dosyaları atın.İndex dosyasını çalıştırıp kontrolleri yapabilirsiniz..
Herkese kolay gelsin,iyi çalışmalar..


​
 
Cevap yazmak için giriş yapmalısınız.
Yukarı Alt