Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Меню в виде слайдов

Меню в виде слайдов
,
В этом уроке мы создадим уникальный нижний слайд из меню. Это большое меню будет содержать некоторые заголовки и описания категорий меню. При наведении выезжает слайд с снизу, раскрывая текст описания и некоторые значок. Мы будем использовать некоторые свойства CSS3 чтобы добиться эффекта приятной тени и jQuery для взаимодействия.

Демо: смотреть
Скачать: freshbottomslideoutmenu.zip [46,81 Kb] (cкачиваний: 135)


Создаем каркас меню
        <div class="container">
            <ul id="menu">
                <li>
                    <a>
                        <i class="icon_about"></i>
                        <span class="title">About</span>
                        <span class="description">Learn about us and our services</span>
                    </a>
                </li>
                <li>
                    <a>
                        <i class="icon_work"></i>
                        <span class="title">Work</span>
                        <span class="description">See our work and portfolio</span>
                    </a>
                </li>
                <li>
                    <a>
                        <i class="icon_help"></i>
                        <span class="title">Help</span>
                        <span class="description">Talk to our support</span>
                    </a>
                </li>
                <li>
                    <a>
                        <i class="icon_search"></i>
                        <span class="title">Search</span>
                        <span class="description">Search our website</span>
                    </a>
                </li>
            </ul>
        </div>


Подключаем файл стилей
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>


Подключаем скрипты
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
        $(function() {
            $('#menu > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).stop(true,true).animate({
                            'bottom':'-15px'
                        }, 300);
                    $('i',$this).stop(true,true).animate({
                            'top':'-10px'
                        }, 400);
                },
                function () {
                    var $this = $(this);
                    $('a',$this).stop(true,true).animate({
                            'bottom':'-95px'
                        }, 300);
                    $('i',$this).stop(true,true).animate({
                            'top':'50px'
                        }, 400);
                }
            );
        });
        </script>
Опубликовал dimas_ua, 19-10-2010, 00:00 Комментариев: 0
 (голосов: 1)