Меню горизонтальное с логотипом адаптивное. Адаптивное меню на CSS
Портала с замысловатыми меню. Решили писать скрипты только в том случае, если не найдем в сети того, что нужно. Задумывалось несколько разных навигаций с разными особенностями. К нашему счастью, нашлось практически все, кроме одного. Однако, как раз перед началом работы над написанием этого меню, все же удалось найти то, что нужно.
Попробовали довольно много адаптивных меню
. В этом топике я решил сделать подборку наиболее стоящих и интересных из тех, что пришлось нам опробовать. Все адаптивные меню
не похожи друг на друга и разработаны исключительно для определенных задач.
Итак. Вашему вниманию 5 адаптивных меню
на все случаи жизни.
flexMenu - меню , которое подойдет для сайтов с динамически изменяющейся шириной. Главная и уникальная его особенность - это добавление пункта «Еще» и перенос в его выпадающий список пунктов, которые не помещаются в ширину всей навигации. То есть, если мы будем смотреть на больших мониторах, увидим все пункты. Как только начнем сжимать окно браузера, появится в конце меню пункт «Еще» и в его выпадающий список будут динамически перемещаться пункты, которые не помещаются по мере сжатия окна. Таким образом, у нас получится меню с фиксированной высотой и «играющей» шириной.
При работе с flexMenu мы столкнулись с одной проблемой. В нашем случае справа был логотип с float: left;, справа размещалось данное меню также с float: left; и справа с float: right; был еще один блок. При ресайзе окна браузера получалось, что блок справа перепрыгивал под меню, далее все это перепрыгивало под логотип и потом уже задействовался функционал сжатия меню. Как бороться с данной особенностью верстки, будет в последующих топиках. Следите за обновлениями.Code a Responsive Navigation MenuОтличный пример меню навигации . При ресайзе окна браузера мы увидим, что пункты переходят друг под друга и выравниваются по ширине. Смотрится очень аккуратно. Самое главное, данное адаптивное меню будет отлично смотреться на мобильных устройствах и, что более преимущественно, оно удобно в использовании на девайсах с тач дисплеем.
Multi-level Flat Menu - отличный выбор, если вам требуется сэкономить место на странице.
Привет. Очень давно не писал постов на тему работы html/css. Недавно как раз начал верстать новый макет и в процессе наткнулся на интересный прием, который позволяет сделать меню резиновым (в него можно будет добавлять новые пункты и размер не увеличиться, а всегда будет 100% родительского блока). Итак, сегодня реализуем на css резиновое меню.
Кому лень читать статью, можно посмотреть это видео. Автор также все очень классно объясняет:
Первый шаг — это всегда html разметка, куда же без нее. Но в нашем случае все будет просто:
Все понятно, вот такой у меня код разметки:
Выглядит это все стандартно, вот так:
Теперь будем приводить все в нужный вид, за работу берется CSS.
Теперь беремся за само меню. У него (у тега ul) я уберу маркеры, сделаю фоновый , и, самое главное, свойством display: table-row заставлю контейнер для меню вести себя как табличный ряд. Это важно сделать для дальнейших манипуляций.
R-menu{ background: linear-gradient(to right, #b0d4e3 0%,#88bacf 100%); display: table-row; list-style: none; }
Как видите, приведенный код как раз решил все, о чем я писал. Кстати, градиенты удобно генерировать с помощью инструмента Ultimate CSS Gradient generator.
R-menu li{ vertical-align: bottom; display: table-cell; width: auto; text-align: center; height: 50px; border-right: 1px solid #222; }
- vertical-align: bottom — это свойство необходимо для того, чтобы в случае, если текст в пункте меню займет 2 строки, он отображался ровно. Когда мы сделаем меню, можете удалить это свойство, увеличить масштаб чтобы пункты сжались и текст перенесся на две строки и увидите проблему с отображением. Верните свойство и все будет нормально.
- display: table-cell — поскольку мы задали самому меню отображения табличным рядом, логично будет задать его пунктам отображение как ячейки в таблице. Это обязательно.
- width: auto — ширина будет вычисляться автоматически, в зависимости от длины текста в пункте
- text-align: center — это просто для выравнивания текста внутри по центру
- height: 50px — задаем высоту в 50 пикселей
- ну и border-right это просто граница справа, такой разделитель для пунктов
Пока меню выглядит неказисто, но ничего, настало время довести его до ума.
Последнее, что нужно сделать — задать стили ссылкам внутри пунктов. Тут у меня такой код:
R-menu li a{ text-decoration: none; width: 1000px; height: 50px; vertical-align: middle; display: table-cell; color: #fff; font: normal 14px Verdana; }
И вот так теперь выглядит меню:
Опять же, поясню некоторые строки:
- свойство text-decoration отменяет подчеркивание у ссылок, которое ставится по умолчанию
- width: 1000px — пожалуй, самая важная строка. Нужно задать ссылкам примерно такую ширину, можно и меньше, но обязательно больше максимально широкого пункта меню. Ссылки не станут в ширину 1000 пикселей, поскольку ширину ограничит пункт меню li, у которого ширина задана как auto, зато это позволит сделать так, чтобы при любом количестве пунктов в меню оно всегда было на 100 процентов ширины.
- vertical-align: middle и display: table-cell — первое выровняет текст по вертикали по центру, а второе также делает отображение ссылок в виде ячеек. Оба свойства нужны.
- font — ну это просто набор установок для шрифта. Читайте про css свойства для шрифтов в .
Например, чтобы при наведении изменялся цвет пункта меню. Реализуется это совсем просто, с помощью псевдокласса hover:
R-menu li:hover{ background-color: #6bba70; }
Тестируем меню на резиновостьОтлично, меню готовы, но мы не проверили самое главное — насколько оно резиновое, как я вам и обещал. Что ж, добавлю в меню еще 2 пункта:
Меню осталось в ширину на 600 пикселей. Остальные пункты просто немного ужались, чтобы поместились 2 новых.
Добавлю еще 1 длинный пункт:
Как видите, меню еще немного ужалось и длинный пункт отобразился вполне себе нормально. А если бы не было свойства vertical-align: bottom , о котором я вам говорил, то меню выглядело бы хуже.
Уменьшу меню до трех пунктов.
Пунктам стало гораздо свободнее, но само меню не поменялось в ширине. Вот мы и сделали 100% резиновое меню!
В принципе, если вы задали блоку-обертке не фиксированную, а максимальную ширину, то его даже не нужно адаптировать. В моем случае у меня стоит свойство max-width: 600px и когда ширина станет меньше 600 пикселей, блок просто будет уменьшаться вслед за экраном, не образуя горизонтальной прокрутки.
Ну а если вы хотите как-то изменить или поправить меню на мобильных устройствах или широких экранах, то вам в помощь! Успехов в сайтостроении!
Привет друзья, коллеги! Как ваши дела? Надеюсь у всех все здорово:) Сегодня будем делать простое адаптивное меню для наших landing page. Все чаще спрашивают об этом, а я подобные вопросы записываю в и стараюсь в свободное время писать на эти темы статьи.
Спасибо вам, что подкидываете таким образом новые идеи и помогаете развивать блог. Кстати, на какую тему хотели бы почитать следующую статью? Напишите в комментариях пожалуйста, для меня это очень важно. А теперь, давайте начнем…
Как сделать адаптивное меню для сайтаGoogle подтвердил, что с середины апреля одним из факторов ранжирования станет адаптивность сайта под мобильные устройства. В связи с этим все материалы о том, как сделать ваш landing page адаптивным — как никогда актуальны. Я не буду сегодня городить что-то сложное, а наоборот, расскажу, как сделать очень простое адаптивное меню с минимумом затрат времени.
В основном это будет html + css, но понадобится совсем маленький скрипт, для обработки клика. Итак…
Адаптивное горизонтальное менюНачнем с html. Прежде всего подключим библиотеку jquery. Наверняка, вы давно ей пользуетесь, поэтому убедитесь, что не подключаете ее второй раз:
Теперь разметка. Обычный ненумерованный список, и небольшой div, который содержит иконку меню. Она будет видна только на маленьких разрешениях.
Скачать прайс
Контакты
ОтзывыКак видите — ничего сложного, думаю, по мере необходимости вы сами сможете усовершенствовать его.
Теперь давайте добавим стили:
#menu { background: #2ba9c0; width: 100%; padding: 10px 0; text-align: center; } #menu a { color: #fff; text-decoration: none; padding: 12px 12px; } #menu a:hover { border-bottom: 4px solid #fff; background: #078ecb; } .itemsMenu li { display:inline; padding-right: 35px; width:100%; margin: 0 auto; } .itemsMenu li img{ vertical-align: middle; margin-right: 10px; } .iconMenu { color: #fff; cursor: pointer; display: none; } .showitems { display:block !important; } @media screen and (max-width: 600px) { #menu a{ padding-bottom: 13px; } #menu a:hover { border-bottom: none; } .iconMenu { display:block; } .itemsMenu { display:none; } .itemsMenu li { display:block; padding:10px 0; } }
Теперь, при уменьшении окна браузера вы увидите следующую картину:
Мне бы очень не хотелось описывать каждую строчку, ведь блог не о верстке как таковой. Давайте я просто попытаюсь объяснить.
Сначала элементам li задаем свойство display:inline, чтобы сделать их расположение горизонтально друг за дружкой. Можно было бы использовать float:left, но решил таким образом сделать. И скрываем иконку меню свойством display:none. Когда разрешение экрана меньше 600 пикселей, убираем inline, у элементов li, и скрываем их, а показываем иконку. В двух словах — так.
Теперь нам нужен простенький скрипт, который бы обрабатывал клик по иконке меню и показывал бы его элементы:
$(function() { $(".iconMenu").click(function() { if($(".itemsMenu").is(":visible")) { $(".itemsMenu").removeClass("showitems"); } else { $(".itemsMenu").addClass("showitems"); } }); });
Вот так. Я его вынес в отдельный файл и подключил перед закрывающимся тегом body.
Вот и все. Таким образом можно быстро сверстать простое адаптивное меню для landing page.
Конечно, есть недостатки. Отступы заданы в пикселях, но можно задать все расстояния и в процентном соотношении. Просто в этом не было необходимости. Если бы это был полноценный сайт, то и иконки бы я использовал в svg или шрифтовые, а не png и отступы бы пересчитал в процентах. А так, это был небольшой экспромт:) Надеюсь все понятно? Пока.
Похожие статьи на эту тему:
Добавляем HTML| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | О нас Проекты Блог Контакты Категории Меню Категория 1 Категория 2 Категория 3 Категория 4 Категория 5 Placeholder Menu |
Вся навигации состоит из двух неупорядоченных списков. Названия разделов и категорий меню вы, соответственно, меняете на свои.
| 1 | Menu |
Последняя строка отвечает за навигацию при маленьком разрешении экрана.
Добавляем CSSАрхив с примером содержит файл style.css
.
В нем в разделе «Стили для меню» находятся все стили оформления меню в том числе и медиазапросы.
Вы можете скачать весь файл, или добавить стили только для самого меню. Если вы, скачали в свой проект весь style.css
, то не забудьте подключить его в свой html
файл между тегами
.
| 1 |
Из архива копируем папку js. И подключаем скрипты в наш html документ.
| 1 2 3 |
Если в вашем проекте уже есть modernizr.js и jquery-2.1.1.js, то второй раз подключать их не нужно. Меню готово!
Также такой вариант навигации можно использовать для поиска по сайту, формы входа или для ссылок на соц.сети.
Адаптивное меню для современного сайта - не просто роскошь, а необходимость. Изобилие современных девайсов требует от веб-мастеров такой верстки, которая бы логично отображалась на экранах разного разрешения. И в отдельных случаях создать адаптивное меню намного труднее, чем сам дизайн, поэтому и необходимо рассмотреть этот вопрос.
Меню для большого экранаЧтобы понять общую схему меню, нужно будет для начала создать структуру меню в HTML и стилизовать его при помощи CSS. Потом на основе полученного материала можно совершенствовать и адаптивный шаблон. Итак, HTML-структура будет выглядеть следующим образом.
Меню на два пункта в HTML |
К получившемуся меню необходимо будет добавить стили CSS. В них следует указать размер и цвет шрифта, фон, позиционирование блоков.
Процесс адаптацииСоздание простого функционала для обычного компьютерного экрана - дело простое, и это можно увидеть на примере. Адаптивное меню для сайта создается только тогда, когда есть с чем работать, то есть когда уже добавлены пункты навигации. Самым оптимальным вариантом меню для мобильных устройств и планшетов станет значок гамбургер - квадратное поле, в котором нарисованы три При нажатии открываются все пункты меню. Чтобы создать такую навигацию, в HTML- документ необходимо добавить тэги.
Далее необходимо будет добавить к этим тэгам соответствующие стили, чтобы получилось визуально привлекательное и читабельное меню. Помимо визуального оформления навигации и иконки меню, нужно оформить соответствующим образом позицию изображения. Так, вводится условие menu_icon span:nth-child(1) {top:0 px};. То есть отступ изображения сверху составит ноль пикселей. Подобным образом необходимо задать значения и для других сторон.
Теперь адаптивное меню почти готово. Стоит обратить внимание на условие По умолчанию иконка меню не будет видна на сайте, поэтому в CSS-документ необходимо добавить дополнительный класс с таким условием: .menu__icon {display: inline-block;}. Это сделает навигацию видимой.
К тому же необходимо добавить в каскадную таблицу стилей задачу, что будет скрывать пункты и подпункты по мере необходимости. Для этого в CSS нужно задать фиксированную позицию меню, оформить дисплей и выравнивание. Пункты скрывают при помощи условий overflow:auto; opacity:0; z-index:1000. Также можно добавить класс menu__links-item, что укажет стиль для пунктов меню, но это уже по желанию разработчика.
Последний штрихТаким образом, адаптивное меню на CSS почти закончено. Для того чтобы оно отображалось при клике на иконку, необходимо добавить функции. Для простоты лучше использовать jQuery, но если есть желание, можно создать чистый JavaScript. И там, и там будет использоваться одинаковое условие:
- (function($){$(function() $(".menu__icon").on("click", function() $(this).closest(".menu").toggleClass("menu_state_open");});});})(jQuery).
На этом верстка адаптивной навигации заканчивается. Но это лишь один из нескольких вариантов создания такого рода функционала, так что стоит рассмотреть остальные. По крайней мере, несколько из них.
Основная часть интернет-пользователей ожидает увидеть строку навигации вверху сайта. Это уже стало своеобразным стандартом, поэтому адаптивное горизонтальное меню должно иметь достойный вид. Его можно сделать при помощи CSS, как в примерах, что приведены выше, так и с помощью подключения скрипта обработчика. В целом создание адаптивного меню состоит из 3 шагов:
Естественно, на всех сайтах есть свои строки меню, но если ресурс создан на CMS, то намного проще будет создать новое адаптивное меню.
BootstrapСоздание адаптивного функционала не является такой серьезной проблемой, если воспользоваться инструментами Bootstrap. Здесь уже заранее заложены шаблоны для создания горизонтального меню. Нужно лишь подключиться к ресурсу файл bootstrap.js. С помощью этого фреймворка веб-мастер получает возможность создавать навигацию любой сложности. Адаптивное меню с Bootstrap создается при помощи определенного кода.
Особенности методаПусть этот код и громоздкий, зато понятный. Стоит обратить внимание, что основную роль здесь играет тег nav , что отвечает за создание навигации и ее внешний вид. Также сюда подключены контейнеры container-fluid и container , которые задают ширину пунктов. С их помощью можно заставить меню расширяться на экранах разного разрешения или оставить его фиксированным.
Немаловажную роль в создании адаптивного функционала здесь играют классы collapse и navbar-collapse , которые отвечают за стиль. Само меню создается путем записывания пунктов, что размещены горизонтально.
Если применить для создания навигации этот код фреймовки, то на широких экранах она будет выглядеть как горизонтальный баннер. В начале будет находиться название ресурса, а затем пункты в строго заданной последовательности. На узких экранах будет отображаться только название сайта и значок гамбургер, при нажатии на который позиции меню отображаются в виде вертикального списка.
Выпадающее менюРесурс Bootstrap станет отличным помощником для создания адаптивного выпадающего меню. Для этого достаточно просто заменить строку тега
Выпадающие пункты |
|
Подобное можно сделать как для одного пункта, так и для нескольких. Возле позиции с выпадающими подпунктами появится стрелочка, указывающая вниз. При нажатии будет появляться созданный список. Если навигация будет высвечиваться на маленьком экране, то пункт с выпадающим списком тоже будет обозначаться стрелочкой, но с направлением в правую сторону. При нажатии появится еще один вертикальный список подпунктов.
Однако создавать можно не только при помощи Bootstrap. Если эта библиотека не подключена, можно создать адаптивное многоуровневое меню при помощи HTML и CSS с последующим подключением функции РНР.
Для начала необходимо создать в HTML-файле ненумерованный список, который включает другие списки. Для этого стоит использовать стандартные теги
- и
- . Не нужно также забывать о формировании классов, которые в дальнейшем будут обрабатываться каскадной таблицей стилей CSS. Для того чтобы было более понятно, стоит привести небольшой пример написания списков и создания классов.
Анимация адаптивного выпадающего меню задается при помощи каскадной таблицы стилей. Здесь нужно указать параметры для меню при уменьшении экрана на 50, 75 и 25 %. Такой подход к созданию адаптивного функционала обеспечивает грамотную верстку, при которой меню не «съезжает».
И в завершение необходимо вписать в документ функцию, указанную ниже.
Если в сайте не продумано использование каких-либо функций, кроме этой, то все равно для нее нужно создавать отдельный документ скрипта. Если вписать ее в обычный HTML, она попросту отобразится в окне браузера как часть текста и не будет работать.
JQuery
Также отличным решением будет создание панели навигации на плагине JQuery. Адаптивное меню на таком сервисе делается всего несколько минут. Сам плагин можно скачать в Интернете, он обладает простым и понятным интерфейсом, которым легко и просто пользоваться. Так что проблем с подключением файла стилей не должно возникнуть.
После того как файл стилей подключен, необходимо написать скрипт для создания адаптивной навигации.
После этого необходимо сверстать навигацию, если ее еще нет. Здесь все действует по принципу: «Все гениальное просто». В HTML-документе необходимо создать маркированный список в теге nav . Можно воспользоваться уже приведенным ранее примером или его упрощенной версией, которая выглядит так, как показано ниже.
На этом этапе работы в браузере будет отображаться только логотип, а само меню будет скрыто. Чтобы оно появилось, необходимо добавить функцию, вызывающую изменения плагина - okayNav.
var navigation = $("#nav-main").okayNav();
Теперь можно посмотреть на результаты работы. При нормальной ширине окна браузера это меню выглядит совершенно обычным, но если уменьшить экран, то последние пункты исчезают. Вместо них появляются три крупные точки, расположенные вертикально. При нажатии они словно переворачиваются, принимая горизонтальную позицию, а скрытые пункты меню раскрываются вертикальным списком в правом верхнем углу экрана.
Такое решение выглядит очень современно, а задействованный анимационный эффект выставляет ресурс в выгодном свете перед посетителями.
JoomlaИ последний вариант создания адаптивного меню с помощью системы «Джумла». Это бесплатный сервис для создания веб-сайтов, который представляет собой систему управления содержимым CMS. И как уже было упомянуто в самом начале, если сайт создан при помощи CMS, и нужно изменить имеющееся меню на адаптивное, то лучше всего начать делать функционал сайта с самого первого тега. Точно так же, как и в предыдущих примерах, необходимо создать маркированный список меню в HTML. Только для каждого пункта необходимо написать свой класс. В общей сложности все выглядит так, как показано ниже.
Дальше необходимо добавить стили. Лучше всего поставить все отступы на 0 рх и применить box-sizing: border-box. Это даст возможность сохранять заданную ширину элементов вне зависимости от того, сколько будет отступов. Далее, для родительского элемента меню (div) стоит задать ширину 90 % и уже после начинать стилизовать каждый пункт по отдельности.
Можно убрать границы, изменить цвет и заливку, сделать оформление, которое будет появляться при наведении курсором. Одним словом, сделать все, что будет соответствовать дизайну ресурса. Последний шаг создания адаптивного меню Joomla заключается в его преобразовании. Чаще всего на Joomla создают такое меню, которое при изменении размера экрана автоматически перестраивается, делясь на несколько строк. Это все тоже делается в CSS, единственная функция, которую следует подключить, - это условие кроссбраузерности. Она позволяет меню выглядеть одинаково в разных браузерах.
Функция кроссбраузерности
Создавать адаптивное меню действительно непросто, для этого нужны знания и опыт. Все описанные примеры - лишь небольшая часть возможных вариаций, но даже они могут быть полезными, если у человека есть базовые знания HTML и CSS.
