Создание необычного выезжающего меню с использованием jQuery

25 марта 2014 | Опубликовано в css | 4 Комментариев »

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

Демонстрация работы – Скачать исходный код

Набор уменьшенных изображений Luna Grey можно скачать с сайта DryIcons.

Мы не можем предоставить их вместе с исходным кодом, но мы не меняли их названия, так что вы легко сможете их использовать.

Давайте начнем с разметки.

Разметка

Меню будет находиться в контейнере. Оно будет состоять из ненумерованного списка с элементами ссылок внутри. Элементы ссылок будут содержать два тега span: один для названия и второй для описания. У нас также будет элемент для уменьшенного изображения:

<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>

Не забудьте приспособить элемент ссылки, добавить адрес ссылки в параметр href по необходимости.

CSS

Давайте начнем со стилей окружающего блока. У него будет относительное позиционирование, так как у меню будет абсолютное позиционирование. Нам придется спрятать часть, содержащую описание, у элементов меню, для этого мы спрячем все переполнение блока. Если Вы поместите это меню с абсолютным позиционированием на страницу, например, снизу, часть с описанием просто исчезнет за краем окна. Этот блок позволит Вам увидеть, как реализовать это меню, относительно спозиционированное к некоторым другим элементам:

.container{
    width:900px;
    height:130px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    border:3px solid #fff;
    background-color:#fff;
    -moz-box-shadow:1px 1px 6px #000;
    -webkit-box-shadow:1px 1px 6px #000;
    -moz-border-radius:0px 0px 20px 20px;
    -webkit-border-bottom-left-radius:20px;
    -webkit-border-bottom-right-radius:20px;
    border-radius:0px 0px 20px 20px;
}

Мы создадим милые тени и закругленные границы с помощью свойств CSS3. Не забывайте, что они будут работать только в современных браузерах, в основном во всех, кроме браузера Internet Explorer. У списка будет такой стиль:

ul#menu{
    list-style:none;
    position:absolute;
    bottom:0px;
    left:20px;
    font-size:36px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    color:#999;
    letter-spacing:-2px;
}
ul#menu li{
    float:left;
    margin:0px 10px 0px 0px;
}
ul#menu a{
    cursor:pointer;
    position:relative;
    float:left;
    bottom:-95px;
    line-height:20px;
    width:210px;
}

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

Теперь давайте рассмотрим классы уменьшенных изображений:

.icon_about,
.icon_work,
.icon_help,
.icon_search{
    width:64px;
    height:64px;
    display:block;
    left:140px;
    top:50px;
    position:absolute;
}
.icon_about{
    background:transparent url(../images/id_card.png) no-repeat top left;
}
.icon_work{
    background:transparent url(../images/globe.png) no-repeat top left;
}
.icon_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
.icon_search{
    background:transparent url(../images/find.png) no-repeat top left;
}

У тегов span названия и описания будут такие стили:

ul#menu span.title{
    display:block;
    height:26px;
    text-shadow:1px 1px 1px #000;
    color:#B7B7B6;
    text-indent:10px;
}
ul#menu span.description{
    width:140px;
    height:80px;
    background-color:#B7B7B6;
    border:3px solid #fff;
    color:#fff;
    display:block;
    font-size:24px;
    padding:10px;
    -moz-box-shadow:1px 1px 6px #000;
    -webkit-box-shadow:1px 1px 6px #000;
    box-shadow:1px 1px 6px #000;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

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

ul#menu a:hover span.description{
    background-color:#54504F;
}
ul#menu a:hover span.title{
    color:#54504F;
}

И это все для стилей. Теперь давайте добавим милых эффектов для взаимодействий с помощью jQuery.

Javascript

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);
        }
    );
});

Чтобы выдвинуть элемент ссылки, мы изменим значение нижнего расположения по вертикали и анимируем это. Мы изменим значение верхнего расположения по вертикали для уменьшенного изображения и дадим эффекту побольше времени, так как мы хотим создать небольшую задержку.

И это все! Наслаждайтесь!

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou

Смотрите также:

Опубликовано в css, марта 25, 2014
Метки: css, верстка, меню css, урок css, урок верстка, эффекты css

�

Марат Исхаков
28 марта 2014 в 14:56
+1
Дмитрий
9 января 2015 в 10:18
0

В стили стоит добавить *{margin:0; padding:0;} иначе не входит в ширину контейнера четвертый элемент и получается не то что в демонстрации.
Виктор
3 мая 2016 в 17:52
0

Немного старовато