Как сделать анимированное плавающее меню
HTML&CSS

Как сделать анимированное плавающее меню

Оригинал: How to create a resizing menu bar, Antonio Pratas

В последнее время некоторые сайты, такие как This is Brigade или All You , начали использовать динамическое анимированное меню, которое меняет размер при прокрутке страницы вниз. Уменьшение размера панели навигации оставляет больше места для контента. В этом уроке я покажу, как сделать такое плавающее меню, используя HTML5, CSS3 и немного jQuery.

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

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

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


<!DOCTYPE HTML><html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>How to create a dynamic top bar | Webdesigner Depot</title>
    </head>
    <body></body>
</html>

Теперь добавим код для меню, а также некоторые другие детали в head нашего HTML-файла.

Создание базовой HTML-структуры

Мы начнем с написания основного HTML-кода, который нам понадобится. Отправной точкой будет очень простая структура HTML5.


<!DOCTYPE HTML> <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="author" content="Antonio Pratas">
    <title>How to create a resizing menu bar | Webdesigner Depot</title>
    <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head><body>
    <header class=“large”>
    <nav><img class=“logo” src="wdd.png"/>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Posts</a></li>
      <li><a href="#">Awesome Freebies</a></li>
    </ul> </nav>
    </header>
    <section>
      <p>Let's get that menu small!</p>
      <p>End of the line.</p>
    </section>
  </body>
</html>

В <head> мы добавили мета-тег author, чтобы указать создателя файла; далее мы подключили знаменитый reset.css Эрика Мейера для того, чтобы сбросить дефолтные стили элементов в HTML-файле, получив для работы более чистый и простой документ. И, так как мы будем использовать JQuery позже, в последней строке элемента head мы подключаем его через JQuery CDN.

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

В <body> мы использовали стандартный элемент HTML5 <header>. Наш <header> будет растягиваться на всю ширину и подстраиваться под большую и маленькую версию меню. Элементу header мы добавили класс «large», с помощью которого сможем изменять некоторые свойства CSS при переключении меню на уменьшенную версию. Элемент <nav> содержит логотип сайта и простой список из элементов меню.

Так как на самом деле у нас нет никакого содержимого, <section class="strech"> будет использоваться, чтобы мы могли прокрутить страницу и увидеть изменения меню.

Это все, что касается HTML. Теперь нам нужно стилизовать элементы с помощью CSS и сделать динамическое меню.

Стилизация меню и страницы

Чтобы держать весь код на одной странице, я добавлю CSS непосредственно в <head>. Весь CSS будет находиться перед закрывающимся элементом </head>.


<style type="text/css">
/* Importing Amaranth Font for menu text */
@import url(http://fonts.googleapis.com/css?family=Amaranth);
/* Basic layout */
body{ background-color: #ebebeb; }
ul{ float: right; }
li{ display: inline; float: left;} img.logo{float: left;}
/* Size and center the menu */ nav{ width: 960px; margin: 0 auto;}

Эта часть CSS задает ширину меню равную 960px и центрирует его, логотип будет выровнен по левому краю, а меню — по правому. Мы также подключили шрифт Amaranth из Google Web Fonts, чтобы использовать его для текста на странице.


section.stretch{ float: left; height: 1500px; width: 100%; }
section.stretch p{ font-family: 'Amaranth', sans-serif; font-size: 30px; color: #969696; text-align: center; position: relative; margin-top: 250px; }
section.stretch p.bottom{ top: 100%; }

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


header{ background: #C7C7C7; border-bottom: 1px solid #aaaaaa; float: left; width: 100%; position: fixed; z-index: 10; }
header a{ color: #969696; text-decoration: none; font-family: 'Amaranth', sans-serif; text-transform: uppercase; font-size: 1em; }
header a.active, header a:hover{ color: #3d3d3d; }
header li{ margin-right: 30px; }

/* Sizes for the bigger menu */
header.large{ height: 120px; }
header.large img{ width: 489px; height: 113px; }
header.large li{ margin-top: 45px; }

</style>
</head>

Здесь мы заканчиваем стилизовать header. Элемент <header> будет служить контейнером для меню. Он будет содержать элемент <nav> и для него мы определим цвет фона, высоту меню, стили ссылок и так далее. Он будет иметь ширину контейнера 100% и будет фиксированным. Важно установить z-index, чтобы убедиться, что этот элемент будет перекрывать остальными частями страницы, а также position: fixed, чтобы сделать элемент закрепленным на верхней части страницы при прокрутке страницы. Как вы можете видеть, кроме установки стилей для элемента <header>, мы также установили некоторые конкретные стили для класса «large», используя header.large. Начальное состояние нашего меню будет большим, и здесь мы определяем стили, необходимые, чтобы он выглядела, как мы хотим, как только пользователь заходит на страницу.

Динамическое изменение размеров меню

Когда наше меню сделано и стилизовано, мы должны его минимизировать. Чтобы создать второе состояние меню, добавим в CSS новый класс для элемента <header> и назовем его «small». Он будет отвечать за изменение необходимых свойств. Так как большая версия меню уже сделана, теперь нам нужно только уменьшить меню, пропорционально уменьшить размер изображения, а также свойство margin-top элементов меню, чтобы они по прежнему остались выровненными вертикально по центру:


/* Sizes for the smaller menu */
header.small{ height: 50px; }
header.small img{ width: 287px; height: 69px; margin-top: -10px; }
header.small li{ margin-top: 17px; }

Итак, как вы видите, эти стили практически идентичны тем, которые мы задали для большей версии меню, мы просто изменили класс «large» на «small» и изменили некоторые значения на меньшие. Мы используем отрицательный margin-top для изображения, чтобы центрировать его вертикально в контейнере. Теперь у нас есть все необходимые стили, чтобы релизовать смену размера меню, и если вы попытаетесь изменить в HTML <header class="large"> на <header class="small">, вы увидите в браузере, что меню стало меньше. Но мы должны делать это динамически.

Изменение класса меню с помощью jQuery

Теперь, когда у нас есть все стили, нам нужно только добавить немного JavaScript, чтобы переключить классы «large» и «small». И поскольку мы хотим делать это при прокрутке страницы, мы будем использовать функцию jQuery .scrollTop(). Эта функция позволяет получить или установить значение скролла в пикселях. Положение скролла — это количество пикселей, которое уже находится за пределами области просмотра.

В данном случае нам необходимо определить, какое количество пикселей пользователь уже прокрутил и переключить нужный класс:


<script type="text/javascript">
$(document).on("scroll",function(){
    if($(document).scrollTop()>100){
        $("header").removeClass("large").addClass("small");
    } else{
        $("header").removeClass("small").addClass("large");
    }
});
</script>

Когда пользователь прокрутит страницу больше, чем на 100px, класс «large» будет удален и добавлено класс «small». Таким образом, меню будет изменяться до размеров, предварительно определенных в CSS. Попробуйте, сейчас код уже должен работать, но переход от одного состояния меню к другому будет резким.

CSS transitions для анимации меню

Чтобы сделать переход между состояниями меню более плавным, мы будем использовать CSS transitions. Просто добавьте этот кусок кода в свой CSS.


header,nav, a, img, li{
  transition: all 1s;
  -moz-transition: all 1s; /* Firefox 4 */
  -webkit-transition: all 1s; /* Safari and Chrome */
  -o-transition: all 1s; /* Opera */
}

Здесь мы определили transitions для всех свойств элементов <header>, <img> и <li>. Этот код анимирует изменения между классами «large» и «small» в течении 1 секунды. Проверьте, теперь результат намного мягче.

Теперь ваша очередь

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

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться