×

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

Для скачивания исходных файлов необходимо войти под своим аккаунтом через форму на главной панели.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер статей
  • Тест сайта
  • Подписка
  • Сайдбар
  • Прокрутка вверх
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

  • Текущее состояние создаваемого сайта

    1. Проверка при малых разрешениях экрана
    2. Проверка при больших разрешениях экрана
    3. Проверка на выделенном домене

    Здравствуйте уважаемый посетитель!

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

    Для этого предусмотрена возможность оценивать его работу в двух вариантах: с использованием зеркала сайта на поддомене текущего ресурса и на реальном интернет-ресурсе, размещенном на выделенном домене "avtobezugona.ru.

    Следует отметить, что первый вариант, предусматривающий использование зеркала сайта, позволяет наглядно оценить его работу при различных разрешениях экрана в диапазоне от 320px до 1920px. Что очень удобно для проверки адаптации во всем допустимом диапазоне.

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

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние тестового самописного сайта, который создается в рамках цикла статей Сделай сайт с нуля своими руками.

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Адаптация → Создаем выпадающее меню под мобильные устройства


Автор: / Дата:

Создаем выпадающее меню под мобильные устройства

Здравствуйте уважаемый посетитель!

Сегодня для управления сайта при использовании мобильными устройствами рассмотрим весьма немаловажный вопрос о том, как создать выпадающее меню, необходимое для работы с небольшим разрешением экранов. Также дополним веб-страницы элементом навигации "Хлебные крошки", в котором будет отображаться информация о текущих страницах сайта.

Содержание


  • Добавляем в разметку элементы дополнительной кнопки для вызова меню
  • Оформляем с помощью стилей CSS внешний вид выпадающего меню
  • Составляем скрипт для управления выпадающим меню
  • Создаем дополнительный элемент навигации 'Хлебные крошки'
  • Исходные файлы сайта

Добавляем в разметку элементы дополнительной кнопки для вызова меню


В предыдущей статье, при адаптации сайта под мобильные устройства на экранах с небольшим разрешением от 320 до 600 пикселей с помощью свойств CSS мы скрыли Главное меню. Это необходимо было сделать, так как такой размер экрана не позволяет отображать меню на всю ширину страницы.

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

Сейчас мы добавим необходимые элементы кнопки в разметку HTML-страниц, а дальше с помощью стилей CSS определим ее местоположение и сформируем внешний вид. Ниже показан соответствующий фрагмент заголовка главной страницы в файле "index.php" с дополнительным кодом для данной кнопки. Этот код необходимо также добавить и во все остальные страницы сайта, в файлы "article.php", "righting.php", "action.php" и "contacts.php".

  1. <header>

  2. ‹?php

  3. require_once "blocks/header.php";

  4. ?›

  5. <div class="menu-add1">

  6. <div><p>&ndash;</p><p>&ndash;</p><p>&ndash;</p></div>

  7. </div>

  8. <div class="menu-add2">

  9. <div><p>&times;</p></div>

  10. </div>

  11. <nav class="menu">

  12. <ul>

  13. <li class="activ"><a href="index.html" >Главная</a></li>

  14. <li class="passiv"><a href="index.html" >О маркировке стекол</a></li>

  15. <li class="passiv"><a href="index.html" >Акция</a></li>

  16. <li class="passiv"><a href="index.html" >Запись на маркировку</a></li>

  17. <li class="passiv"><a href="index.html" >Контакты</a></li>

  18. </ul>

  19. </nav>

  20. </header>

Рис.1

Как видно, в строках 5÷10 дополнение кода оказалось довольно простым. Потребовалось перед меню добавить всего лишь два небольших контейнера <div>. В одном из них помещены три блока <p> со спецсимволами HTML, обозначающими "тире", во втором - один блок <p> со символом "умножение".

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

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

Такие символы добавляются с использованием имени или числового кода. Получить информацию о соответствии символов их коду и имени можно из справочной литературы. В таких случаях я обычно использую соответствующую страницу онлайн справочника Puzzleweb.ru, где достаточно в удобной форме представлена эта информация.

скриншот 85

