Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

Главная » 2013 » Август » 30 » СЛАЙДЕР BOX МЕНЮ С JQUERY И CSS3
18:20
СЛАЙДЕР BOX МЕНЮ С JQUERY И CSS3

СЛАЙДЕР BOX МЕНЮ С JQUERY И CSS3


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

 

ПОСМОТРЕТЬ ДЕМО                     СКАЧАТЬ ИСТОЧНИКА

 

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

 

РАЗМЕТКА

Для HTML структуры мы будем использовать неупорядоченный список, где каждый пункт меню будет содержать пункт главного звена и DIV элемент для подменю:

 

 

<ul id="sdt_menu" class="sdt_menu">

    <li>

        <a href="#">

            <img src="images/1.jpg" alt=""/>

            <span class="sdt_active"></span>

            <span class="sdt_wrap">

                <span class="sdt_link">Portfolio</span>

                <span class="sdt_descr">My work</span>

            </span>

        </a>

        <div class="sdt_box">

            <a href="#">Websites</a>

            <a href="#">Illustrations</a>

            <a href="#">Photography</a>

        </div>

    </li>

    ...

</ul>

 

 

Если нет подменю, DIV может быть просто опущен. Изображение не будет показано в начале, так как мы установим его ширину и высоту до 0 в CSS. 
Давайте посмотрим на стиль.

CSS

Мы начнем с укладки в случае маркированного списка:

 

 

ul.sdt_menu{

    margin:0;

    padding:0;

    list-style: none;

    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;

    font-size:14px;

    width:1020px;

}

 

 

 

 

 

ul.sdt_menu a{

    text-decoration:none;

    outline:none;

}

 

 

Наши элементы списка будут плавать оставим их положение относительно, так как мы хотим использовать абсолютное позиционирование для элементов внутри. Если мы не настроим это, абсолютное позиционируемые элементы были бы относительно всей страницы:

 

 

ul.sdt_menu li{

    float:left;

    width:170px;

    height:85px;

    position:relative;

    cursor:pointer;

}

 

 

Стиль для основного элемента ссылки, где у нас есть два пролета для названия и описания будут оформлены следующим образом:

 

 

ul.sdt_menu li > a{

    position:absolute;

    top:0px;

    left:0px;

    width:170px;

    height:85px;

    z-index:12;

    background:transparent url(../images/overlay.png) no-repeat bottom right;

    -moz-box-shadow:0px 0px 2px #000;

    -webkit-box-shadow:0px 0px 2px #000;

    box-shadow:0px 0px 2px #000;

}

 

 

Обратите внимание на Z-Index: Мы будет определять порядок наложения для всех важных элементов, так что нужные останутся наверху.

Мы используем фоновое изображение, которое создаст эффект стекла, как с полу-прозрачным градиентом. При использовании некоторых фоновых рисунков (например, древесина в демо) он создает красивый эффект. 

Вы также можете экспериментировать с тенями - изменение значения 2px 2px 6px # 000 вставкой даст вам очень хороший эффект.

Изображение будет оформлено следующим образом:

 

 

ul.sdt_menu li a img{

    border:none;

    position:absolute;

    width:0px;

    height:0px;

    bottom:0px;

    left:85px;

    z-index:100;

    -moz-box-shadow:0px 0px 4px #000;

    -webkit-box-shadow:0px 0px 4px #000;

    box-shadow:0px 0px 4px #000;

}

 

 

Мы также добавим некоторые аккуратные тени. Первые два значения равны нулю, что делает тени равномерными по всему изображению. Мы использовали это, в ссылке элемента. Эти же тени можно использовать если вы хотите создать световой эффект границы. Преимущество в том, что тени на самом деле нет - вам не нужно, определять его в ширину или высоту в элементах. Оболочка для названия и описания пролетов будет иметь этот стиль:

 

 

ul.sdt_menu li span.sdt_wrap{

    position:absolute;

    top:25px;

    left:0px;

    width:170px;

    height:60px;

    z-index:15;

}

 

 

Если у вас есть большие тексты, вам необходимо адаптировать их. Убедитесь, что адаптированные значения сочетаются с анимацией значения в JavaScript.

Далее, мы определяем стиль для элемента, который скользит вниз. Мы даем ему высоту 0 и поместим  его таким образом, что нам просто необходимо будет увеличить ее высоту в анимации:

 

 

