Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика

Онлайн всего: 3
Гостей: 3
Пользователей: 0

Свежий софт


Wrecker Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Wrecker Virtual DJ
Virtual DJ
Wrecker SoundForge 11
SoundForge 11
Wrecker Alcohol 120
Alcohol 120
Wrecker Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Рекомендуем



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

18:24
СЛАЙДЕР 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);

    });

});

 

 

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

 

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

 

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

Категория: CSS//HTML//JS | Просмотров: 1154 | Добавил: Wrecker | Теги: С JQUERY И CSS3, BOX МЕНЮ, Слайдер | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация

    • Читаемое

    Категории

    Заходи не жди

    Web Template created with Artisteer.