Сайт

Адаптивное меню для сайта: Как сделать Адаптивное меню навигации

04.01.1984

Содержание

Универсальное адаптивное меню для сайта

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

Ранее, я уже публиковал статью, в которой поделился двумя способами создания адаптивного меню. А сегодня рассмотрим ещё один способ.

Обычный вид меню для мониторов компьютера и больших экранов будет выглядеть так:

Вид меню на компьютере

На мобильных устройствах, меню в раскрытом виде будет отображаться так:

Вид меню на смартфоне

Содержание

  1. Принцип построения универсального адаптивного меню.
  2. Процесс создания адаптивного меню.
  3. Шаг 1. Создание html структуры меню.
  4. Шаг 2. Подключение стилей css.
  5. Шаг 3. Подключение библиотеки jQuery и скрипта обработчика.

Принцип построения универсального адаптивного меню.

Итак, для того чтобы создать такое меню вам потребуется:

  1. Создать html каркас.
  2. Применить стили css.
  3. Подключить скрипт обработчик.

Разумеется, у вас на сайте есть меню, и вы его хотите сделать адаптивным. У вас есть два пути, первый – адаптировать существующее меню и второй – сделать новое адаптивное меню.

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

На самописных сайтах работы с переделкой будет меньше, но все, же придётся повозиться.

В любом случае вы можете использовать стили и скрипт из этой статьи и адаптировать своё меню.

А для того чтобы создать новое адаптивное меню вам потребуется совсем немного времени.

Изначально создаётся меню на основе тегов ul и li, затем добавляются стили css и подключается скрипт. Такое меню загружается и отзывается быстрей, так как работает без запросов к базе данных.

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

Процесс создания адаптивного меню.

Шаг 1. Создание html структуры меню.

Первым делом нужно определиться с местом, где будет отображаться меню. Для этого нужно проанализировать файлы вашего шаблона. Как правило, меню выводится в шапке или сайтбаре. За эти основные блоки шаблона отвечают файлы header.php и sidebar.php. Именно в них и нужно искать место для вставки меню или замены старого. Для каждого шаблона – это индивидуальный процесс.

После того как вы определитесь с местом вставки нового меню, необходимо в это место поместить вот этот html каркас и изменить пункты меню и ссылки на свои.

<nav role="navigation">
 <div>
 <div>
 <div>
 <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 <span></span>
 <span></span>
 <span></span>
 </button>
 <a href="https://1zaicev.ru/">Бизнес в Сети</a>
 </div>
 <div>
 <ul>
 <li>
 <a href="#">
 Главная
 </a>
 </li> 
 <li>
 <a href="#" data-toggle="dropdown">
 Рубрики
 <span></span>
 </a>
 <ul role="menu">
 <li>
 <a href="#" target="_self">
 Рубрика1
 </a>
 </li>
 <li>
 <a href="#" target="_self">
 Рубрика2
 </a>
 </li>
 <li>
 <a href="#" target="_self">
 Рубрика3
 </a>
 </li>
 </ul>
 </li>
 <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>
 </ul>
 </div>
 </div>
 </div>
</nav>

Примечание: Оранжевым цветом я обозначил элементы, которые вы редактируете под ваш сайт.

Пункты меню можно добавлять и удалять. Как это делать я показываю в видеоуроке. За стрелку раскрывающегося меню отвечает вот этот код: <span></span>. Если раскрывающихся пунктов меню у вас несколько используйте этот код.

Шаг 2. Подключение стилей css.

Для того чтобы упростить процесс и не путаться с медиазапросами, подключать стили будем в виде отдельных файлов. Файлы стилей подключаются в файле header.php между тегами <head> … </head>. По крайней мере, это так в большинстве современных шаблонах.

Ваша задача найти, где подключается основной файл стилей style.css и ниже него подключить стили адаптивного меню.

Подключение стилей css

Но, для начала вы должны скачать файлы со стилями и скриптом здесь. После этого скопировать файлы bootstrap.css и menu.css в папку с вашей темой. А после в файле header.php, между тегами ХЕД добавить вот эти строки подключения:

<link rel="stylesheet" type="text/css" href="http://Ваш домен/wp-content/themes/Ваша тема/bootstrap. css" />
<link rel="stylesheet" type="text/css" href="http://Ваш домен/wp-content/themes/Ваша тема/menu.css" />

Шаг 3. Подключение библиотеки jQuery и скрипта обработчика.

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

И хотя, библиотека jQuery у вас скорей всего уже подключена, вы это увидите между тегами ХЕД в файле header.php, я на всякий случай покажу, как её подключить. А заодно и скрипт обработчик подключим, который вы скачали в архиве.

В том же файле header.php, перед закрытием тега </head> вставляете вот эти строки кода:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://Ваш домен/wp-content/themes/Ваша тема/bootstrap.min.js"></script>