ul.sdt_menu li span.sdt_active{

    position:absolute;

    background:#111;

    top:85px;

    width:170px;

    height:0px;

    left:0px;

    z-index:14;

    -moz-box-shadow:0px 0px 4px #000 inset;

    -webkit-box-shadow:0px 0px 4px #000 inset;

    box-shadow:0px 0px 4px #000 inset;

}

 

 

Общие стили для пролетов и ссылок в выдвигающихся окнах будет следующим:

 

 

ul.sdt_menu li span span.sdt_link,

ul.sdt_menu li span span.sdt_descr,

ul.sdt_menu li div.sdt_box a{

    margin-left:15px;

    text-transform:uppercase;

    text-shadow:1px 1px 1px #000;

}

 

 

Название и описание будет оформлено следующим образом:

 

 

ul.sdt_menu li span span.sdt_link{

    color:#fff;

    font-size:24px;

    float:left;

    clear:both;

}

ul.sdt_menu li span span.sdt_descr{

    color:#0B75AF;

    float:left;

    clear:both;

    width:155px;

    font-size:10px;

    letter-spacing:1px;

}

 

 

Подменю первоначально будет скрыто под основным меню. Затем мы анимируем его вправо или влево, в зависимости от того, где мы находимся. Если вы, например, наведите курсор на последний элемент, поле подменю будет слева, во всех других случаях с правой стороны.

 

 

ul.sdt_menu li div.sdt_box{

    display:block;

    position:absolute;

    width:170px;

    overflow:hidden;

    height:170px;

    top:85px;

    left:0px;

    display:none;

    background:#000;

}

ul.sdt_menu li div.sdt_box a{

    float:left;

    clear:both;

    line-height:30px;

    color:#0B75AF;

}

 

 

Первое звено в подменю должно иметь верхнее поле:

 

 

ul.sdt_menu li div.sdt_box a:first-child{

    margin-top:15px;

}

ul.sdt_menu li div.sdt_box a:hover{

    color:#fff;

}

 

 

И это все, стили! Давайте добавим анимацию!

 

JAVASCRIPT

Когда мы наводим курсор мыши на элемент списка, мы увеличиваем изображение, и показываем как, sdt_active пролета и sdt_wrap службы. Если элемент имеет подменю (sdt_box), то сдвигаем его в сторону. 

 

$(function() {

    $('#sdt_menu > li').bind('mouseenter',function(){

        var $elem = $(this);

        $elem.find('img')

             .stop(true)

             .animate({

                'width':'170px',

                'height':'170px',

                'left':'0px'

             },400,'easeOutBack')

             .andSelf()

             .find('.sdt_wrap')

             .stop(true)

             .animate({'top':'140px'},500,'easeOutBack')

             .andSelf()

             .find('.sdt_active')

             .stop(true)

             .animate({'height':'170px'},300,function(){

            var $sub_menu = $elem.find('.sdt_box');

            if($sub_menu.length){

                var left = '170px';

                if($elem.parent().children().length == $elem.index()+1)

                    left = '-170px';

                $sub_menu.show().animate({'left':left},200);

            }  

        });

    }).bind('mouseleave',function(){

        var $elem = $(this);

        var $sub_menu = $elem.find('.sdt_box');

        if($sub_menu.length)

            $sub_menu.hide().css('left','0px');

        

        $elem.find('.sdt_active')

             .stop(true)

             .animate({'height':'0px'},300)

             .andSelf().find('img')

             .stop(true)

             .animate({

                'width':'0px',

                'height':'0px',

                'left':'85px'},400)

             .andSelf()

             .find('.sdt_wrap')

             .stop(true)

             .animate({'top':'25px'},500);

    });

});

 

 

Мы надеемся, что вам понравилось это небольшое меню, и вы нашли то что искали!

 

ПОСМОТРЕТЬ ДЕМО                       СКАЧАТЬ ИСТОЧНИКА

 

Ссылка на источник

Категория: HTML/CSS | Просмотров: 658 | Добавил: Iron | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск

Статьи
[Прогараммирование]
Как работает CSS?
[Прогараммирование]
ЛЕКЦИЯ. Язык Pascal
[Прогараммирование]
Введение в информатику
[Прогараммирование]
Строковый тип данных
[Прогараммирование]
Динамическая память
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Безопасность систем]
Резервирование и восстановление
[Прогараммирование]
ПОДПРОГРАММЫ. ПРОЦЕДУРЫ И ФУНКЦИИ
[Менеджмент]
Факторы микросреды организации
[Прогараммирование]
Как работает CSS?(часть 2 Шрифты, Текст и Ссылки)

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2024Конструктор сайтов - uCoz