首页>>导航菜单>>css和jquery导航菜单 下拉菜单(2014-03-06)

css和jquery导航菜单 下拉菜单

css和jquery导航菜单 下拉菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="content">   
  2.    
  3.             <div class="total_images" id="navigation">  
  4.                
  5.                 <div class="eachs" id="link1">   
  6.                       
  7.                     <a href="http://www.freejs.net" class="menu" style=" width:90px;">freejs.net</a>  
  8.                       
  9.                     <img src="bg.png" alt="" width="140" height="140" class="images"/>   
  10.                       
  11.                     <div>   
  12.                         <ul>  
  13.                             <li><a href="#">PHP</a></li>  
  14.                             <li><a href="codeigniter/">CodeIgniter</a></li>  
  15.                             <li><a href="/jquery/">JQuery</a></li>  
  16.                             <li><a href="/ajax/">AJAX</a></li>  
  17.                             <li><a href="facebook/">Facebook</a></li>  
  18.                               
  19.                             <li><a href="">YOUTUBE</a></li>  
  20.                             <li><a href="/">CSS</a></li>  
  21.                             <li><a href="/">MYSQL</a></li>  
  22.                             <li><a href="/">Tutorials</a></li>  
  23.                         </ul>  
  24.                     </div>    
  25.                 </div>   
  26.                   
  27.                 <div class="eachs" id="link4">   
  28.                   
  29.                     <a href="#" class="menu" style=" width:90px;">导航菜单</a>  
  30.                       
  31.                     <img src="bg.png" alt="" width="140" height="140" class="images"/>   
  32.                      
  33.                     <div>  
  34.                         <ul>  
  35.                             <li><a href="#">PHP</a></li>  
  36.                             <li><a href="codeigniter/">CodeIgniter</a></li>  
  37.                             <li><a href="/jquery/">JQuery</a></li>  
  38.                             <li><a href="/ajax/">AJAX</a></li>  
  39.                             <li><a href="facebook/">Facebook</a></li>  
  40.                               
  41.                             <li><a href="">YOUTUBE</a></li>  
  42.                             <li><a href="/">CSS</a></li>  
  43.                             <li><a href="/">MYSQL</a></li>  
  44.                             <li><a href="/">Tutorials</a></li>  
  45.                         </ul>  
  46.                     </div>   
  47.                 </div>   
  48.                   
  49.                   
  50.                 <div class="eachs" id="link2">   
  51.                       
  52.                     <a href="#" class="menu" style=" width:100px;">TAB标签</a>  
  53.                       
  54.                     <img src="bg.png" alt="" width="160" height="199" class="images"/>   
  55.                       
  56.                     <div>   
  57.                         <ul>  
  58.                             <li><a href="#">PHP</a></li>  
  59.                             <li><a href="codeigniter/">CodeIgniter</a></li>  
  60.                             <li><a href="/jquery/">JQuery</a></li>  
  61.                             <li><a href="/ajax/">AJAX</a></li>  
  62.                             <li><a href="facebook/">Facebook</a></li>  
  63.                               
  64.                             <li><a href="">YOUTUBE</a></li>  
  65.                             <li><a href="/">CSS</a></li>  
  66.                             <li><a href="/">MYSQL</a></li>  
  67.                             <li><a href="/">Tutorials</a></li>  
  68.                         </ul>  
  69.                     </div>    
  70.                 </div>   
  71.                   
  72.                   
  73.                 <div class="eachs" id="link3">   
  74.                       
  75.                     <a href="http://www.freejs.net/fenye.html" class="menu" style=" width:72px;">分页</a>  
  76.                       
  77.                     <img src="bg.png" alt="" width="160" height="199" class="images"/>   
  78.                      
  79.                     <div>   
  80.                         <ul>  
  81.                             <li><a href="#">PHP</a></li>  
  82.                             <li><a href="codeigniter/">CodeIgniter</a></li>  
  83.                             <li><a href="/jquery/">JQuery</a></li>  
  84.                             <li><a href="/ajax/">AJAX</a></li>  
  85.                             <li><a href="facebook/">Facebook</a></li>  
  86.                               
  87.                             <li><a href="">YOUTUBE</a></li>  
  88.                             <li><a href="/">CSS</a></li>  
  89.                             <li><a href="/">MYSQL</a></li>  
  90.                             <li><a href="/">Tutorials</a></li>  
  91.                         </ul>  
  92.                     </div>   
  93.                 </div>   
  94.                  
  95.                 <div class="eachs" id="link5">   
  96.                       
  97.                     <a href="#" class="menu" style=" width:84px;">表单</a>  
  98.                       
  99.                     <img src="bg.png" alt="" width="160" height="199" class="images"/>   
  100.                       
  101.                     <div>   
  102.                         <ul>  
  103.                             <li><a href="#">PHP</a></li>  
  104.                             <li><a href="codeigniter/">CodeIgniter</a></li>  
  105.                             <li><a href="/jquery/">JQuery</a></li>  
  106.                             <li><a href="/ajax/">AJAX</a></li>  
  107.                             <li><a href="facebook/">Facebook</a></li>  
  108.                               
  109.                             <li><a href="">YOUTUBE</a></li>  
  110.                             <li><a href="/">CSS</a></li>  
  111.                             <li><a href="/">MYSQL</a></li>  
  112.                             <li><a href="/">Tutorials</a></li>  
  113.                         </ul>  
  114.                     </div>   
  115.                 </div>   
  116.                   
  117.                   
  118.                 <br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />  
  119.                   
  120.             </div>   
  121.         </div>   

 

JavaScript Code
  1. <script type="text/javascript">   
  2.            $(function() {  
  3.                $('#navigation > div').hover(  
  4.                function () {  
  5.                    var $this = $(this);  
  6.                 //$this.find('.images').fadeIn();  
  7.                   
  8.                 $this.find('a.menu').removeClass('menu').addClass('hovered');  
  9.                   
  10.                    $this.find('.images').stop().animate({  
  11.                        'width'     :'230px',  
  12.                        'height'    :'390px',  
  13.                        'opacity'   :'1.0'  
  14.                    },400,'easeOutBack',function(){  
  15.                   
  16.                        $(this).parent().find('div').fadeIn('fast');  
  17.                    });  
  18.                },  
  19.                function () {  
  20.                    var $this = $(this);  
  21.                   
  22.                    $this.find('div').fadeOut(500);  
  23.                 //$this.find('.images').hide();  
  24.                   $this.find('a.hovered').removeClass('hovered').addClass('menu');  
  25.                  
  26.                 $this.find('.images').stop().animate({  
  27.                        'width'     :'100px',  
  28.                        'height'    :'0px',  
  29.                        'top'       :'0px',  
  30.                        'left'      :'0px',  
  31.                        'opacity'   :'0.9'  
  32.                    },600,'easeOutBack');   
  33.              }  
  34.            );  
  35.            });  
  36.        </script>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_284.html