Примечание: файл bootstrap. min.js, вместе со стилями тоже нужно скопировать в папку темы вашего сайта. Возможно, в вашей теме есть папка JS, тогда скопируйте этот файл туда и укажите это в пути к файлу.

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

А теперь в качестве наглядного примера, как работает адаптивное меню, и как его установить на сайт предлагаю посмотреть видеоурок.

На этом у меня сегодня всё, я желаю вам успехов и до встречи в новых статьях и видеоуроках!

С уважением, Максим Зайцев.

Адаптивное меню на CSS3

Приветствую вас на своем блоге!

Решил вам сделать небольшой сюрприз — написать еще одну и на мой взгляд очень полезную татью об адаптивном меню! Но меньше слов — больше дела. Погнали!

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

И так, начнем….

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

1. Разметка HTML

Разметка самая обычная, можно даже сказать — стандартная, которая состоит из неупорядоченного списка и который будет обернут в контейнер.

<div>
    <ul>
        <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

Юрич:

Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.

Заказать сайт

Выберите тип сайта:Сайт-визиткаСайт компанииСайт для блогаИнтернет-магазин

Я согласен на обработку своих персональных данных

Адаптивное горизонтальное меню html css + ssi | Делать сайт

Будем превращать вертикальное меню шаблона, представленного в статье «Создать сайт html css + динамические страницы ssi. Этап #3», в адаптивное горизонтальное меню на большом экране, которое автоматически становится вертикальным на малом мобильном. Соответственно исходный трехколоночный шаблон мы преобразуем в двухколоночный.

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

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

Общие принципы

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

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

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


Детали процесса

Рассмотрим все вышеперечисленные действия более подробно. \/map\//» —> <a href=»/map/index.html»> Карта сайта </a> <!—#else —> <a href=»/map/index.html»> Карта сайта </a> <!—#endif —> </nav>

Больше файл left.shtml нам не понадобится, его можно удалить.


style.css

1) Наряду с упрощением верстки инициируется или отменяется внешняя рамка. Если первое обязательно, то второе по желанию. Можно оставить, удалить или закомментировать стр. 6, это дело вкуса, я предпочитаю сайт в рамке. А вот стр. 13 и 14 удаляются.

2) Вносим небольшие коррективы в настройку «шапки» — заменяем блок /* Общие правила оформления «шапки» */ на следующий:


/* Общие правила оформления «шапки» */ header { color: #fff; background: #993333; padding: 20px 0 10px 0; border-bottom: solid 1px #cccccc; text-align: center; }

3) Обновление правил навигации. Заменяем строки, находящийся между /* !!! ОФОРМЛЕНИЕ БЛОКА НАВИГАЦИИ !!! */ и /* !!! ОФОРМЛЕНИЕ ЦЕНТРАЛЬНОЙ КОЛОНКИ !!! */ на следующие:


/* !!! ОФОРМЛЕНИЕ БЛОКА НАВИГАЦИИ !!! */ nav { padding: 5px 0 5px 0; background: #993333; text-align: center; border-bottom: solid 5px #cc6666; } /* Оформление ссылок навигации */ nav a, nav span { background-color: #993333; padding: 2px 2px 2px 20px; } /* Оформление ссылок навигации при взаимодействии с «мышкой» */ nav a { color: #cccccc; text-decoration: none; } nav a:link, nav a:visited { background: #993333; border: solid 2px #993333; } nav a:hover, nav a:active, nav a. current:link, nav a.current:visited, nav span { border-style: solid dotted; border-width: 2px; border-color: #993333; color: #f5f5f5; /* цвет кнопок 1-го и 2-го уроаня при наведении */ text-decoration: none; } nav a.current:link, nav a.current:visited, nav span { background: #993333; color: #999999; /* опредлеяет цвет 3-го уровеня */ } nav a.current:hover, nav a.current:active { background: #993333; color: #f5f5f5; /* меняет цвет при наведении на 3-й уровень*/ } nav span { color: #f5f5f5; /* определяет цвет кнопок 1-го и 2-го уроаня после нажатия */ text-decoration: none; }

Необходимо обратить внимание, что в этом коде отсутствует строка — display: block; . Наличие этого свойства позволяет делать элементы меню блочными (вертикальными), а ее отсутствие строковыми (горизонтальными).

4) Делаем область предназначенную для размещения основного контента максимально широкой. Необходимо найти в блоке /* !!! ОФОРМЛЕНИЕ ЦЕНТРАЛЬНОЙ КОЛОНКИ !!! */ строку — width: 63%; и заменить 63% на 81%.

5) В случае использования мобильных устройств горизонтальное меню должно превратиться в вертикальное, поскольку элементы меню в этом случае будут блочными. Для этого в блок /* Правила, определяющие версию смартфонов */ перед последней закрывающей фигурной скобкой вставляется:


nav a, nav span { display: block; }

А возможно скачать готовый результат

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

Заключение

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

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

