【www.gdgbn.com--jquery】

 代码如下




jquery 滑动选项卡菜单效果

<script type="text/网页特效" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() { 


  //get all the li from the #tabmenu ul
  $("#tabmenu > li").click(function(){
       
    //remove the selected class from all li   
    $("#tabmenu > li").removeclass("selected");
   
    //reassign the li
    $(this).addclass("selected");
   
    //hide all the div in .boxbody
    $(".boxbody div").slideup("1500");
   
    //look for the right div in boxbody according to the navigation ul index, therefore, the arrangement is very important.
    $(".boxbody div:eq(" + $("#tabmenu > li").index(this) + ")").slidedown("1500");
   
  }).mouseo教程ver(function() {

    //add and remove class, personally i dont think this is the right way to do it, anyone please suggest   
    $(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});
  }); 
  //download by http://www.111cn.net
  //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>



jquery tabbed side menu from queness webblog



     

  •  

  •  

  •  

  •  



  •  
     
       
          create a simple css + javascript tooltip with jquery.
          simple jquery modal window tutorial.
          navigation list menu + jquery animate effect tutorial.
          exclusive rss icons from queness.
          50 monochromatic website designs.
          food plates and creative dishware designs.
          breadcrumbs in web design: examples and best practices.
         

  • new smashing freebies for designers and bloggers.
         
       
     
     
       
          jquery tabbed navigation menu. - kevin
          you can add links in here! - kevin
          it"s easy to understand. though it"s not the best, but hell yeah it works. - kevin
          i hope you will like it. - kevin
          my next tutorial will be jquery-based accordion. - kevin
         
  • and, i"m working on a free wordpress template as well : ) - kevin
       
     
     
     
       
          ajax
          css-html
          freebies
          icon
          inspiration
          javascript
          logo
          photography
          photoshop
          php
          seo
          tutorial
          usability
          wallpaper
         
  • wordpress
         
     
     
     
       
          simple jquery modal window tutorial.
          create a simple css + javascript tooltip with jquery.
          navigation list menu + jquery animate effect tutorial.
         
  • exclusive rss icons from queness.
         
     
     
     
       
          50 monochromatic website designs.
          breadcrumbs in web design: examples and best practices.
          simple jquery modal window tutorial.
          navigation list menu + jquery animate effect tutorial.
          create a simple css + javascript tooltip with jquery.
          exclusive rss icons from queness.
          new smashing freebies for designers and bloggers.
         
  • food plates and creative dishware designs.
           
             


    except where otherwise noted, content on this site is licensed under a creative commons attribution 3.0 license.


     

     

    本文来源:http://www.gdgbn.com/wangyezhizuo/27664/