Конечно, в данном случае мы могли бы решить проблему символов и другим способом, набрав на клавиатуре обычное тире и букву "Х". Но, я специально не стал использовать такой метод, чтобы, во-первых, коснуться такой темы, как спецсимволы HTML, а во-вторых, из-за желания при создании нашего сайта стараться по возможности использовать более осмысленные решения.

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

Ниже, взамен ранее используемого нами инструмента разработчика в браузере Google Crome, приведен скриншот главной страницы в браузере "Orbitum". Как ранее отмечалось, просмотр сайтов в режиме мобильного устройства можно делать в различных браузерах. В последнее время я больше стал использовать для этих целей браузер "Orbitum", мне он в этом показался довольно удобным. Поэтому и привожу его в качестве примера, может кому-нибудь такой вариант то же прийдется по душе.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание выпадающего меню под мобильные устройства, картинка 1

Рис.2

Как видно, два блока <div> в виде трёх знаков "тире" и одного спецсимвола "умножение" появились в шапке там, где и должны, с левой стороны сразу под клюечвой фразой. Такое их расположение обусловлено сделанной разметкой. А теперь, с помощью стилей CSS нам только осталось разместить их в правом верхнем углу и придать соответствующий внешний вид, что мы и сделаем в следующей части.

Оформляем с помощью стилей CSS внешний вид выпадающего меню


Теперь перейдем к оформлению внешнего вида выпадающего меню. Но сначала, используя свойства CSS сформируем кнопку управления.

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

  1. /*----------назначение стилей css для кнопки управления-----------*/

  2. .menu-add1, .menu-add2 {

  3. display:absolute; top:0; right:0;

  4. }

  5. .menu-add1 {

  6. z-index:12;

  7. }

  8. .menu-add2 {

  9. z-index:11;

  10. }

  11. .menu-add1 div, .menu-add2 div {

  12. height:3.5em;

  13. width:3.5em;

  14. background:#bbb;

  15. border-radius:0.3125em 0.3125em 0.3125em 0.3125em;

  16. display:table-cell;

  17. vertical-align:middle;

  18. }

  19. .menu-add1 div {

  20. box-shadow:0.25em 0.25em 0.25em 0 #ddd inset;

  21. border-right:0.1875em solid #777;

  22. border-bottom:0.1875em solid #777;

  23. }

  24. .menu-add2 div {

  25. box-shadow:0.25em 0.25em 0.375em 0 #555 inset;

  26. border-right:0.1875em solid #ddd;

  27. border-bottom:0.1875em solid #ddd;

  28. }

  29. .menu-add1 p, .menu-add2 p {

  30. text-align:center;

  31. color:#006;

  32. line-height:0.6;

  33. }

  34. .menu-add1 p{

  35. font-weight:bold;

  36. font-size:1em;

  37. }

  38. .menu-add2 p {

  39. font-size2em;

  40. }

Рис.3

Здесь на некоторых свойствах нужно остановиться.

  • в строке 3 для элементов кнопки с классом .menu-add1, .menu-add2 определено абсолютное позиционирование, которое обеспечит расположение кнопки в правом верхнем углу;
  • в строках 6 и 9 назначено свойство z-index, которое определяет порядок расположения элементов по оси Z. Причем для элемента с классом .menu-add1 присвоено значение 12, а для .menu-add2 - 11. Таким образом, в исходном положении элемент с классом .menu-add1, который содержит знаки тире будет перекрывать другой элемент .menu-add2. В дальнейшем, с помощью скрипта, в зависимости от состояния меню значения этих свойств будут меняться, и соответственно, будет меняться вид кнопки - в одном положении будет виден элемент с классом .menu-add1, в другом - .menu-add2;
  • назначение теней и цвета бордюров в строках 20÷22 и 25÷27 служит для придания элементам с классами .menu-add1 и .menu-add2 подобия отжатой и нажатой кнопки соответственно;
  • свойства в строках 30÷39 определяют расположение, размеры и цвет ранее созданных спецсимволов тире и умножения.

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание выпадающего меню под мобильные устройства, картинка 2

Рис.4

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

