Адаптивное меню на 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 и ниже.
Тут можно посмотреть демонстрацию урока!
На этом все… Надеюсь Вам это было полезным!
Ах да…. Советую еще посмотреть, на мой взгляд, одни из самых лучших курсов на эту тему:
Демонстрация
Навигация по записям
← Закладки с анимацией содержимого на CSS3Красивый вывод дополнительной информации при наведении → 
Юрич:Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению. Не забудьте подписаться на обновления: Подписаться на новостиПохожие записи 
Как добавить CSS в WordPress, легкий путь 
Понимание Bootstrap: как это работает и что нового 
Создание адаптивного меню в WordPress для мобильных устройств 
Круглые изображения с помощью CSS3 
Адаптивная многоколоночная форма 
Основные CSS Границы2 комментария к статье “Адаптивное меню на CSS3”
Оставить свой комментарий
Нажмите, чтобы отменить ответ.
Generic selectors Exact matches only Exact matches only Search in title Search in title Search in content Search in content Search in excerpt Hidden HiddenFilter by Categories HTML и CSS HTML и CSS Laravel Laravel Безопасность Безопасность Блоговедение Блоговедение Все о WordPress Все о WordPress Заработок в интернете Заработок в интернете Мысли вслух Мысли вслух Начинающим Начинающим Не по теме Не по теме Плагины WordPress Плагины WordPress Программирование Программирование Реклама в интернете Реклама в интернете СЕО СЕО Создание сайта на WP Создание сайта на WP Фриланс Фриланс
Больше результатов…
Подписаться на новости
Как создать галерею видео в WordPress
Что такое обмен ссылками в СЕО-продвиженииПонимание Bootstrap: как это работает и что нового Авторские права на материалы, размещенные на этом сайте, принадлежат авторам статей. Все права защищены и охраняются законом РФ. При использовании материалов с сайта ссылка на наш сайт обязательна. Если вы считаете, что публикация того или иного материала на нашем сайте нарушает законные права правообладателя.
© 2014 – 2022 Все права защищены
Заказать сайтВыберите тип сайта:Сайт-визиткаСайт компанииСайт для блогаИнтернет-магазинЯ согласен на обработку своих персональных данных
Набор стилей CSS меню под экраны мониторов настольных компьютеров, довольно стандартный, вдаваться в подробности не вижу смысла. Хочу лишь обратить внимание, на то что я указал
Набор стилей CSS меню под экраны мониторов настольных компьютеров, довольно стандартный, вдаваться в подробности не вижу смысла. Хочу лишь обратить внимание, на то что я указал