Как сделать горизонтальное меню на css3

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

Создание навигации

Прежде всего, нужно сделать разметку. Тут можно поступить по-разному – можно вывести пункты меню списком, можно просто в nav подобавлять различные ссылки. Для простоты я так и поступлю в этом примере. Конечно же, за создание меню отвечает html, a css только за его оформление.

В общем, я даже не буду приводить разметку. Скажу только, что в блок nav я добавил пару ссылок.

Чтобы к нашим элементам можно было применять больше стилей, их нужно сделать блочно-строчными, либо блочными, задав float: left. В общем-то, оба варианты работоспособны и используются, вы можете выбрать тот, что больше нравится. Я только скажу, что при inline-block образуются небольшие отступы справа. Обычно чтобы убрать их применяют такое свойство:

По наблюдениям добавляется именно 4 пикселя, таким образом мы его аннулируем. При создании меню вы можете пойти упрощенным путем, просто вложив в nav нужные ссылки, а можно оформить все в виде списка, потому что так обычно и делают.

Оформление навигации

Собственно, я хочу предложить вам несколько способов оформления навигации, которые распространены в сайтостроении. Предположим, мы выстроили все пункты в один ряд с помощью float: left, но теперь их еще нужно оформить. Давайте добавим такие стили:

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

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

Теперь у ссылок убирается подчеркивание и цвет текста становится оранжевым (при наведении). Также в зависимости от дизайна в меню добавляют разделители. Поскольку оно у нас горизонтальное, то их можно реализовать с помощью рамок с правой стороны. Разделители очень часто бывают очень кстати, особенно в больших меню.

Собственно, их можно сделать и по-другому. Дело в том, что обычная рамка или граница (border) увеличивает размер блока и иногда это может привести к добавлению ненужной ширины. Соответственно, можно применить свойство box-shadow или outline. Второе полностью аналогично border, но при этом не увеличивает размеры элементов. Также по оформлению такие разделители могут немного отличаться.

Как сделать на css3 красивое горизонтальное меню?

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

Ну вот, наше меню стало значительно красивее. Что еще с ним можно было бы сделать? При наведении вы можете использовать css3 трансформации, чтобы увеличивать, поворачивать или перемещать ссылку.

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

Как адаптировать меню для мобильного сайта

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

Чтобы сделать на css3 адаптивное меню, нужно прописать для него медиа-запросы, то есть задать другие стили, учитывая ширину экрана. Очевидно, что если у вас слишком много пунктов в навигации, то, возможно, на экранах планшетов вам следует вывести только самые главные. На экраны мобильных телефонов в таком случае лучше вообще вывести только кнопку, которая будет разворачивать меню.

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

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

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

Комментарии Вконтакте: