Создаем "быстрое" навигационное меню на CSS3!
Эта тема как для тех, кто уже знает, как писать на CSS3 и HTML5, так и для новичков, для общего образования! Потом
прочитаете еще раз и все встанет на свои места!
Итак, панель навигации всегда должна быть предельно проста. Пользователь даже не владея языком, на котором написан ваш сайт
должен интуитивно догадываться, что при нажатии одного элемента меню он попадет туда, а при нажатии другого сюда. Ну или хотя бы примерно должен понимать это! В большинстве случаев создание панели навигации - это создание неупорядоченного списка и последующее его облачение в CSS. C проектом "быстрого" меню мы немного попотеем, но наши силы того стоят!
Далее мы создадим простое, но эффективное быстро реагирующее навигационное меню, которое будет очень просто изменить и настроить для ваших проектов!
Что будем строить?
Давайте забежим немного вперед и посмотрим, что же у нас получится в итоге! Убедитесь, что размеры вашего окна браузера готовы к просмотру конечного результата!)
HTML
Я предлагаю опустить все ненужные предисловия о создании страницы и перейти к главному, написанию кода именно для нашего меню.
Создадим разметку для нашего меню. Так как создаем навигационное меню, то ему самое место в новом элементе HTML5 - <nav>!
<nav>
</nav>
Спешу сообщить, что тугоумное деяние Microsoft не поддерживает очень многое не только из нового кода, но и со старым до сих пор проблемы. Печально, но некоторые мои стили не поддерживает IE6-8, для них мы определим отдельный скрипт для правильной обработки стилей.
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Поместите эти строки перед </head>, и вот тогда у нас все будет красиво во всех браузерах IE.
Создаем список.
Вторым шагом будет создание неупорядоченного списка в контейнере <nav> с восемью ссылками. Убедитесь, что вы использовали
именно восемь ссылок, потому как результат будет зависит именно от этого.
<nav>
<ul>
<li><a href="#">Ваш сайт</a></li>
<li><a href="#">О вас</a></li>
<li><a href="#">Клиенты</a></li>
<li><a href="#">Работы</a></li>
<li><a href="#">Принципы</a></li>
<li><a href="#">Загрузки</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
Добавляем описание.
Мы сделаем наше меню живее и интереснее, добавив строку текста ниже каждого из пунктов меню. Существует несколько вариантов этого, поэтому можете поэкспериментировать. А я пойду своим путем и использую элемент <small> для второй строки. Он на
самом деле будет маленьким, тем самым создав нам семантический прием без ненужным контейнеров, ID или классов. Я добавлю еще в каждую ссылку описание с помощью атрибута title, добиваясь бОльшей красоты и ясности. Вы вполне можете этого не делать, как вам будет удобно!
<nav>
<ul>
<li><a href="#" title="ваш сайт">Ваш сайт<br /> <small>Вернемся домой?</small>
</a></li>
<li><a href="#" title="о вас">О вас<br /> <small>Узнайте нас больше</small>
</a></li>
<li><a href="#" title="клиенты">Клиенты<br /> <small>Узнайте наших друзей</small>
</a></li>
<li><a href="#" title="работы">Работы<br /> <small>Готовые проекты</small>
</a></li>
<li><a href="#" title="принципы">Принципы<br /> <small>Наши тезисы</small>
</a></li>
<li><a href="#" title="загрузки">Загрузки<br /> <small>Загрузите наш материал
</small></a></li>
<li><a href="#" title="блог">Блог<br /> <small>Читайте о нас</small>
</a></li>
<li><a href="#" title="контакты">Контакты<br /> <small>Обращайтесь к нам</small>
</a></li>
</ul>
</nav>
Проверка прогресса
После этого шага у вас должен был получится нестилизованный список ссылок. Обратите внимание, что безо всяких усилий <small> уже работает и уменьшает размер каждой строки.
Начальные стили
Чтобы начать писать CSS давайте возьмем универсальный селектор и применим атрибут box-sizing: border-box к каждому элементу. Это поможет нам указывать размеры в процентах, даже с нашим использованием границ!
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Стили контейнеров
Прежде чем начать стилизацию остальных элементов, давайте применим несколько базовых стилей к родительским элементам.
Первой нашей целью будет элемент <nav>, зададим его ширину 90% от <body>. Это расширит наше пространство для создания меню, но оно все еще останется маленьким помещением. Убедитесь, что вы отцентровали это на странице со значением margin: auto.
Так же включим необходимые неупорядоченные стили списка, чтобы сбросить стили списка и устранить маркеры.
nav {
width: 90%;
margin: 50px auto;
}
nav ul {
list-style: none;
overflow: hidden;
}
Стили меню
Теперь, когда наши родительские элементы работают вместе, займемся пунктами меню, которые могут быть назначены через элемент <nav> с помощью тегов привязки и элементов списка.
Вот блок кода, не бойтесь его величины, мы разберем это дальше.
nav li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 400 13px/1.4 Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;
}
/*SMALL*/
nav small {
color: #aaa;
font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
text-transform: none;
}
Я упорядочил свойства в алфавитном порядке для того, чтобы нам было легче разбирать его а мне проще на них ссылаться. Если их все поменять местами, суть от этого не изменится, нам так будет проще их разобрать!
nav li a {
display: block;
float: left;
width: 12.5%;
padding: 10px;
background: #444;
border-right: 1px solid #fff;
color: #fff;
font: 400 13px/1.4 Helvetica, Verdana, Arial, sans-serif;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
Итак, первый блок стилей определяет форму и расположение каждого элемента. Мы изменили привязку элементов на блочный уровень, пустили их в обход налево, присвоили ширину и добавили небольшой отступ. Все это создает хороший большой прямоугольник для каждой ссылки нашего меню. Почему 12.5% для ширины? Поскольку у нас восемь пунктов меню, и 100% поделенные на 8 дают нам ширину 12.5% для каждого элемента.
В следующем блоке кода мы определяем визуальное оформление полей, которые мы только что создали. Мы дали им цвет фона и отступ в 1рх, граничащий с правой стороной. B наконец, мы заканчиваем работу над стилями, которые касаются текста в меню. Применим к ним основные шрифты.
Для стилей <small> мы поменяли цвет, удалили прописное текстовое преобразование и установили шрифт "Helvetica"
Проверим прогресс!
Наше меню смотрится неплохо! Пользовательский шрифт работает, ссылки встроены, а описание совершенно! Красиво...
Стили при наведении курсора
Когда пользователь наведет курсор пункт меню, давайте сделаем эффект затемнения ячейки, чтобы меню стало более оживленным.
nav li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;
/*TRANSISTIONS*/
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}
/*HOVER*/
nav li a:hover {
background: #222;
}
Границы
Теперь наш фон белый, но пока остается проблема с границами. Они предназначались для того, чтобы придать немного визуального определения каждому пункту меню. Но нам не нужно это в самом конце. Давайте уберем границу, использую псевдокласс last:child.
nav li:last-child a {
border: none;
}
Теперь в конце меню у нас нет границы, отделяющей меню от фона.
Быстрое реагирование меню
Этот проект служит хорошим примером различия между четким дизайном и нестабильным. Пока наше меню нестабильно (потому что ширина основана на процентном соотношении), это не стабильно и не очень красиво. Это будет особенно заметно, когда мы уменьшим размер нашего окна.
Мы видим, что это просто авария! Придется что-то придумать, чтобы видеть, сможем ли мы решить эту проблему... Лучший способ
узнать, где мы нуждаемся в запросах носителей состоит в том, чтобы проверить это и увидеть, где расположение повреждается, чтобы учесть это.
Я не буду приводить примеры в картинках, если у вас будет такая необходимость, вы можете сами это сделать.
1220рх
Первая проблема, с которой я столкнулся происходит примерно на 1220рх. Здесь более длинные текстовые элементы начинают отключаться и становятся нечитаемы, вообще пропадая.
Чтобы решить эту проблему мы должны лишь скорректировать наш размер шрифта. Я назначил для этих целей, непосредствено перед
происхождением нашей проблемы шрифт в 10 рх.
/* MEDIA QUERIES*/
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
nav li a {
font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}
nav small {
font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
}
}
Предыдущая проблема устранена. Поскольку мы уменьшаем размер окна, меню автоматически уменьшает размер шрифта, чтобы все уместилось.
930рх
Еще раз уменьшаем размер окна и видим, что меню снова отображается некорректно при на отметке около 900рх. У нас есть проблемка с отображением.
Вместо того, чтобы размер шрифта уменьшался, мы выберем здесь немного другой метод, отобразим меню в две строки. При уменьшении размера шрифта для такого размера экрана пользователя, наше меню будем нечитаемо. А теперь каждая ссылка будет такой же большой и иметь необходимый нам вид с учетом уменьшения размеров экрана.
@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
nav li a {
width: 25%;
border-bottom: 1px solid #fff;
font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}
nav li:last-child a, nav li:nth-child(4) a {
border-right: none;
}
nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a,
nav li:nth-child(8) a {
border-bottom: none;
}
}
Обратите внимание, что нам пришлось снвоа напрячь мозг, чтобы обдумать, как наши границы сработают в этот раз. Теперь нам
требуется нижняя граница, чтобы получить нормальное красивое отображение. И снова псевдоклассы нам в этом помогают, делая решение элементарным.
580рх и 320рх
Две строки работают хорошо, пока мы не опускаем нашу планку ниже 600 рх, затем вся красота пропадает и наше меню разваливается...
Чтобы решить эту проблему, мы завершим нашу эпопею с двумя столбцами, меняя их на четыре строки. Используя этот вариант для 580рх и ниже, опускаю размер шрифта еще более низко в 320рх.
@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
nav li a {
width: 50%;
font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding-top: 12px;
padding-bottom: 12px;
}
nav li:nth-child(even) a {
border-right: none;
}
nav li:nth-child(5) a, nav li:nth-child(6) a {
border-bottom: 1px solid #fff;
}
}
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
nav li a {
font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}
}
Теперь наше меню выглядит очень хорошо даже при самом маленьком разрешении экрана. Последние записи - то, что приводит меню
в приличный вид при маленьком разрешении экрана. Своего рода дополнения. Если вы считаете, что вам они не нужны, просто
уберите их.
В заключение
Наше меню выглядит неплохо, работает быстро, но его создание занимает довольно много времени и сил. Мне нравится "ломать" это меню на отдельные проблемы, чтобы докопаться до сути проблемы и решить ее. Но вы можете изучить этот вопрос намного проще, просто прочитав и вникнув в мой материал.
Теперь вы достаточно хорошо вооружены для создания вашего меню. Удачи!!!
Исходники ленивым
Ссылка на эту статью http://simple-html5-css3.blogspot.com/2012/03/fast-menu-css-css.html
Следующая статья Basis HTML - основы HTML часть 2
Подпишись на новости! Будь в курсе обновлений!
![[info]](http://l-stat.livejournal.com/img/userinfo.gif?v=89.2){kind=small}
taiko2