В данном примере меню были применены директивы ssi, в следующей статье будем создавать так называемое адаптивное бургер меню, используя и другие технологии.

Как создать адаптивное меню для сайта с выпадающим списком на CSS

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

Адаптивное меню решает многие технические моменты даже при сложной многоуровневой навигации. Мобильное меню позволяет упростить навигацию на сайте, даже если в ней 3-4 уровня. При том вся необходимая информация будет находится в пределах 2 кликов — никаких горизонтальных прокруток. Именно этот вариант повышает юзабилити в разы, обеспечив пользователю удобную навигацию.

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

Для начала давайте посмотрим на пример адаптивного меню:
ПРИМЕР СКАЧАТЬ

 

Как создать адаптивное меню

Первым делом рассмотрим структуру HTML-файла, а в частности блок <head>:

<head> <meta name=»viewport» content=»width=device-width, initial-scale=1″> <link rel=»stylesheet» href=»css/reset.css»> <link rel=»stylesheet» href=»css/style.css»> <script src=»js/modernizr.js»></script> </head>

1

2

3

4

5

6

<head>

<meta name=»viewport» content=»width=device-width, initial-scale=1″>

<link rel=»stylesheet» href=»css/reset. css»>

<link rel=»stylesheet» href=»css/style.css»>

<script src=»js/modernizr.js»></script>

</head>

Строка 2 — задаём мета-тег, обеспечивающий корректное отображение на Iphone. Я уже писал о нём в статье про мета-запросы.

Строка 3 — подключаем стили, позволяющие сделать сброс параметров, установленных браузером по умолчанию. Для тех, кто не знал — да, каждый браузер устанавливает свои параметры стилей по умолчанию.

Строка 4 — подключаем файл с правилами для нашего меню.

Строка 5 — подключаем JS-файл, для корректной работы адаптивного меню.

Теперь рассмотрим структуру меню в <body>:

<body> <header> <nav> <ul> <li><a href=»#ankor»>О нас</a></li> <li><a href=»#ankor»>Каталог</a></li> <li><a href=»#ankor»>Портфолио</a></li> <li><a href=»#ankor»>Контакты</a></li> <li> <a href=»#ankor»><span>Список</span></a> <ul> <li><a href=»#ankor»>Меню</a></li> <li><a href=»#ankor»>Пункт №1</a></li> <li><a href=»#ankor»>Пункт №2</a></li> <li><a href=»#ankor»>Пункт №3</a></li> <li><a href=»#ankor»>Пункт №4</a></li> <li><a href=»#ankor»>Пункт №5</a></li> <li><a href=»#ankor»>Placeholder</a></li> </ul> </li> </ul> <!— . cd-main-nav —> </nav> <!— .cd-main-nav-wrapper —> <a href=»#ankor»>Menu<span></span></a> </header> </body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<body>

        <header>

<nav>

<ul>

<li><a href=»#ankor»>О нас</a></li>

<li><a href=»#ankor»>Каталог</a></li>

<li><a href=»#ankor»>Портфолио</a></li>

<li><a href=»#ankor»>Контакты</a></li>

<li>

<a href=»#ankor»><span>Список</span></a>

<ul>

<li><a href=»#ankor»>Меню</a></li>

<li><a href=»#ankor»>Пункт №1</a></li>

<li><a href=»#ankor»>Пункт №2</a></li>

<li><a href=»#ankor»>Пункт №3</a></li>

<li><a href=»#ankor»>Пункт №4</a></li>

<li><a href=»#ankor»>Пункт №5</a></li>

<li><a href=»#ankor»>Placeholder</a></li>

</ul>

</li>

</ul> <!— . cd-main-nav —>

</nav> <!— .cd-main-nav-wrapper —>

<a href=»#ankor»>Menu<span></span></a>

</header>

</body>

Думаю, здесь нечего прокомментировать, за исключением строки 23 — в ней мы прописываем элемент навигации для мобильного меню.

После того, как мы составили структуру, необходимо добавить до закрывающего тега </body> ещё 2 JS-файла:

<body> … <script src=»js/jquery-2.1.1.js»></script> <script src=»js/main.js»></script> </body>

1

2

3

4

5

6

7

<body>

…

 

<script src=»js/jquery-2.1.1.js»></script>

<script src=»js/main.js»></script>

 

</body>

Если jQuery библиотека у вас уже была подключена ранее, то нет смысла делать это ещё раз.

 

Вывод

После небольших изменений в коде «под себя» мы получаем отличное адаптивное меню, в котором содержится 2 типа навигации:

  • стандартная;
  • мобильная.

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

Немного позже я расскажу об интересном плагине для WordPress, с которым создание адаптивного меню будет сплошное удовольствие!

 

 

Подписаться на новости

Рубрика: HTML5 + CSS3.

Метки: CSS3, Адаптивность.

Добавьте в закладки ссылку

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

Главная » Разное » Как сделать адаптивное меню для сайта

Адаптивное меню для сайта