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

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

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

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

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

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

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

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

Условия

Предполагается, что имеется понимание файловой структуры изначального каркаса на локальном хостинге и навык редактирования вебдокументов. Текущие исходные тексты скачать ЗДЕСЬ.

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

Рассмотрим вышеперечисленные действия более подробно. Будут редактироваться файлы в папках general-includes и general-styles.

general-includes

Весь код из left.shtml, состоящий из секции nav.../nav, переносится в header.shtml и помещается после секции header … /header, при этом из перенесенного кода удаляются все теги p и /p, но их содержимое сохраняется, как в итоге представлено ниже:

Файл left.shtml больше не понадобится и потому удаляется, включая все обращения к нему на страницах. Имеется в виду строка №4 с содержимым ...#include virtual="/general-includes/left.shtml"... во всех файлах вебресурса с расширением .html .

general-styles/style.css

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

Ниже представлен фрагмент первоначального исходного текста, подлежащего такой корректировке.

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

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

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

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

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

Воспользоваться готовым результатом

Если появится желание пойти иным путем и сразу воспользоваться конечным результатом, не вдаваясь в детали. То можно СКАЧАТЬ готовую заготовку с адаптивным горизонтальным меню сразу всю и восстановить у себя на локальном хостинге ПК.

Впоследствии рекомендуется вернуться к первоначальному состоянию и последовательно проделать все шаги на самом деле.

⚬ ⚬ ⚬

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

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

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