Створити навігаційне меню на сайті досить просто. Зазвичай для цього створюється список без міток, його елементам прописується float: left і якісь ще стилі оформлення - ось, загалом, і все. Але в наші дні, коли в моду увійшов адаптивний дизайн, спосіб створення меню став трохи іншим.
Зараз ми розглянемо, як створити з нуля просте і ефективне адаптивне меню, яке можна використовувати в самих різних проектах.
Що ми будемо створювати?
Оригінал цього меню можна подивитися тут . Я ж буду описувати процес створення вже на власному досвіді. Відразу скажу: я використовую CMS Joomla! 2.5.11, і меню створено через стандартний менеджер меню. Хоча це особливо не важливо, оскільки мова буде в основному йти про CSS.
Отже, після створення меню код у мене вийшов такий:
<Div id = "header"> <ul class = "menutop"> <li class = "item-194"> <a href= "#"> Створення сайтів </a> </ li> <li class = "item -195 "> <a href= "#"> Веб-дизайн </a> </ li> <li class =" item-196 "> <a href= "#"> (X) HTML </a> < / li> <li class = "item-197"> <a href= "#"> CSS </a> </ li> <li class = "item-198"> <a href= "#"> CMS < / a> </ li> <li class = "item-199"> <a href= "#"> Програми </a> </ li> <li class = "item-200"> <a href = "# "> Ресурси </a> </ li> <li class =" item-201 "> <a href= "#"> Статті </a> </ li> </ ul> </ div>
Додаємо стилі ...
Спочатку давайте додамо універсальний селектор, обнулив все відступи і застосуємо до всіх елементів box-sizing: border-box. Це значення властивості CSS3 дозволить нам зберегти фіксовану ширину елементів, навіть якщо ми будемо використовувати внутрішні відступи і межі.
* {-Webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }
стиль контейнера
Перш ніж ми почнемо оформляти індивідуальні елементи списку, давайте застосуємо стилі до наших батьківським елементами. Батьківського div-у ми поставимо ширину 90%, щоб меню займало більшу частину сторінки, але при цьому залишалося досить порожнього простору. А у нашого списку прибираємо всі маркери.
#header {width: 90%; margin: 50px auto; } #Header ul.menutop {list-style: none; overflow: hidden; }
Тепер меню виглядає так:
І потім стиль пунктів меню ...
Зараз буде дуже великий шматок коду, який зробить пункти нашого меню такими, як на сайті-прикладі. Правила, які ми застосуємо до них, разоб'ем відповідно до їх функціями, щоб було зрозуміліше, що з чим їдять. Уважно читайте коментарі до коду.
#header ul.menutop li a, #header ul.menutop li a: visited {display: block; padding: 10px; width: 12.5%; float: left; background: # 444; border-right: 1px solid #fff; color: #fff; font-size: 13px; text-align: center; text-decoration: none; } / * TRANSISTIONS * / -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease;
Ми вибрали ширину 12.5%, тому що у нас 8 пунктів меню, і 100% / 8 = 12.5%. В цілому наше меню зараз виглядає вже непогано.
Тепер ще потрібно оформити пункт меню при наведенні на них курсора миші.
#header ul.menutop li a: hover {background: # 222; }
Тепер при наведенні курсору колір пунктів буде змінюватися. Ми додали властивість transition для фону, тому він буде змінюватися не відразу, а плавно, протягом півсекунди. Це властивість, на жаль, не працює в браузері Internet Explorer (працює тільки в 10й версії), але у всіх інших браузерах ви побачите цей ефект.
І завершимо ми наше оформлення тим, що приберемо в останнього пункту меню праву межу, яка трохи псує зовнішній вигляд.
#header ul.menutop li: last-child a {border: none; }
Робимо меню адаптивним
Наш проект добре показує різницю між гумовим і адаптивним дизайном. Зараз наше меню є гумовим (його ширина задана у відсотках), але не є адаптивним. Це ми ясно побачимо, коли спробуємо сильно зменшити вікно браузера.
Виглядає просто жахливо! Тому давайте вирішимо цю проблему за допомогою медіа-запитів. Найкращий спосіб зрозуміти, де нам потрібні медіа-запити - це поступово зменшувати вікно браузера і перевіряти, як виглядає наше меню.
1240px ...
Перші труднощі починаються в районі 1240 пікселів. Назва пункту меню з двох слів починає ставати в два рядки, і меню деформується.
Для того, щоб це виправити, зменшимо для сторінки нижче цієї ширини шрифт меню до 11 пікселів.
@media screen and (max-width: 1240px) {#header ul.menutop li a {font-size: 11px; }}
Таким чином, при зменшенні екрану розмір шрифту теж зменшиться, і меню буде як і раніше виглядати красиво.
1105px ...
При ширині екрану в 1105 пікселів той же пункт меню знову починає спотворюватися. На цей раз, замість того щоб робити шрифт все менше і менше до тих пір, поки зовсім не зможемо його прочитати, ми повністю переробимо меню і розташуємо його в два ряди. Для цього створимо код, який буде виконуватися при ширині екрану менше 1105 пікселів.
@media screen and (max-width: 1105px) {#header ul.menutop li a {border-bottom: 1px solid #fff; font-size: 14px; width: 25%; } #Header ul.menutop li: nth-child (4) a {border-right: none; } #Header ul.menutop li: nth-child (5) a, #header ul.menutop li: nth-child (6) a, #header ul.menutop li: nth-child (7) a, #header ul. menutop li: nth-child (8) a {border-bottom: none; }}
Тепер наше меню перебудовується автоматично при зменшенні екрану.
Як ви помітили, ми використовували псевдоклас CSS3: nth-child, який дозволяє застосовувати особливий стиль до будь-якого вказаною дочірньому елементу - в нашому випадку це елемент списку.
610px ...
Далі ми ще раз провели процедуру зменшення шрифту, тепер уже для ширини в 660 пікселів, тому що після цієї ширини наше меню знову починає деформуватися. Але при ширині 610 пікселів деформація все одно повертається.
Тому зараз давайте змусимо меню ставати не в 2, а в 4 ряди.
@media screen and (max-width: 610px) {#header ul.menutop li a {font-size: 12px; width: 50%; } #Header ul.menutop li: nth-child (even) a {border-right: none; } #Header ul.menutop li: nth-child (5) a, #header ul.menutop li: nth-child (6) a {border-bottom: 1px solid #fff; }}
Для ширини в 320 пікселів ми ще трохи зменшимо шрифт (код аналогічний тому, що був вище). І тепер наше меню виглядає дуже добре навіть при маленькому розмірі екрану.
А як же кроссбраузерность?
Коли використовуєш таку кількість властивостей CSS3, неминуче виникає питання - як це все буде виглядати в різних браузерах? У випадку з нашим меню найбільшу проблему для його коректного відображення розробила компанія Microsoft. Проблема ця називається Internet Explorer.
Дійсно, наші псевдокласи: last-child і: nth-child, а також медіа-запити підтримуються в Internet Explorer тільки починаючи з 9-ї версії. Тому для більш ранніх версій ми використовуємо спеціальні скрипти.
Ось цей скрипт додає підтримку медіа-запитів в версіях 6-8:
<! - [if IE lt 9]> <script src = "http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </ script> <! [Endif] ->
А от тут можна знайти той, який допоможе їм розуміти псевдокласи CSS3. Для його роботи необхідний один з фреймворків JavaScript, найкраще підійде Motools, який використовується в Joomla 2.5.x за замовчуванням.
висновок
У цій статті описано створення меню на конкретному сайті і в певних розмірів екрану, але, використовуючи описані методи, можна зробити його під будь-який екран. Адаптивне меню - непроста справа, тому для його створення потрібно мати знання і досвід. І описаний спосіб створення - всього лише один з багатьох. Думаю, ми ще не раз повернемося до питання створення адаптивного сайту в наступних статтях.
за матеріалами http://designshack.net/articles/css/code-a-responsive-navigation-menu/
Зберегти
Що ми будемо створювати?А як же кроссбраузерность?
Коли використовуєш таку кількість властивостей CSS3, неминуче виникає питання - як це все буде виглядати в різних браузерах?
