Привіт, шановні читачі мого блогу! Сьогоднішня стаття буде дуже корисна для початківців верстальників. Так як сьогодні ми будемо з вами верстати просте горизонтальне меню. Перед тим як ми приступимо безпосередньо до верстки, хочу пару слів сказати про те, чому я вирішив вибрати саме цю тему для статті.
Насправді все досить просто, коли я думав над темою чергового уроку для сайту я почав згадувати і аналізувати свій досвід вивчення верстки, то з чим мені доводилося стикатися на початковому етапі становлення себе як верстальника, що найбільше мені було незрозуміло при вивченні даної області і т.д. Всі ці питання я ставив собі, щоб краще розібратися в тому, що може бути цікаво людині, який починає свій шлях верстальника. І особисто у мене, як тільки я починав вивчати верстку, найбільше виникало питань по верстці різних меню, особливо якщо мова йде про багаторівневому меню. І тому сьогодні ми будемо говорити про меню, а конкретніше про горизонтальному меню. Отже починаємо!
Як ви напевно здогадуєтеся насамперед нам потрібно створити html стараніцу зі стандартною розміткою і підключити до неї файл стилів. Не буду детально зупинятися на даному етапі, так як все-таки сподіваюся, що ви не настільки початківці, щоб докладно розповідати вам, що таке body і head і як підключаються стилі. Скажу лише, що крім стилів для нашого меню в файл css я напишу найпростіший reset, щоб обнулити стилі і домогтися однакового відображення відступів у всіх браузерах. Ось власне так виглядає мій найпростіший ресет:
* {Padding: 0; margin: 0; }
Про обнулення стилів теж поки нічого докладно говорити не буде, так як по суті це тема для ще однієї статті, єдине, що вам потрібно знати про вищеописаному коді, це те що завдяки даному коду у всіх елементах сторінки які ми будемо писати обнуляться відступи margin і padding, це потрібно робити, для того щоб наша сторінка однаково виглядала у всіх браузерах.
Отже що в нас є на даному етапі? У нас є html сторінка зі стандартною розміткою:
<! DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title> горізонально меню </ title> <link rel = "stylesheet" href = "style.css"> </ head> < body> </ body> </ html>
І у нас є підключений до даної сторінки файл стилів (у мене це style.css), з наступного змісту:
* {Padding: 0; margin: 0; }
Наступним етапом буде створення html розмітки для нашого меню.
Створюємо розмітку для меню
В нашій розмітці ми будемо використовувати новий тег <nav>, який з'явився в HTML5, я вирішив вас відразу привчати до нових тегам, щоб так сказати слідувати тренду і стандарту.Несмотря на те, що нові теги HTML 5 не підтримуються старими браузерами я все ж настійно рекомендую використовувати їх у своїй верстка, так як рано чи пізно вам всерівно потрібно буде перейти на них, як свого часу верстальники перейшли від с табличній верстці до блокової, така реальність, краще слідувати тренду!
І раз ми вже заговорили про підтримку нових тегів html 5, щоб у нас не виникало проблем з цим у старих браузерах, в наш документ потрібно підключити спеціальну бібліотеку - html5shiv. Робиться це вставкою в
розділ head вашої сторінки наступного коду:
<! - [if lt IE 9]> <script type = "text / javascript" src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script> <! [Endif ] ->
Все після цього тег <nav> (і інші теги оносящіеся до HTML5) будуть нормально сприйматися старими браузерами.
Повернемося безпосередньо до нашої розмітці. Далі нам потрібно в наш тег <nav> вставити маркування список, у мене це виглядає так:
<Nav class = "menu"> <ul> <li> <a href="#"> Головна </a> </ li> <li> <a href="#"> Про нас </a> </ li> <li> <a href="#"> Портфоліо </a> </ li> <li> <a href="#"> Блог </a> </ li> <li> <a href = " # "> Контакти </a> </ li> </ ul> </ nav>
Так само як бачите я до нашого меню <nav> додав клас .menu, зробив я це для того, щоб якщо раптом на нашій сторінці буде використовуватися ще один тег <nav> у нас не було проблем зі стилями.
Отже з розміткою ми начебто закінчили пора приступати безпосередньо до написання стилів, так як зараз наше меню виглядає м'яко кажучи не дуже:
Пишемо стилі нашого горизонтального меню
І так першим ділом при верстці меню нам потрібно прибрати маркери, вони нам явно не потрібні, робиться це так:
ul {list-style: none; }
Після цього наше меню стане таким:
Мені не дуже подобається, що наше меню приліплені до країв браузера, давайте виправимо це:
.menu {width: 960px; margin: 50px auto; }
Даним кодом ми задали ширину нашому меню, дали йому відступи зверху і низу по 50px і розташували по центру. Хто не знає якщо в блочного елемента є ширина то для того щоб розташувати даний елемент строго по центру нам потрібно всього лише задати йому зовнішній відступ (margin) праворуч і ліворуч із значенням auto.
Наступним етапом нам потрібно вже нарешті зробити наше меню горизонтальним, робиться це завданням елементам <li> float: left
.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; }
Що ми тут зробили? Та все дуже просто ми задали для наших пунктів (<li>) кордон зліва розміром в 1px і кольором # 666 ;. Що стосується селектора .menu li: first-child, то тут ми використовуємо спеціальний псевдо- клас, який дозволяє вибрати перший дочірній елемент списку. Про псевдокласи теж рекомендую більш детально почитати в інтернеті, дізнаєтеся багато корисного.
Знову дивимося, що у нас вийшло:
На мою з роздільниками набагато краще.
Отже нам залишається тільки задати колір посилання при наведенні курсору, тут теж все дуже просто:
.menu li a: hover {background: # 888; }
Знову використовуючи спеціальний псевдоклас, в це раз - hover, ми задаємо колір посиланням при наведенні на неї курсора, дивимося:
На мою крутяк 🙂, сподіваюся у вас вийшло таке ж меню як у мене.
На цьому буду закінчувати даний урок, дуже сподіваюся, що він вам був корисний і тепер ви знаєте, як верстати просте горизонтальне меню на чистому html і css. Звичайно, ми верстали однорівневе меню, трохи складніше буде з дворівневим мену (з вкладеним списком), але це вже тема для іншого уроку, на цьому у мене все. Заходьте ще, буду радий !!!
Отже що в нас є на даному етапі?