html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

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

 

 


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

Мы будем использовать 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 

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

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

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

20
    +2 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • css
          • html
          • javascript
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции