css和jquery导航菜单下拉菜单

icecoffeemzp

2014-09-19

css和jquery导航菜单下拉菜单

XML/HTML Code
<div id="content">   
   
            <div class="total_images" id="navigation">  
               
                <div class="eachs" id="link1">   
                      
                    <a href="http://www.freejs.net" class="menu" style=" width:90px;">freejs.net</a>  
                      
                    <img src="bg.png" alt="" width="140" height="140" class="images"/>   
                      
                    <div>   
                        <ul>  
                            <li><a href="#">PHP</a></li>  
                            <li><a href="codeigniter/">CodeIgniter</a></li>  
                            <li><a href="/jquery/">JQuery</a></li>  
                            <li><a href="/ajax/">AJAX</a></li>  
                            <li><a href="facebook/">Facebook</a></li>  
                              
                            <li><a href="">YOUTUBE</a></li>  
                            <li><a href="/">CSS</a></li>  
                            <li><a href="/">MYSQL</a></li>  
                            <li><a href="/">Tutorials</a></li>  
                        </ul>  
                    </div>    
                </div>   
                  
                <div class="eachs" id="link4">   
                  
                    <a href="#" class="menu" style=" width:90px;">导航菜单</a>  
                      
                    <img src="bg.png" alt="" width="140" height="140" class="images"/>   
                     
                    <div>  
                        <ul>  
                            <li><a href="#">PHP</a></li>  
                            <li><a href="codeigniter/">CodeIgniter</a></li>  
                            <li><a href="/jquery/">JQuery</a></li>  
                            <li><a href="/ajax/">AJAX</a></li>  
                            <li><a href="facebook/">Facebook</a></li>  
                              
                            <li><a href="">YOUTUBE</a></li>  
                            <li><a href="/">CSS</a></li>  
                            <li><a href="/">MYSQL</a></li>  
                            <li><a href="/">Tutorials</a></li>  
                        </ul>  
                    </div>   
                </div>   
                  
                  
                <div class="eachs" id="link2">   
                      
                    <a href="#" class="menu" style=" width:100px;">TAB标签</a>  
                      
                    <img src="bg.png" alt="" width="160" height="199" class="images"/>   
                      
                    <div>   
                        <ul>  
                            <li><a href="#">PHP</a></li>  
                            <li><a href="codeigniter/">CodeIgniter</a></li>  
                            <li><a href="/jquery/">JQuery</a></li>  
                            <li><a href="/ajax/">AJAX</a></li>  
                            <li><a href="facebook/">Facebook</a></li>  
                              
                            <li><a href="">YOUTUBE</a></li>  
                            <li><a href="/">CSS</a></li>  
                            <li><a href="/">MYSQL</a></li>  
                            <li><a href="/">Tutorials</a></li>  
                        </ul>  
                    </div>    
                </div>   
                  
                  
                <div class="eachs" id="link3">   
                      
                    <a href="http://www.freejs.net/fenye.html" class="menu" style=" width:72px;">分页</a>  
                      
                    <img src="bg.png" alt="" width="160" height="199" class="images"/>   
                     
                    <div>   
                        <ul>  
                            <li><a href="#">PHP</a></li>  
                            <li><a href="codeigniter/">CodeIgniter</a></li>  
                            <li><a href="/jquery/">JQuery</a></li>  
                            <li><a href="/ajax/">AJAX</a></li>  
                            <li><a href="facebook/">Facebook</a></li>  
                              
                            <li><a href="">YOUTUBE</a></li>  
                            <li><a href="/">CSS</a></li>  
                            <li><a href="/">MYSQL</a></li>  
                            <li><a href="/">Tutorials</a></li>  
                        </ul>  
                    </div>   
                </div>   
                 
                <div class="eachs" id="link5">   
                      
                    <a href="#" class="menu" style=" width:84px;">表单</a>  
                      
                    <img src="bg.png" alt="" width="160" height="199" class="images"/>   
                      
                    <div>   
                        <ul>  
                            <li><a href="#">PHP</a></li>  
                            <li><a href="codeigniter/">CodeIgniter</a></li>  
                            <li><a href="/jquery/">JQuery</a></li>  
                            <li><a href="/ajax/">AJAX</a></li>  
                            <li><a href="facebook/">Facebook</a></li>  
                              
                            <li><a href="">YOUTUBE</a></li>  
                            <li><a href="/">CSS</a></li>  
                            <li><a href="/">MYSQL</a></li>  
                            <li><a href="/">Tutorials</a></li>  
                        </ul>  
                    </div>   
                </div>   
                  
                  
                <br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />  
                  
            </div>   
        </div>   

JavaScript Code
<script type="text/javascript">   
           $(function() {  
               $('#navigation > div').hover(  
               function () {  
                   var $this = $(this);  
                //$this.find('.images').fadeIn();  
                  
                $this.find('a.menu').removeClass('menu').addClass('hovered');  
                  
                   $this.find('.images').stop().animate({  
                       'width'     :'230px',  
                       'height'    :'390px',  
                       'opacity'   :'1.0'  
                   },400,'easeOutBack',function(){  
                  
                       $(this).parent().find('div').fadeIn('fast');  
                   });  
               },  
               function () {  
                   var $this = $(this);  
                  
                   $this.find('div').fadeOut(500);  
                //$this.find('.images').hide();  
                  $this.find('a.hovered').removeClass('hovered').addClass('menu');  
                 
                $this.find('.images').stop().animate({  
                       'width'     :'100px',  
                       'height'    :'0px',  
                       'top'       :'0px',  
                       'left'      :'0px',  
                       'opacity'   :'0.9'  
                   },600,'easeOutBack');   
             }  
           );  
           });  
       </script>  