Однією з найскладніших частин адаптивного дизайну сайту є навігація. Дана частина відіграє вирішальну роль в рівні зручності використання сайтом, так як з її допомогою відвідувач переміщається по сторінках.
розмітка HTML
Спочатку додамо тег meta viewport в розділі head. Даний тег потрібно для нашої сторінки, щоб коректно масштабироваться на екрані будь-якого розміру, особливо на мобільних пристроях.
... а потім додаємо наступний код для навігації в тег body.
Стилі які визначаються в даному розділі служать тільки для декорації. Ви можете встановлювати колір таким, яким хочеться. Для демонстрації тег body матиме м'який, кремовий колір.
Тег nav який визначає навігацію, матиме ширину 100% вікна браузера, а тег ul. який містить основні посилання меню, має ширину 600px.
Потім зміщуємо посилання меню вліво, так що вони будуть виводитися в один ряд.
Якщо ви подивіться на розмітку HTML, то побачите, що clearfix доданий в атрибуті class для обох тегів nav і ul для скидання обтікання тексту навколо меню.
Посилання меню розділені рамкою праворуч шириною 1px. крім останнього пункту. Потрібно змінити модель розрахунку меж прямокутника box-sizing на border-box. щоб зберегти розмір меню 100px.
Тепер меню буде мати більш світлий колір в станах: hover і: active.
... а зовнішні посилання будуть приховані (для екранів настільних систем).
На даному етапі ми створили стилі для меню. Але при зміні екрану браузера нічого відбуватися не буде. Пора переходити до наступного етапу.
медіа запити
Медіа запити використовуються для визначення того, як будуть змінитися стилі в певних точках при зміні розмірів екрану.
Так як наша навігація спочатку має ширину 600px. то спочатку визначимо стилі для екранів шириною 600px або менше, так що дана точка буде першою точкою перелому.
Також ми визначимо, як навігація буде виводитися на екранах розміру 480px або менше (тобто в другій точці зламу).
Коли екран стає менше 320px меню буде показуватися вертикально зверху вниз.
Тепер можна змінювати розмір екрану. Меню буде змінюватися разом зі зміною розміром екран.
виводимо меню
На даному етапі меню буде приховано і буде показуватися при натисканні на посилання "Меню". Для даного ефекту використовується функція jQuery slideToggle ().
Однак при зміні розміру вікна браузера відразу після того, як меню було відкрито і закрито на маленькому екрані, то меню залишиться невидимим, так як властивість display: none. генерується jQuery, ще буде приєднано до елементу.
Отже, потрібно видалити даний стиль при зміні розміру вікна:
Наше меню завершено, дивіться сторінку конфігурації, змінюйте розмір вікна браузера.
5 останніх уроків рубрики "CSS"
Невеликий ефект з інтерактивною анімацією букв.
Невеликий концепт кумедних підказок, які реалізовані на SVG і anime.js. Крім особливого стилю в прикладі реалізована анімація і трансформація графічних об'єктів.
Експеримент: анімовані SVG літери на базі бібліотеки anime.js.
Прикольний експеримент веб сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.
Експериментальний скрипт розкривається навігації.
artemelnik
В IE виглядає добре. Подивився в Apple, теж добре.
Привіт всім - хто може мені помоч. як можна на екран вивести при відключення інтернету - Ні сойідіненіе з інтернетом - через php або Jqery Ajax. можна це зробити З повазі maha.
Питання постав по людськи
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!