Логотип блога MY

 ВЕБ-ТЕХНОЛОГИИ

 Домен itworldmy.ru - блог MY

начинающим

Адаптивное горизонтальное меню — код html css + ssi

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

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

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

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

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

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

Адаптивное меню на большом экране Адаптивное меню на малом экране

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

Рассмотрим все вышеперечисленные действия более подробно. Будут редактироваться коды в файлах general-includes/header.shtml и general-styles/style.css, а файл general-styles/left.shtml будет удален. Для этого потребуется доступ к коду, как это представлено в «Создать сайт html css + динамические страницы ssi. Этап #3».

header.shtml

Весь код из left.shtml переносится в header.shtml и помещается после блока <header> … </header> (после стр. 12), при этом из перенесенного кода удаляются все теги <p> и </p>, но их содержимое сохраняется, как это представлено ниже:

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


style.css

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


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



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


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


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


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



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

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

Заключение

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

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

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



Комментарии
Опубликовано: 0
Ждущих публикации: 0


Ваше имя:
(не более 20 символов)

Ваше сообщение:
(не более 1000 символов)



Новое в разделах

Делать сайт

Разное


Опрос 1

Какая у Вас система ?


   Linux - 5
   Windows - 5
   Обе - 1
   Android - 3
   iOS - 0
   Другие - 0

Всего: 14 чел.


Опрос 2

Какой формат док-ов пользуете?


   ODF - 3
   MS OOXML - 3
   Оба - 2
   Что это? - 3

Всего: 11 чел.


Данные

Время  - 08:38:09
Дата - 28.01.2022

Страница:
 - обновлена - 27.12.2021
 - посещений - 140

Сейчас:
 - на сайте - 1
 - переходов - 1

↑ ВВЕРХ