Як зробити просте адаптивне меню за допомогою CSS3

40

Как сделать простое адаптивное меню с помощью CSS3

Навігаційне меню один з найважливіших елементів будь-якого сайту, важливий, але в плані виконання, досить простий. При розгляді, найчастіше, це ненумерованний список з заданим стилем зсуву вліво і з тим або іншим сформованим зовнішнім виглядом. Поява мобільних користувача пристрою, з різними розмірами екранів, внесло суттєві корективи у веб-розробку і нові вимоги до дизайну сайтів. Хочемо ми цього чи ні, адаптивний дизайн це тренд, і на даному етапі він диктує правила.
Домогтися того, щоб сайти однаково добре виглядали на екранах різних мобільних пристроїв, стало складніше, але гра варта свічок. Елементи інтерфейсу сайтів, в тому числі і меню навігації виконані в техніці адаптивної верстки, коректно відображаються на екранах всіх типів пристроїв, від монітора настільного комп’ютера, до екрану мобільного телефону. Так що, навчитися азам адаптивної верстки, буде, як мінімум не зайвим. Власне кажучи, саме цим ми сьогодні й займемося.

Читайте також: Чистий стиль меню за допомогою CSS3

Пропоную на розгляд, техніку створення простого, дуже гнучкого в налаштуваннях, і до того ж досить ефективного, адаптивного меню, з використанням чистої семантичної розмітки HTML5, для реалізації адаптивної конструкції, без підключення javascript. В результаті за допомогою CSS ми отримаємо меню, яке може бути показано вліво, вправо або розташовуватися точно по центру, виділяються активні/поточні пункти меню здатне при зміні розміру вікна браузера, швидко перебудовуватися в раскрывающуюся, вертикальну навігаційну панель, яка чудово виглядає на екранах різних мобільних пристроїв(планшети, смартфони, ноутбуки та мобільні телефони).

Простое адаптивное меню

Демо

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

Простое адаптивное меню

HTML-Розмітка

Насамперед нам необхідно виконати розмітку всієї основної конструкції нашого меню. Ми створюємо елемент навігації, а отже логічним і навіть практичним, буде застосування HTML5-елемента, тега з присвоєним йому однойменною класом, для подальшого форматування CSS стилів, а також створення і абсолютного позиціонування випадає навігаційної панелі. Клас current вказує на активну / поточну посилання меню, зовнішній вигляд якої, сформуємо з допомогою css.

  • Головна
  • Про Нас
  • Портфоліо
  • Наші Послуги
  • Контакти
  • Головна
  • Про Нас
  • Портфоліо
  • Наші Послуги
  • Контакти

Як бачимо, меню, це простий ненумерованний список з певною кількістю посилань. Кількість пунктів може бути різним, але все ж не варто городити город, все в розумних межах.
Далі, поки не пішли далеко, хочу нагадати, а тим хто не знає, пояснити, що HTML5 і запити media query не підтримується IE версії старше 9-й(зовсім не дивно). Щоб уникнути головного болю в майбутньому і зробити все правильно, існують спеціальні скрипти html5shiv і css3-mediaqueries-js, за допомогою якого ми зможемо вирішити завдання сумісності, завбачливо підключивши їх до документа у розділі .


Всі. З основною розміткою ми розібралися, класи прописані, милиці додані. Тепер перейдемо до визначення стилів пунктів меню, сформуємо зовнішній вигляд і з робимо наше меню по-справжньому адаптивним.

CSS Визначаємо стилі