Таким образом с кнопкой управления мы закончили и теперь, используя свойства CSS приступим к оформлению кнопок меню.

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

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

  1. /*----------назначение стилей css для меню при разрешении от 320px до 600px-----------*/

  2. .menu {

  3. position:absolute; top:0; left:0;

  4. z-index:10;

  5. }

  6. .menu ul li {

  7. list-style-type:none;

  8. }

  9. .menu a {

  10. width:13.75em;

  11. display:block;

  12. font-size:1.25em;

  13. font-weight:bold;

  14. text-align:center;

  15. line-height:3;

  16. text-decoration:none;

  17. border-radius:0 0.3125em 0.3125em 0;

  18. color:#006;

  19. background-image:linear-gradient(to bottom, #fff -10%, #ccdcd6 20%, #ccdcd6 80%, #000 170%);

  20. }

  21. .activ a {

  22. background:#eeefcd;

  23. box-shadow:0.0625em 0.125em 0.375em 0 #4c5150 inset;

  24. }

  25. .activ a:hover {

  26. background:#bbb;

  27. box-shadow:0.0625em 0.125em 0.375em 0 #4c5150 inset;

  28. }

Рис.5

Наверное подробно останавливаться и повторяться на данном CSS-коде нет необходимости, так как все используемые здесь свойства уже ранее рассматривались. При возникновении же каких-либо вопросов можно будет вернуться к предыдущим примерам назначения стилей CSS, либо обратиться к справочной литературе.

В итоге выпадающее меню в одноколоночном виде сайта примет следующий вид.

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

Рис.6

А теперь пройдемся по всему диапазону разрешений экранов (от 320px до 1920px, начиная с меньших размеров) и проверим правильность отображения меню как при одноколоночном, так двухколоночном варианте веб-страницы.

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

Ниже показаны измененные фрагменты в CSS-коде при проверке меню на всем диапазоне разрешений экранов.

  1. /*----------назначение стилей css для разрешений экранов более 400px-----------*/

  2. @media only screen and (min-width: 400px) {

  3. .ftr-menu {

  4. width: 50%;

  5. }

  6. .hdr-p1, .hdr-p2 {

  7. font-size: 1.125em;

  8. }

  9. .menu-add1 div, .menu-add2 div, {

  10. height: 3.875em;

  11. width: 3.875em;

  12. }

  13. }

  14. /*----------изменение стилей css для разрешений экранов более 600px, приведенных в таблице на рис.2-----------*/

  15. @media only screen and (min-width: 600px) {

  16. .menu-add1, .menu-add2 {

  17. display: none;

  18. }

  19. .menu {

  20. display: table;

  21. width: 95%;

  22. margin: 0 auto;

  23. position: relative; top:0; left:0;

  24. }

  25. .menu ul {

  26. display: table-row;

  27. }

  28. .menu ul li {

  29. display: table-cell;

  30. width: 20%;

  31. border: 0.0625em solid #2e376c;

  32. border-radius: 0.375em 0.375em 0 0;

  33. box-shadow: 0 0 0.1875em 0 #2e376c;

  34. vertical-align: middle;

  35. }

  36. .menu a {

  37. height: height: 2.875em;

  38. width: 1920px;

  39. display: table-cell;

  40. vertical-align: middle;

  41. font-size: 0.875em;

  42. line-height: 1;

  43. color: #2e376c;

  44. padding: 0 0.3125em;

  45. background-image: none;

  46. }

Рис.7

Как видно, здесь сделаны изменения лишь только в двух медиа-запросах, соответствующих разрешениям более 400px и 600px.

При разрешениях экранов более 400px в строках 10,11 просто несколько увеличен размер кнопки управления меню.

А в медиа-запросе, относящемуся к разрешению более 600px можно выделить следующие позиции:

  • В строке 17 свойство display со значением none, относящееся к классам .rtr-block1 и .rtr-block2 скрывает кнопку управления при преодолении контрольной точки в 600px, т.е. при переходе в двухколоночный режим отображения страниц;
  • В строке 23 меню присваивается относительное позиционирование (вместо абсолютного, назначенного для выпадающего меню) для того, чтобы при двухколоночном режиме меню вернуть на прежнее место;
  • В строке 45 у кнопок меню значением none свойства background-image удален фон, который ранее назначался для выпадающего меню.

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание выпадающего меню под мобильные устройства, картинка 4

Рис.8 Вид меню при 320px 1200px

А на следующих скриншотах показан вид меню у самой границы контрольной точки при 599px и 600px.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание выпадающего меню под мобильные устройства, картинка 5

Рис.9 Вид меню у границы контрольной точки при 599px и 600px

И последнее, что нужно сделать с помощью свойств CSS, это скрыть выпадающее меню в исходном состоянии. Для этого в таблице стилей (между 5 и 6 строками на рис.5), с учетом того, что вызов меню в дальнейшем будет выполняться уже с помощью скрипта через кнопку управления, назначим для списка .menu ul свойство display со значением none, как показано ниже.

  1. .menu ul {

  2. display: none;

  3. }

Рис.10

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

Составляем скрипт для управления выпадающим меню


Порядок создания и подключения файла скрипта, написанного на языке JavaScript к HTML-страницам аналогичен тому, как мы это делали для слайдера в статье Устанавливаем слайдер изображений. Только теперь создадим файл с другим именем, скажем "functions.js".

Поэтому здесь мы не будем повторно рассматривать все нюансы этой процедуры (при необходимости можно вернуться немного назад и освежить порядок действий), а сразу перейдем к написанию скрипта и рассмотрению его основных функций.

  1. $(document).ready(function() {

  2. $(".menu-add1") //Выбор элемента с классом .menu-add1

  3. .click (function() { //Вызов методом "click" функции обработчика события клика по выбранному элементу

  4. $(".menu ul") //Выбор элемента ul с классом .menu

  5. .animate ({width: "show"}, 500); //Выполнение анимации по развертыванию выбранного элемента слева

  6. //.slideDown(500); //(Вариант развертывания меню сверху)

  7. //.fadeIn(500); //(Вариант показа меню с помощью плавного изменения прозрачности)

  8. $(".menu-add1") //

  9. .css ("z-index", "11"); //Назначение выбранному элементу с классом ".menu-add1" значения 11 в свойстве "z-index"

  10. $(".menu-add2") //

  11. .css ("z-index", "12"); //Назначение выбранному элементу с классом ".menu-add2" значения 12 в свойстве "z-index"

  12. });

  13. $(".menu-add2") //Выбор элемента с классом .menu-add2

  14. .click (function() {//Вызов методом "click" функции обработчика события клика по выбранному элементу

  15. $(".menu ul") //Выбор элемента ul с классом .menu

  16. .animate ({width: "hide"}, 500); //Выполнение анимации по свертыванию выбранного элемента влево

  17. //.slideUp(500); //(Вариант свертывания меню снизу)

  18. //.fadeOut(500); //(Вариант скрытия меню с помощью плавного изменения прозрачности)

  19. $(".menu-add1") //

  20. .css ("z-index", "12"); //Назначение выбранному элементу с классом ".menu-add1" значения 12 в свойстве "z-index"

  21. $(".menu-add2") //

  22. .css ("z-index", "11"); //Назначение выбранному элементу с классом ".menu-add2" значения 11 в свойстве "z-index"

  23. });

  24. });

Рис.11

Для удобства рассмотрения здесь в таблице приведены подробные комментарии по каждому выражению скрипта.

Как видно, скрипт, составленный на основе библиотеки jQuery получился довольно простым, состоящим из двух частей. В одной части описываются действия, которые должны происходить при клике на элемент кнопки управления с классом ".menu-add1", в другой, то же самое с классом ".menu-add2".

Так, в первом случае в строке 5 выполняется функция анимации с параметрами, при которых меню будет развертываться с левой стороны. Кроме того, изменением свойства "z-index" в строках 9 и 11 элемент с классом ".menu-add2" будет перекрывать другой элемент с классом ".menu-add1". И таким образом на кнопке вместо символов "тире" появится крестик, который будет приглашать к обратному сворачиванию меню.

Во второй части описаны аналогичные действия, только в противоположном направлении.

Следует отметить, что в скрипте показаны еще два варианта отображения меню:

  • развертывание сверху и свертывание снизу (строки 6,17);
  • появление и скрытие с помощью плавного изменения прозрачности (строки 7,18).

Для того, чтобы изменить анимацию меню достаточно закомментировать функции в строках 5,16 и вместо них включить другие, соответствующие указанным вариантам.

Также следует обратить внимание, что во всех вариантах установлено время анимации равное 500мс (0.5с). Поэтому не трудно будет ускорить или замедлить показ/скрытие меню изменив в ту или иную сторону данный параметр.

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

Если теперь созданный файл скрипта подключить к страницам сайта и открыть какую-нибудь страницу в диапазоне разрешений от 320px до 600px, то можно увидеть, как при нажатии на кнопку управления будет отрабатывать скрипт для показа и скрытия меню. При этом, меняя тип и время анимации можно подбирать разные варианты отображения меню.

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

Создаем дополнительный элемент навигации "Хлебные крошки"


Последнее, что мы должны сделать для адаптации сайта, это создать элемент навигации, называемый "Хлебные крошки". Это позволит отображать информацию о текущих страницах в режиме одноколоночного сайта, т.е. при разрешениях экранов от 320px до 600px, когда Главное меню скрыто.

Для этого сначала дополним разметку страниц соответствующим элементом. Ниже показан фрагмент HTML-кода заголовка header, в котором показано место размещения дополнительного блока div с классом "band".

  1. <header>

  2. ‹?php

  3. require_once "blocks/header.php";

  4. ?›

  5. <div class="menu-add1">

  6. <div><p>&ndash;</p><p>&ndash;</p><p>&ndash;</p></div>

  7. </div>

  8. <div class="menu-add2">

  9. <div><p>&times;</p></div>

  10. </div>

  11. <nav class="menu">

  12. <ul>

  13. <li class="activ"><a href="index.html">Главная</a></li>

  14. <li class="passiv"><a href="index.html">О маркировке стекол</a></li>

  15. <li class="passiv"><a href="index.html">Акция</a></li>

  16. <li class="passiv"><a href="index.html">Запись на маркировку</a></li>

  17. <li class="passiv"><a href="index.html">Контакты</a></li>

  18. </ul>

  19. </nav>

  20. <div class="band">

  21. <p>Вы здесь: </p><p>Главная</p>

  22. </div>

  23. </header>

Рис.12

Как видно, дополнительный элемент - это обычный блок div, который размещен в конце заголовка header.

А теперь оформим этот элемент, используя стили CSS.

  1. /*----------назначение стилей css для элемента навигации "Хлебные крошки" при разрешении от 320px до 600px-----------*/

  2. .band {

  3. width:100%;

  4. background:#e6f7f0;

  5. line-height:2.0;

  6. box-shadow:0 0 6px 0 #555 inset;

  7. }

  8. .band p {

  9. font-size:1.125em;

  10. text-indent:4%;

  11. line-height:2.2;

  12. color:#000;

  13. text-shadow:0.0625em 0.0625em 0.0625em #4c8081;

  14. }

  15. .band span {

  16. font-style:italic;

  17. color:#b808be;

  18. text-shadow:0.0625em 0.0625em 0.0625em #298384;

  19. }

  20. /*----------назначение стилей css для элемента навигации при разрешении более 600px-----------*/

  21. @media only screen and (min-width: 600px) {

  22. .band {

  23. display:none;

  24. }

  25. .band p {

  26. text-indent:2.5%;

  27. }

  28. }

Рис.13

Приведенный код достаточно прост и какого-либо подробного пояснения, очевидно, не требует.

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

В данном варианте элемент навигации при переходе через контрольную точку в 600px будет скрыт для пользователей. Для того, чтобы оставить навигацию и в двухколоночном режиме достаточно в строке 23 назначить свойство display block.

Ниже на скриншоте показан вид главной страницы с элементом "Хлебные крошки" при разрешении экрана в 350px.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание выпадающего меню под мобильные устройства, картинка 6

Рис.14

В завершении работ по адаптации сайта можно сделать дополнительную проверку мобильных страниц в поисковой системе Яндекс. Для этого в кабинете мастера для сайта http://avtobezugona.ru/ сделаем запрос в соответствующем инструменте.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание выпадающего меню под мобильные устройства, картинка 7

Рис.15

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

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

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

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

Исходные файлы сайта


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

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

Для скачивания исходных файлов необходимо войти под своим аккаунтом через форму на главной панели.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments