Адаптивное горизонтальное меню — код 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>, но их содержимое сохраняется, как это представлено ниже:

  <link rel="icon" type="image/png" href="/favicon.png">
  <link rel="stylesheet" type="text/css" href="/general-styles/style.css" media="screen">
</head>
<body>
<!--noindex-->
  <header>
    <!--#if expr="$DOCUMENT_URI=/^\/index.html/" -->
    <img src="/general-images/name-site1.png" alt="Сайт о вебе">
    <!--#else -->
    <a href="/"><img src="/general-images/name-site1.png" alt=" Сайт о вебе "></a>
    <!--#endif -->
  </header>
  <nav>
    <!--#if expr="$DOCUMENT_URI=/^\/index.html/" -->
    <span>Главная</span>
    <!--#else -->
    <a href="/index.html">Главная</a>
    <!--#endif -->

    <!--#if expr="$DOCUMENT_URI=/^\/basics\/index.html/" -->
    <span>Основы</span>
    <!--#elif expr="$DOCUMENT_URI=/^\/basics\//" -->
    <a href="/basics/index.html" class="current">Основы</a>
    <!--#else -->
    <a href="/basics/index.html">Основы</a>
    <!--#endif -->

    <!--#if expr="$DOCUMENT_URI=/^\/tech\/index.html/" -->
    <span>Технологии</span>
    <!--#elif expr="$DOCUMENT_URI=/^\/tech\//" -->
    <a href="/tech/index.html" class="current">Технологии</a>
    <!--#else -->
    <a href="/tech/index.html">Технологии</a>
    <!--#endif -->

    <!--#if expr="$DOCUMENT_URI=/^\/applications\/index.html/" -->
    <span>Приложения</span>
    <!--#elif expr="$DOCUMENT_URI=/^\/applications\//" -->
    <a href="/applications/index.html" class="current">Приложения</a>
    <!--#else -->
    <a href="/applications/index.html">Приложения</a>
    <!--#endif -->

    <!--#if expr="$DOCUMENT_URI=/^\/about\/index.html/" -->
    <span>О&nbsp;сайте</span>
    <!--#elif expr="$DOCUMENT_URI=/^\/about\//" -->
    <a href="/about/index.html" class="current">О&nbsp;сайте</a>
    <!--#else -->
    <a href="/about/index.html">О&nbsp;сайте</a>
    <!--#endif -->

    <!--#if expr="$DOCUMENT_URI=/^\/map\/index.html/" -->
    <span> Карта сайта </span>
    <!--#elif expr="$DOCUMENT_URI=/^\/map\//" -->
    <a href="/map/index.html" class="current"> Карта сайта </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, в следующей статье будем создавать так называемое адаптивное бургер меню, используя и другие технологии.