Набір стилів CSS меню під екрани моніторів для настільних комп’ютерів, досить стандартний, вдаватися в подробиці не бачу сенсу. Хочу лише звернути увагу, на те що я вказав display:inline-block замість float:left елемента

  • у контейнері навігації nav. Це дозволить вирівнювати пункти меню вліво, вправо і точно по центру, вказавши властивість text-align елементу списку
      .

      /* меню */
      .nav {
      margin: 20px 0;
      }
      .nav ul {
      margin: 0;
      padding: 0;
      }
      .nav li {
      margin: 0 5px 10px 0;
      padding: 0;
      list-style: none;
      display: inline-block;
      *display:inline; /* ie7 */
      }
      .nav a {
      padding: 3px 12px;
      text-decoration: none;
      color: #999;
      line-height: 100%;
      }
      .nav a:hover {
      color: #000;
      }
      .nav .current a {
      background: #999;
      color: #fff;
      border-radius: 3px;
      }

      /* меню */
      .nav {
      margin: 0 20px;
      }
      .nav ul {
      margin: 0;
      padding: 0;
      }
      .nav li {
      margin: 0 10px 5px 0;
      padding: 0;
      list-style: none;
      display: inline-block;
      *display:inline; /* ie7 */
      }
      .nav a {
      padding: 3px 12px;
      text-decoration: none;
      color: #999;
      line-height: 100%;
      }
      .nav a:hover {
      color: #000;
      }
      .nav .current a {
      background: #999;
      color: #fff;
      border-radius: 3px;
      }

      За зміни кольору посилань і фону активних/поточних пунктів меню відповідають секції .nav a:hover і .nav .current a відповідно. Я не став особливо мудрувати в цьому прикладі, все зробив в дусі мінімалізму, при наведенні на посилання змінюється колір, текст стає чорним color: #000;, а для активних пунктів додав фон background: #999;, замінив колір шрифту на білий color: #fff; і трішки закруглил краю border-radius: 3px; у получившейся кнопки. Ви можете фантазувати і експериментувати в цьому плані, скільки душі завгодно.

      Вирівнювання по центру і вправо

      Як я вже згадував вище, ми можемо змінювати вирівнювання пунктів навігації за допомогою властивості text-align, для цього додамо в код CSS кілька рядків:

      /* меню праворуч */
      .nav.right ul {
      text-align: right;
      }
      /* меню по центру */
      .nav.center ul {
      text-align: center;
      }

      /* меню праворуч */
      .nav.right ul {
      text-align: right;
      }/* меню по центру */
      .nav.center ul {
      text-align: center;
      }

      Адаптуємо меню

      Починається найцікавіше. Наше меню на даному етапі має гумовий формат(ширина визначається у відсотках) і поки зовсім не адаптивне. Почніть змінювати розмір екрану і ви побачите, що меню вибудовується в хаотичне нагромадження кнопок.

      Простое адаптивное меню

      Будемо виправляти ситуацію за допомогою медіа запитів. В точці прикладання медіа запиту в 600px, виставив відносне позиціонування position: relative; для елемента nav, щоб ми змогли потім розмістити список меню

        зверху в абсолютній позиції position: absolute;. За допомогою властивості display: none приховаємо всі пункти меню li, залишивши тільки активні на поточний момент посилання з класом current, прописавши їм властивість display: block
        При наведенні на згруповану панель навігації всі пункти меню повинні відображатися у вигляді списку, що випадає, для цього визначаємо правило .nav ul:hover li з функцією code>display: block. Для активних/поточних пунктів додаємо іконку, щоб виділити з інших.
        Якщо необхідно змістити меню вправо чи розташувати по центру, скористайтесь left і right властивостями позиціонування для списку ul нашого меню.

        @media screen and (max-width: 600px) {
        .nav {
        position: relative;
        min-height: 40px;
        }
        .nav ul {
        width: 180px;
        padding: 5px 0;
        position: absolute;
        top: 0;
        left: 0;
        border: solid 1px #aaa;
        background: #FAFAFA url(images/icon-menu.png) no-repeat 10px 11px;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0,0,0,.3);
        }
        .nav li {
        display: none; /* приховати все 
      • пункти */ margin: 0; } .nav .current { display: block; /* показувати тільки поточні активні
      • пункти */ } .nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; } .nav .current a { background: none; color: #666; } /* при наведенні на пункти меню */ .nav ul:hover { background-image: none; } .nav ul:hover li { display: block; margin: 0 0 5px; } .nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; } /* адаптивне меню праворуч */ .nav.right ul { left: auto; right: 0; } /* адаптивне меню по центру */ .nav.center ul { left: 50%; margin-left: -90px; } }
      • @media screen and (max-width: 600px) {
        .nav {
        position: relative;
        min-height: 40px;
        }
        .nav ul {
        width: 180px;
        padding: 5px 0;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #aaa;
        background: #FAFAFA url(images/icon-menu.png) no-repeat 10px 11px;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0,0,0,.3);
        }
        .nav li {
        display: none; /* приховати все

      • пункти */
        margin: 0;
        }
        .nav .current {
        display: block; /* показувати тільки поточні активні

      • пункти */
        }
        .nav a {
        display: block;
        padding: 5px 5px 5px 32px;
        text-align: left;
        }
        .nav .current a {
        background: none;
        color: #666;
        }/* при наведенні на пункти меню */
        .nav ul:hover {
        background-image: none;
        }
        .nav ul:hover li {
        display: block;
        margin: 0 0 5px;
        }
        .nav ul:hover .current {
        background: url(images/icon-check.png) no-repeat 10px 7px;
        }/* адаптивне меню праворуч */
        .nav.right ul {
        left: auto;
        right: 0;
        }/* адаптивне меню по центру */
        .nav.center ul {
        left: 50%;
        margin-left: -90px;
        }
        }

      • На цьому, мабуть і все! Наше чудове, стовідсотково-адаптивне меню готове, в чому ви можете переконатися ще раз подивившись приклад. Для більш детального вивчення матеріалу, ви можете завантажити вихідні коди і спокійно, без зайвої метушні, вникнути в тему.

        ДемоЗавантажити

        Урок підготовлено за матеріалами Web designer wall
        Вільний переклад і адаптація: Андрій /driver/

        Удачі!
        Буду дуже вдячний, якщо поділитеся посиланням на цей урок у своїх соціальних мережах: