Як написати горизонтальне меню CSS. CSS - горизонтальне меню для верстальників-початківців. Горизонтальне меню з роздільниками
Починаючи з цього уроку, ми будемо навчатися верстці сайту з нуля у популярному flat стилі. Ця тема є дуже об'ємною і ми присвятимо їй не один урок. Що означає це практично?
Уявіть, що Ви на біржі фрілансу отримали замовлення на верстку односторінкового сайту. Замовник передав Вам макет у вигляді .psd і попросив згорнути HTML сторінку. У роботу верстальника входить ще й нарізка макета на картинки, але ми опустимо цей етап, оскільки це питання вміння користуватися фотошопом. На цю тему Ви можете самостійно пошукати навчальні уроки з фотошопу.
Виходитимемо з того, що замовник виявився доброю людиною і надав нам разом з макетом і заздалегідь порізані картинки. Для створення HTML сторінки, нам знадобиться: .psd макет, папка з картинками, Photoshop, Notepad++ та браузер.
Ми говоримо з вами про макет, але поки що це тільки картинка, з якої ми маємо зробити повноцінну HTML сторінку.
Зверніть увагу, що наш макет є класичний приклад flat дизайну. Flat дизайн - це означає "плоский", тут ви не побачите об'ємних тіней, градієнтів та інших "наворотів".
Відкриваємо макет у фотошопі та беремо звідти всю потрібну інформацію – колір, шрифт, розміри та починаємо писати код, першою у нас йде шапка сайту, що складається з логотипу та меню навігації. Зрозуміло, що наш сайт буде адаптивним під будь-які пристрої та роздільну здатність екрану, тому всі розміри вказуємо в % і em .
Верстка шапки сайтуСтворюємо HTML сторінку та робимо розмітку нашої шапки. Вміст шапки пишемо всередині парного тега header.
- Головна
- Портфоліо
- Про мене
- Контакт
Без оформлення CSS стилями виглядає шапка зовсім не так, як треба. У файлі style.css , пропишемо селекторам відповідні властивості, щоб шапка виглядала згідно з макетом.
Розберемо основні моменти. Логотип та меню навігації мають бути в одному рядку. Тому в блоці div з логотипом задаємо обтікання - float: left; Навігаційне меню стане праворуч від логотипу. Пункти меню мають бути в одному рядку - display: inline-block; Скасувати обтікання можна вставкою в код порожнього дива - , у стилях відповідно записуємо так - .clear(clear:both;)
Код шапки сайту у файлі style.css:
Body (
font-family: "Lato", Verdana;
font-size: 100%;
background: #fff;
}
.wrap
{
margin: 0 auto;
width: 70%; /* відступи щодо вікна браузера */
}
.header(
padding: 1.3em 0em; /* поля навколо тексту */
}
.logo(
float: left; /* обтікання логотипу */
}
.logo a (
display: block; /* перевизначення в блоковий */
}
.nav (
float: right; /* обтікання логотипу */
margin-top: 0.82em;
}
.nav > ul > li (
display:inline-block; /* перевизначення в рядково-блоковий */
}
.nav > ul > li.active a(
background: #d0a5a5;
color: #ffffff;
}
.nav > ul > li > a (
display: block;
font-family: "Lato", sans-serif;
font-size: 1.1em;
text-transform: uppercase;
padding: 0.5em 1em;
color: #444;
-webkit-transition: 0.9s; /* плавний перехід */
-moz-transition: 0.9s;
-o-transition: 0.9s;
transition: 0.9s;
}
.nav > ul > li > a:hover (
color: #fff;
background: #d0a5a5;
}
Код HTML розмітки шапки сайту:
Портфоліо мопса "Валлі"
- Головна
- Портфоліо
- Про мене
- Контакт
/* скасування обтікання */
У процесі верстки сайту з нуля ми отримуємо готову шапку сайту.
Здрастуйте, шановні читачі мого блогу! Сьогоднішня стаття буде дуже корисна для верстальників-початківців. Тому що сьогодні ми будемо з вами верстати просте горизонтальне меню. Перед тим, як ми приступимо безпосередньо до верстки, хочу кілька слів сказати про те, чому я вирішив вибрати саме цю тему для статті.
Насправді все досить просто, коли я думав над темою чергового уроку для сайту я почав згадувати та аналізувати свій досвід вивчення верстки, то з чим мені доводилося стикатися на початковому етапі становлення себе як верстальника, що найбільше мені було незрозуміло щодо цієї галузі і т.д. Всі ці питання я ставив собі, щоб найкраще розібратися в тому, що може бути цікаво людині, яка починає свій шлях верстальника. І особисто у мене, як тільки я починав вивчати верстку, найбільше виникало питань щодо верстки різних меню, особливо якщо йдеться про багаторівневе меню. І тому сьогодні ми говоритимемо про меню, а конкретніше про горизонтальне меню. Тож починаємо!
Починаємо верстку нашого горизонтального меню!Як ви напевно здогадуєтеся насамперед нам потрібно створити html сторінку зі стандартною розміткою та підключити до неї файл стилів. Не буду докладно зупинятися на цьому кроці, оскільки сподіваюся, що ви не настільки початківці, щоб докладно розповідати вам, що таке body і head і як підключаються стилі. Скажу лише, що окрім стилів для нашого меню у файл css я напишу найпростіший reset, щоб обнулити стилі та домогтися однакового відображення відступів у всіх браузерах. Ось що так виглядає мій найпростіший ресет:
Про обнулення стилів теж поки нічого докладно говорити не буде, тому що по суті це тема для ще однієї статті, єдине, що вам потрібно знати про вищеописаний код, це те, що завдяки даному коду у всіх елементах сторінки, які ми будемо писати, обнулиться відступи margin і padding, це потрібно робити, щоб наша сторінка однаково виглядала у всіх браузерах.
Отже, що у нас є на даному етапі? У нас є html сторінка зі стандартною розміткою:
Горизональне меню
І у нас є підключений до цієї сторінки файл стилів (у мене це style.css), з таким вмістом:
Наступним етапом буде створення HTML розмітки для нашого меню.
Створюємо розмітку для менюУ нашій розмітці ми будемо використовувати новий тег , який з'явився в HTML5, я вирішив вас відразу привчати до нових тегів, щоб слідувати тренду і стандарту. їх у своїй верстка, так як рано чи пізно вам все одно потрібно буде перейти на них, як свого часу верстальники перейшли від з табличної верстки до блокової, така реальність, краще слідувати тренду!
І коли ми вже заговорили про підтримку нових тегів html 5, щоб у нас не виникало проблем із цим у старих браузерах, у наш документ потрібно підключити спеціальну бібліотеку — html5shiv. Робиться це вставкою в
розділ head вашої сторінки наступного коду:
Всі після цього тег (та інші теги, що стосуються HTML5) будуть нормально сприйматися старими браузерами.
Повернемося безпосередньо до нашої розмітки. Далі нам потрібно в наш тег вставити маркований список, у мене це виглядає так:
- Головна
- Про нас
- Портфоліо
- Блог
- Контакти
Отже з розміткою ми начебто перестали час приступати безпосередньо до написання стилів, тому що зараз наше меню виглядає м'яко кажучи не дуже:
Пишемо стилі нашого горизонтального менюІ так насамперед при верстці меню нам потрібно прибрати маркери списку, вони нам явно не потрібні, робиться це так:
Ul( list-style:none; )
Після цього наше меню стане таким:
Мені не дуже подобається, що наше меню приклеєне до країв браузера, давайте виправимо це:
Даним кодом ми задали ширину нашому меню, дали йому відступи зверху і низу по 50px і розташували по центру. Хто не знає якщо в блоковому елементі є ширина то для того щоб розташувати даний елемент строго по центру нам потрібно лише задати йому зовнішній відступ (margin) праворуч і ліворуч зі значенням auto.
Наступним етапом нам потрібно вже зробити наше меню горизонтальним, робиться це завданням елементам
Menu li( float:left; )
Все наше меню стало горизонтальним.
Якщо ви не зрозуміли, що саме трапилося і що робить властивість float, рекомендую погуглити інформацію про дану властивість і добре вивчити її, оскільки
без нього не обходиться жодна сторінка верстки, це я вам точно говорю. Ну та гаразд продовжуємо!
Menu li а( display:block;/* Робимо посилання блоковим елементом*/ padding:12px 20px;/* Задаємо внутрішнє відступи */ text-decoration: none; /* прибираємо нижнє підкреслення */ color:#fff;/* робимо колір посилання білим */ background:#444;/* робимо колір фону темним */ font:14px Verdana, sans-serif;/* задаємо розмір та назву шрифту */ )
Тут одне з найважливіших правил - display: block;. Справа в тому, що за умовчанням посилання є малими елементами, а до малих елементів відступи в різних браузерах застосовуються по-різному, тому бажано зробити посилання блоковим елементом і тільки тоді застосовувати до неї властивості пов'язані із зовнішнім або внутрішнім відступами. Зараз не хочеться навантажувати вас зайвою інформацією з часом на реальних прикладах ви самі зрозумієте, навіщо тут робиться такий акцент.
Давайте подивимося, що у нас вийшло, оновлюємо сторінку браузера і тадам!:
Як бачите, виглядає непогано, можна сказати, що в принципі наше меню готове. Єдине, що потрібно ще зробити - це задати світло посилань при наведенні, ну ще як мені здається меню краще виглядатиме з роздільниками між пунктами.
Почнемо з роздільників:
Menu li( border-left:1px solid #666; ) .menu li:first-child( border-left:none; )
Що ми тут зробили? Та все дуже просто ми поставили для наших пунктів (
Знову дивимося, що в нас вийшло:
На мою думку з роздільниками набагато краще.
Menu li a:hover( background:#888; )
Знову використовуючи спеціальний псевдоклас, цього разу - hover, ми задаємо колір посилання при наведенні на неї курсору, дивимося:
На мою крутяк 🙂, сподіваюся у вас вийшло таке ж меню як у мене.
На цьому закінчуватиму цей урок, дуже сподіваюся, що він вам був корисний і тепер ви знаєте, як верстати просте горизонтальне меню на чистому html і css. Звичайно, ми згорнули однорівневе меню, трохи складніше буде з дворівневим міну (з вкладеним списком), але це вже тема для іншого уроку, на цьому у мене все. Заходьте ще, буду радий!
Продовжуємо серію уроком присвячених меню, що випадає. На черзі горизонтальне меню, що випадає на css своїми руками.
Якщо ви потрапили сюди випадково або ви шукали іншу реалізацію меню, що випадає, раджу перейти в батьківський розділ.
У цьому розділі буде описано горизонтальне меню, що випадає на CSS і HTML.
Навігація по сторінці:
І так, Наша задача:
зробити горизонтальне меню зі списком css (на списках ul li) без використання jQuery і Javascript, а також без застосування таблиць
Мал. 2 (горизонтальне меню, що випадає)
Я зробив 2 скіни в одному, щоб показати як випадок виглядає праворуч і посередині.display: block; |
Тепер вони йдуть згори донизу, тобто наша навігація стала вертикальною. Щоб знову перетворити її на горизонтальну, потрібно додати певні властивості. Наприклад, замість блочного типу визначити їм блочно-рядковий, або задати їм (float: left). Читайте докладніше про ці способи.
Вертикальна навігаціяЗазвичай, щоб зробити вертикальне меню в HTML5 використовують список, але нам годиться і та розмітка, яку я дав вам вище. Як ви побачили, якщо перетворити посилання на блокові, то вони автоматично вишикуються один за одним зверху вниз, тому що два блоки не можуть стояти на одному рядку.
Тепер ви можете застосувати до них правила оформлення. На блоки діє набагато більше властивостей, ніж на малий елемент, тому ви маєте значно більше можливостей. Наприклад я додав такі:
a( text-decoration: none; color: #fff; padding: 5px; font-size: 22px; display: block; background: linear-gradient(to right, rgba(96,108,136,1) 0%,rgba(63,76,107) ,1) 100%);width: 200px;text-align: center )
text-decoration: none; color: #fff; padding: 5px; font-size: 22px; display: block; background: linear-gradient (to right, rgba (96, 108, 136, 1) 0%, rgba (63, 76, 107, 1) 100%); width: 200px; text - align: center |
Меню — це невід'ємна частина кожного сайту, чи майже кожного. Меню (або навігація) дозволяє швидко переміщатися по основних розділах сайту, що дуже схоже на зміст у книгах. Особливо схожість помітна на картах сайту (різновид навігації):
Меню може виглядати по-різному. Може бути горизонтальним
Вертикальним
Багаторівневими
Меню може бути дуже різноманітним і скидати його можна дуже по-різному: таблицями, блоками, просто посиланнями, можливо посиланнями з
...можна вигадати масу "збочених" способів і більшість з них відповідатимуть принципам блокової (безтабличної) верстки. Але у професійних колах чомусь вважається, що навігація має бути на основі невпорядкованих списків.< >і< >.
Перше пояснення приходить, якщо просто логічно подумати: меню це перелік посилань (розділів). А якщо не просто подумати, а зазирнути у словник, наприклад Ожегова:
стає ясно, що ми на правильному шляху (для тих, хто забув, семантичний код — це насамперед логічно (за змістом) правильно побудований код).
Якщо мучать сумніви, звернемося по допомогу до авторитетів. W3C про списки:
Списки можуть містити:- не впорядкований перелік
- упорядкований перелік
- навігацію
- визначення
Navigation ( list-style: none; /* ховаємо маркери */ margin: 30px; ) .navigation li ( float: left; /* вибудовуємо елементи списку в один ряд */ margin-right: 15px; /* робимо відступ щоб пункти меню не зливались */) .navigation li a ( display: block; text-align: center; padding-top: 100px; * вирівнюємо фон вгору і по центру */ background-repeat: no-repeat; width: 200px;/* розміри вказуємо щоб картинки повністю відобразилися */ height: 50px; інакше трактує блочну модель */ height: 150px; ) .navigation .chrysler a (background-image: /menu-audi.jpg); ) .navigation .bugatti a ( background-image: url(path-to/menu-bugatti.jpg); ) .