Выпадающее меню с плавным эффектом появления подпунктов и фоновым изображением для них. Поддерживается Firefox, Safari, Chrome.

Разметка HTML

           <div class="total_images" id="navigation">
            
                <div class="eachs" id="link1">
                   
                    <a href="#" class="menu" style=" width:94px;">Скрипты</a>
                    <img src="bg.png" alt="" width="140" height="140" class="images"/>
                   
                    <div>
                        <ul>
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">JQuery</a></li>
                            <li><a href="#">AJAX</a></li>
                            <li><a href="#">Mootools</a></li>                       
                            <li><a href="#">javascript</a></li>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">MYSQL</a></li>
                            <li><a href="#">JSON</a></li>
                        </ul>
                    </div> 
                </div>
               
                <div class="eachs" id="link4">
               
                    <a href="#" class="menu" style=" width:150px;">Ещё скрипты</a>
                    <img src="bg.png" alt="" width="140" height="140" class="images"/>
                  
                    <div>
                        <ul>
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">JQuery</a></li>
                            <li><a href="#">AJAX</a></li>
                            <li><a href="#">Mootools</a></li>                       
                            <li><a href="#">javascript</a></li>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">MYSQL</a></li>
                            <li><a href="#">JSON</a></li>
                        </ul>
                    </div>
                </div>
                    
                <div class="eachs" id="link2">
                   
                    <a href="#" class="menu" style=" width:114px;">Скриптики</a>
                    <img src="bg.png" alt="" width="160" height="199" class="images"/>
                   
                    <div>
                        <ul>
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">JQuery</a></li>
                            <li><a href="#">AJAX</a></li>
                            <li><a href="#">Mootools</a></li>                       
                            <li><a href="#">javascript</a></li>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">MYSQL</a></li>
                            <li><a href="#">JSON</a></li>
                        </ul>
                    </div> 
                </div>
               
                <div class="eachs" id="link3">
                   
                    <a href="#" class="menu" style=" width:100px;">Скрипты</a>
                    <img src="bg.png" alt="" width="160" height="199" class="images"/>
                  
                    <div>
                        <ul>
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">JQuery</a></li>
                            <li><a href="#">AJAX</a></li>
                            <li><a href="#">Mootools</a></li>                       
                            <li><a href="#">javascript</a></li>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">MYSQL</a></li>
                            <li><a href="#">JSON</a></li>
                        </ul>
                    </div>
                </div>
              
                <div class="eachs" id="link5">
                   
                    <a href="#" class="menu" style=" width:120px;">PCVECTOR</a>
                    <img src="bg.png" alt="" width="160" height="199" class="images"/>
                   
                    <div>
                        <ul>
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">JQuery</a></li>
                            <li><a href="#">AJAX</a></li>
                            <li><a href="#">Mootools</a></li>
                            <li><a href="#">javascript</a></li>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">MYSQL</a></li>
                            <li><a href="#">JSON</a></li>
                        </ul>
                    </div>
                </div>
               
                <br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />
               
            </div>

CSS

Все стили содержаться в файле:

<link rel="stylesheet" href="style.css" type="text/css" media="screen"/> 

javascript

В шапке подключаем библиотеку jQuery, плагин easing:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

Подключаем скрипт:

            $(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');
              }
            );
            });

СКАЧАТЬСкачек: 788
11,23 Kb
Кто скачал?

ДЕМОПосмотреть
пример