Адаптивное меню на CSS3
Приветствую вас на своем блоге!
Решил вам сделать небольшой сюрприз — написать еще одну и на мой взгляд очень полезную татью об адаптивном меню! Но меньше слов — больше дела. Погнали!
Создать обычное меню на CSS очень просто и как это делается знают практически все, но вот о том, как сделать его адаптивным, известно далеко не каждому. И по тому как сейчас набирает популярность отзывчивый веб-дизайн (это дизайн подстраивающийся под любое разрешение) следует заняться изучением таких тем. И в данном уроке мы займемся созданием адаптивного меню.
И так, начнем….
Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.
1. Разметка HTML
Разметка самая обычная, можно даже сказать — стандартная, которая состоит из неупорядоченного списка и который будет обернут в контейнер.
<div id=»nav» class=»clearfix»> <ul id=»menu»> <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=»#»>FAQ</a></li> <li><a href=»#»>О компании</a></li> <li><a href=»#»>Контакты</a></li> </ul> </div>
2. CSS
Над CSS я сильно загоняться не стану. Главная задача — это что бы понять как же сделать его адаптивным.
#nav { width: 90%; margin: 60px auto; background: #666; } #menu { width: 100%; } #menu li { list-style: none; float: left; display: block; width: 12.5%;/*100/8 (так как пунктов меню 8 то всю ширину делим на 8)*/ } #menu li a { display: block; width: 100%; height: 100%; text-align: center; line-height: 50px; text-transform: uppercase; text-decoration: none; background: #666; color: #ddd; font-size: 13px; } #menu li a:hover { text-decoration: none; background: #333; color: #fff; }
Теперь, в стилях меню с помощью медиа запросов мы будем проверять ширину окна браузера и в зависимости от нее, менять сами стили меню.
/*если окно браузера менее чем 950px чуть уменьшаем размер шрифта*/ @media screen and (max-width: 950px){ #menu li a { font-size: 11px; } } /*если окно браузера менее чем 780px делаем меню в 2 строки*/ @media screen and (max-width: 780px){ #menu li { width: 25%; } #menu li a{ font-size: 13px; } #menu li:nth-child(even) { width: 25%; float:right; } } /*если окно браузера менее чем 440px делаем меню в 2 колонки*/ @media screen and (max-width: 400px){ #menu li { width: 50%; } #menu li a{ font-size: 13px; } #menu li:nth-child(even) { width: 50%; float:right; } }
Таким образом с помощью медиа запросов можно создавать не только меню, но и полноценные сайты, которые будут подстраиваться под любое разрешение экрана.
Но если бы все было так просто… Наивные). Как всегда всеми нами любимые IE (ослик он и в Африке ослик) ниже 9 версии этого не поддерживают. И для них нам придется подключить javascript (желательно перед </body>).
<script src=»respond.min.js» type=»text/javascript»></script>
А еще для более лучшей работы скрипта необходимо в стилях прописать, после каждого медиа запроса, специальный комментарий (/*/mediaquery*/).
Пример:
@media screen and (max-width: 400px){ #menu li { width: 50%; } #menu li a{ font-size: 13px; } #menu li:nth-child(even) { width: 50%; float:right; } }/*/mediaquery*/
Таким образом меню будет также хорошо отображаться в IE8 и ниже.
Тут можно посмотреть демонстрацию урока!
На этом все… Надеюсь Вам это было полезным!
Ах да…. Советую еще посмотреть, на мой взгляд, одни из самых лучших курсов на эту тему:
Демонстрация