Наверняка вы видели на некоторых веб-сайтах динамичные и анимированные меню, которые изменяются при прокрутке вниз. Минимизируя главное меню навигации, вы оставляете больше места для содержания. В этом уроке мы объясним, как вы можете создать меню самостоятельно с помощью HTML5, CSS3 и немного jQuery.
Если вы хотите, чтобы особое внимание фокусировалось на содержании сайта, а также позволяло создавать более крупную и впечатляющую навигацию при первом посещении пользователем веб-сайта, то такого рода меню вам подойдет как нельзя лучше. Вы можете отлично продемонстрировать свой бренд или логотип, и после первоначального ознакомления с сайтом, уменьшить некоторые элементы, что позволит пользователю обратить главное внимание на ваше содержание.
Есть несколько способов это сделать. В этом уроке мы объясним, как создать фиксированное меню во всю ширину страницы, которое изменяется в высоте вместе с логотипом, создавая сведенную к минимуму версию исходного оригинала. При желании, вы также можете заменить логотип на другой вариант, например инициалы или иконку, но имейте в виду, что консистенция очень важна здесь, так чтобы пользователь понимал, как элемент изменился и что его главная цель по-прежнему является навигация по сайту.
Создание базовой структуры в HTML5
Мы начнем с создания основного HTML кода, который нам понадобится. Для начала, мы будем придерживаться очень простой структуры HTML5.
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Как создать анимированное меню | WebDesignMagazine </title> </head><body> </body></html>
Теперь, когда наш первоначальный HTML код написан, мы добавим код для меню, а также некоторые другие детали для хедера нашего HTML файла.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="author" content="WDM.ru"> <title>Как создать анимированное меню | WebDesignMagazine</title> <link rel="stylesheet" type="text/css" href="//meyerweb.com/eric/tools/css/reset/reset.css"> <script src="//code.jquery.com/jquery-latest.js"></script> </head><body> <header class=“large”> <nav><img class=“logo” src="wdd.png"/> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Статьи</a></li> <li><a href="#">Это очень клевый сайт!</a></li> </ul> </nav> </header> <section> <p>Крутим вниз и смотрим как изменится меню</p> <p>Все! Приехали!</p> </section> </body> </html>
В нашем <head>: мы добавили мета-тег для автора, чтобы указать создателя документа, после чего мы включили известный “сброс CSS” от Эрика Мейера, что приведет к сбросу почти каждого элемента в HTML файле, давая вам более понятный и простой документ для работы. И так как мы будем использовать JQuery позже, в последней строке нашего главного элемента мы импортируем его через JQuery CDN.
В нашем <body> теге, мы использовали по умолчанию <header> HTML5 элемента. Наш <header> будет во всю ширину страницы и будет нести ответственность за изменения между большими и малыми версии меню. Мы даем нашему <header> класс с именем “large”, так чтобы мы могли изменить некоторые специфические свойства в CSS, чтобы преврать наше меню в уменьшенную версию. <nav> это наш меню-контейнер, который содержит изображение логотипа нашего веб-сайта и простой неупорядоченный список меню с тремя ссылками.
Поскольку у нас здесь нету никакого контента, <section> будет использоваться, чтобы растянуть страницу и заставить действовать прокрутку.
И это все по HTML части. Теперь нам нужно стилизовать элементы при помощи CSS и сделать меню динамичным.
Стилизация меню и страниц
Чтобы сохранить этот код в одном файле, мы будем создавать CSS в <head>. Таким образом, весь наш CSS будет находиться перед закрытием тега </head>.
<style type="text/css">
/* Импортируем шрифт Amaranth */
@import url(//fonts.googleapis.com/css?family=Amaranth);
/* Основной стиль */
body{ background-color: #ebebeb; }
ul{ float: right; }
li{ display: inline; float: left;} img.logo{float: left;}
/* Размер и центровка меню */ 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; }
/* Размеры для увеличенного меню */
header.large{ height: 120px; }
header.large img{ width: 489px; height: 113px; }
header.large li{ margin-top: 45px; }
</style>
</head>
Здесь мы заканчиваем основную стилизацию нашего заголовка. <header> будет служить нашим меню контейнером. Он будет содержать наш <nav> элемент и будет служить элементом, где мы определяем цвет фона, высоту меню, стиль меню ссылок и другое. Он будет адаптироваться к ширине экрана со свойствами ширины: 100% и будет оставаться фиксированными в течение других элементов на веб-сайте. Важно не забуть задать z-индекс, чтобы этот элемент перекрывал остальные части страницы, а также положения :fixed, чтобы сделать div закрепленным вверху, так чтобы он оставался на том же положении, в то время как пользователь прокручивает веб-сайт. Как вы видите, кроме установки стилей для заголовков, мы также устанавливаем некоторые специфические стили для “large” класса, используя header.large. Начальное состояние нашего меню будет большим, и поэтому мы здесь определяем только нужные стили, чтобы оно выглядело, как мы хотим, при первоначальном входе пользователя на страницу.
Динамическое изменение размера меню
Наше меню сделано и стилизовано, но мы все еще хотим поработать над его минимизацией. Для создания этого «состояния», мы будем создавать новый класс для <header> в CSS под названием “small”, который будет ответствен за изменение свойств, которые мы должны модифицировать. Мы уже определили большое меню, так что теперь мы просто должны сделать наше меню короче, наше изображение меньшего пропорционального размера, а (margin top) мы используем в наших элементах <li>, что также должно быть уменьшено, чтобы они оставались вертикально в центре с новой высотой меню:
/* 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” и изменили значения, которые мы использовали, на меньшие. Мы используем отрицательные марджин-топ на изображение, чтобы централизовать его в контейнере, так как изображение имеет тонкую тень и выше, чем написание для его приспособления. Теперь у нас есть все необходимые стили, чтобы настроить меню размера изменения, и если вы попытаетесь изменить его в вашем <HTML><header>, вы увидите в браузере, что меню станет меньше. Но нам нужно, чтоб оно было динамичным.
Изменение класса меню при помощи jQuery
При всех наших стилях на местах, нам просто нужно добавить немного JavaScript, чтобы переключатся между классами «large» и «small». Так как мы хотим изменить это на основе прокрутки пользователем, мы будем использовать .ScrollTop () функцию в jQuery. Эта функция позволит нам получить или установить позицию прокрутки в пикселях. Положение прокрутки является количеством пикселей, которые уже были прокручены в окне браузера. В этом случае мы просто должны знать сколько пикселей пользователь прокрутил, чтобы мы могли вызвать наш код и переключиться между классами:
<script type="text/javascript">
$(document).on("scroll",function(){
if($(document).scrollTop()>100){
$("header").removeClass("large").addClass("small");
} else{
$("header").removeClass("small").addClass("large");
}
});
</script>
Если пользователь прокрутил более 100 пикселей, то тогда будет удален класс «large», который мы создали, и добавлен наш новый класс «small». Таким образом, меню будет изменяться в размере, как мы ранее определили в CSS. Попробуйте, к этому времени оно должно уже работать, но вы могли заметить, что переходы между классами, кажутся очень резкими.
CSS переходы для анимации меню
Для того, чтобы гладко переключаться между классами в нашем меню, мы будем использовать CSS переходы. Просто используйте этот кусок кода рядом с остальной частью вашего 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 */
}
Здесь мы определили переходы для всех свойств CSS для <header>, <img> и <li> элементов, в основном все элементы, которые мы меняем. Этот код будет анимировать изменения между обоими классами с переходами CSS в течение 1 секунды. Проверьте сейчас, результат должен быть очень плавным.
