Адаптивное меню на CSS3
Приветствую вас на своем блоге!
Решил вам сделать небольшой сюрприз — написать еще одну и на мой взгляд очень полезную татью об адаптивном меню! Но меньше слов — больше дела. Погнали!
Создать обычное меню на CSS очень просто и как это делается знают практически все, но вот о том, как сделать его адаптивным, известно далеко не каждому. И по тому как сейчас набирает популярность отзывчивый веб-дизайн (это дизайн подстраивающийся под любое разрешение) следует заняться изучением таких тем. И в данном уроке мы займемся созданием адаптивного меню.
И так, начнем….
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 и ниже.
Тут можно посмотреть демонстрацию урока!
На этом все… Надеюсь Вам это было полезным!
Ах да…. Советую еще посмотреть, на мой взгляд, одни из самых лучших курсов на эту тему:
- HTML5 и CSS3 с Нуля до Профи
- Фреймворк Bootstrap
Набор стилей CSS меню под экраны мониторов настольных компьютеров, довольно стандартный, вдаваться в подробности не вижу смысла. Хочу лишь обратить внимание, на то что я указал
Набор стилей CSS меню под экраны мониторов настольных компьютеров, довольно стандартный, вдаваться в подробности не вижу смысла. Хочу лишь обратить внимание, на то что я указал