Konular

Jquery Tab Menu Örneği

Çok güzel hazırlanmış bir Jquery Tab Menu Uygulaması

Jquery Tab Menu Örneği

HTML Kod Kısmı

 

<div class="box">
 
  <ul id="tabMenu">
    <li class="posts selected"></li>
    <li class="comments"></li>
    <li class="category"></li>
    <li class="famous"></li>
    <li class="random"></li>
  </ul>
 
  <div class="boxTop"></div>
 
  <div class="boxBody">
   
    <div id="posts" class="show">
      <ul>
        <li>Post 1</li>
        <li>Post 2</li>
        <li class="last">Post 3</li>
      </ul>
    </div>
   
    <div id="comments">
      <ul>
        <li>Comment 1</li>
        <li>Comment 2</li>
        <li class="last">Comment 3</li>
      </ul>
    </div>
   
    <div id="category">
      <ul>
        <li>Category 1</li>
        <li>Category 2</li>
        <li class="last">Category 3</li>
      </ul>
    </div>
   
    <div id="famous">
      <ul>
        <li>Famous post 1</li>
        <li>Famous post 2</li>
        <li class="last">Famous post 3</li>
      </ul>
    </div>
   
    <div id="random">
      <ul>
        <li>Random post 1</li>
        <li>Random post 2</li>
        <li class="last">Random post 3</li>
      </ul>  
    </div>      
 
  </div>
 
  <div class="boxBottom"></div>
 
</div>

 

CSS Kod Kısmı

 

<style>
 
a {
    color:#ccc;
    text-decoration:none;
}
 
a:hover {
    color:#ccc;
    text-decoration:none
}
 
#tabMenu {
    margin:0;
    padding:0 0 0 15px;
    list-style:none;
}
 
#tabMenu li {
    float:left;
    height:32px;
    width:39px;
    cursor:pointer;
    cursor:hand
}
 
/* this is the button images */
li.comments {background:url(images/tabComment.gif) no-repeat 0 -32px;}
li.posts {background:url(images/tabStar.gif) no-repeat 0 -32px;}
li.category {background:url(images/tabFolder.gif) no-repeat 0 -32px;}
li.famous {background:url(images/tabHeart.gif) no-repeat 0 -32px;}
li.random {background:url(images/tabRandom.gif) no-repeat 0 -32px;}
 
li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}
 
.box {
    width:227px
}
 
.boxTop {
    background:url(images/boxTop.gif)no-repeat;
    height:11px;
    clear:both
}
 
.boxBody {
    background-color:#282828;
}
 
.boxBottom {
    background:url(images/boxBottom.gif) no-repeat;
    height:11px;
}
 
.boxBody div {
    display:none;
}
 
.boxBody div.show {
    display:block;
}
 
 
.boxBody #category a {
    display:block
}
 
/* styling for the content*/
.boxBody div ul {
    margin:0 10px 0 25px;
    padding:0;
    width:190px;
    list-style-image:url(images/arrow.gif)
}
 
.boxBody div li {
    border-bottom:1px dotted #8e8e8e;
    padding:4px 0;
    cursor:hand;
    cursor:pointer
}
 
.boxBody div ul li.last {
    border-bottom:none
}
 
.boxBody div li span {
    font-size:8px;
    font-style:italic;
    color:#888;
}
 
/* IE Hacks */
*html .boxTop {margin-bottom:-2px;}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}
 
</style>

 

Jquery Kısmı

 

<script type="text/javascript">
 
$(document).ready(function() {  
 
  //Get all the LI from the #tabMenu UL
  $('#tabMenu > li').click(function(){
         
    //perform the actions when it's not selected
    if (!$(this).hasClass('selected')) {    
 
    //remove the selected class from all LI    
    $('#tabMenu > li').removeClass('selected');
     
    //After cleared all the LI, reassign the class to the selected tab
    $(this).addClass('selected');
     
    //Hide all the DIV in .boxBody
    $('.boxBody div').slideUp('1500');
     
    //Look for the right DIV index based on the Navigation UL index
    $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
     
   }
 
  }).mouseover(function() {
 
    //Add and remove class, Personally I dont think this is the right way to do it,
    //if you have better ideas to toggle it, please comment    
    $(this).addClass('mouseover');
    $(this).removeClass('mouseout');  
     
  }).mouseout(function() {
     
    //Add and remove class
    $(this).addClass('mouseout');
    $(this).removeClass('mouseover');    
     
  });
 
   
  //Mouseover with animate Effect for Category menu list  :)
  $('.boxBody #category li').mouseover(function() {
 
    //Change background color and animate the padding
    $(this).css('backgroundColor','#888');
    $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
  }).mouseout(function() {
     
    //Change background color and animate the padding
    $(this).css('backgroundColor','');
    $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
  });  
     
  //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
  $('.boxBody li').click(function(){
    window.location = $(this).find("a").attr("href");
  }).mouseover(function() {
    $(this).css('backgroundColor','#888');
  }).mouseout(function() {
    $(this).css('backgroundColor','');
  });  
     
});
 
</script>

 

Kaynak http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial

Yorumunuzu Ekleyin

Easy Slider Jquery Plugin

Jquery ile yapılmış mükkemmel sliderlardan birisi Easy Slider

26,796 Okunma Henüz yorum yapılmamış 25/07/2011 22:43:59

Kapsayan Tagı Silmek unwrap()

Bazen SEO için tagları bir başka tag içerisine gömmek zorunda kalırız. Fakat daha sonra bu gömen kod başımıza bela olabilir. JQuery ile bundan unwrap ile kurtulabiliriz.

23,222 Okunma Henüz yorum yapılmamış 10/07/2011 04:55:07

Jquery ile Basit Bir Slider

Jquery kullanarak yapılmış basit bir slider örneği

21,506 Okunma Henüz yorum yapılmamış 25/07/2011 22:20:05

Jquery İle Resim Boyutlandırma

Bir IMG tagının içinde bulunduğu DIV tağına göre yeniden boyutlandırılması, sayfanın genişliğinin değişmesi sonuçları değiştirecektir.

20,596 Okunma Henüz yorum yapılmamış 10/07/2011 04:24:25

Jquery ile Resim Ortalamak

Bir DIV tagı ile sınırlandırılmış bir alana bir IMG tagını ortalayarak yerleştirmek

17,344 Okunma Henüz yorum yapılmamış 10/07/2011 04:23:28

JQuery Seçicilerini Kullanmak (JQuery Selectors)

Bir HTML nesnesini, bir CSS clasını, bir ID ye sahip elemanı veya bir name'e sahip form nesnesini seçip nasıl JQuery efekti verebiliriz?

16,837 Okunma Henüz yorum yapılmamış 15/01/2014 19:09:39

JQuery ile Yapılmış Basit Image Zoom Örneği

Resmin üzerine gelince yan pencerede resmin zoom yapılması işlemi. w3school uygulamasının geliştirilmiş halidir.

1,204 Okunma Henüz yorum yapılmamış 16/06/2020 04:53:40 16/06/2020 04:54:06

Yükleniyor...