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

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создаем меню с нестандартными шрифтами на CSS3 и jQuery

26 февраля 2014 | Опубликовано в css | 1 Комментарий »

В этом уроке мы создадим полностраничное меню с нестандартными шрифтами, у которого есть некоторые особенности. Когда пользователь наводит указатель мыши на пункты меню, мы передвигаем полоску, выделяющую активный пункт, чтобы подсветить его и вывести дополнительную информацию. Смотрите демонстрацию и повторяйте урок!

 

 


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

Мы будем использовать jQuery для эффектов и свойства CSS3 для стилей. Мы не будем использовать изображения.

Итак, давайте начнем!

Разметка

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

<div id="slidingMenuDesc">
    <div><span>Description for "About"</span></div>
    ...
</div>
<ul id="slidingMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Get a quote</a></li>
</ul>

Мы оставим пустым описание для пункта меню «Home», так как здесь нечего описывать. Выезжающие блоки должны появляться, когда мы наводим указатель мыши на пункты меню.

CSS

Сначала мы зададим стили для меню и его пунктов, а потом мы зададим стили для элементов описания.

Давайте сбросим некоторые изначально заданные стили:

body, ul, li, h1, h2, span{
    margin:0;
    padding:0;
}
ul{
    list-style:none;
}
Фон будет темно-серым:
body{
    background:#292929;
}

Список для элементов меню будет абсолютно спозиционирован у правого края экрана:

.slidingMenu {
    position: absolute;
    height:410px;
    width: 410px;
    top:40px;
    overflow:hidden;
    right:1px;
    font-family: Arial, Helvetica, sans-serif;
}

Пункты меню будут всплывать вправо:

.slidingMenu li {
    display:block;
    float:right;
    clear:both;
    position:relative;
    overflow:hidden;
}

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

.slidingMenu li.move {
    width: 9px;
    height: 68px;
    right:0px;
    padding-right:10px;
    margin-top:2px;
    z-index: 8;
    position: absolute;
    background: #2183c4;
    background:
        -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#0771b8),
            to(#2183c4)
        );
    background:
        -moz-linear-gradient(
            top,
            #0771b8,
            #2183c4
        );
    -moz-border-radius: 8px 0px 0px 8px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    -moz-box-shadow:1px 1px 5px #000;
    -webkit-box-shadow:1px 1px 5px #000;
    box-shadow:1px 1px 5px #000;
    }

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

Стиль для ссылочных элементов будет таким:

 

.slidingMenu li a {
    font-size:66px;
    text-transform:uppercase;
    text-decoration: none;
    color: #ddd;
    outline: none;
    text-indent:5px;
    z-index: 10;
    display: block;
    float: right;
    height: 66px;
    line-height: 66px;
    position: relative;
    overflow: hidden;
    padding-right:10px;
}

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

/* Описания */
.slidingMenuDesc{
    margin-top:40px;
    position:relative;
}

У блока с элементом span описания будут такие же градиент фона и тень блока, как и у движущегося элемента. Скругленные углы будут на противоположных сторонах:

.slidingMenuDesc div{
    background: #2183c4;
    background:
        -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(#0771b8),
            to(#2183c4)
        );
    background:
        -moz-linear-gradient(
            top,
            #0771b8,
            #2183c4
        );
    height: 68px;
    padding-right:5px;
    left:-5px;
    width:0px;
    margin-top:2px;
    overflow:hidden;
    position:absolute;
    -moz-box-shadow:1px 1px 5px #000;
    -webkit-box-shadow:1px 1px 5px #000;
    box-shadow:1px 1px 5px #000;
    -moz-border-radius: 0px 8px 8px 0px;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

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

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

.slidingMenuDesc div span {
    font-size:36px;
    color: #f0f0f0;
    text-indent:5px;
    z-index: 10;
    display: block;
    height: 66px;
    line-height: 66px;
    position:absolute;
    right:10px;
    margin-left:5px;
    top:-3px;
}

А теперь давайте рассмотрим JavaScript.

JavaScript

Сначала мы добавим следующие скрипты в раздел head нашего документа html:

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

И мы добавим следующий скрипт:

$(function() {
    Cufon.replace('a, span').CSS.ready(function() {
        var $menu       = $("#slidingMenu");
        /*   первый элемент меню, который выбран по умолчанию   */
        var $selected   = $menu.find('li:first');
        /*   это элемент с абсолютным позиционированием,   который будет передвигаться по элементам меню,   у него такая же ширина, как и у выбранного элемента,   и значение положения по вертикали равно расстоянию от элемента до верха   */
        var $moving     = $('<li />',{
            className   : 'move',
            top         : $selected[0].offsetTop + 'px',
            width       : $selected[0].offsetWidth + 'px'
        });
        /*   У каждого скользящего блока (описания) будет такое же значение положения по вертикали,   как и у соответствующего пункта меню   */
        $('#slidingMenuDesc > div').each(function(i){
            var $this = $(this);
            $this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
        });
        /*   добавить в меню блок с абсолютным позиционированием,   когда мы отводим указатель мыши от меню,   этот блок с абсолютным позиционированием передвигается к верху, где он был изначально,   когда мы наводим указатель мыши на пункты меню, мы передвигаем этот блок на нужное положение   */
        $menu.bind('mouseleave',function(){
                moveTo($selected,400);
              })
             .append($moving)
             .find('li')
             .not('.move')
             .bind('mouseenter',function(){
                var $this = $(this);
                var offsetLeft = $this.offset().left - 20;
                //описание выезжает
                $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
                /*   передвинуть блок с абсолютным положением к этому элементу   */
                moveTo($this,400);
              })
              .bind('mouseleave',function(){
                var $this = $(this);
                var offsetLeft = $this.offset().left - 20;
                //описание прячется
                $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
              });;
        /*   передвигаем блок с абсолютным позиционированием   на определенной скорости   к положению $elem   */
        function moveTo($elem,speed){
            $moving.stop(true).animate({
                top     : $elem[0].offsetTop + 'px',
                width   : $elem[0].offsetWidth + 'px'
            }, speed, 'easeOutExpo');
        }
    }) ;
});

После того, как мы преобразуем шрифт для всех ссылочных элементов и элементов span в изображение с текстом с нестандартным шрифтом, выполнится главная функция. Мы выберем первый пункт меню «Home» по умолчанию. Когда мы наводим указатель мыши на пункт меню, мы передвигаем элемент li.move в нужное место и заставляем выехать соответствующий элемент описания.

И это все! Надеемся, Вам понравился этот урок, и он вам пригодится!

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

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

Перевод — Дежурка

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




Комментарии