Добры дзень, паважаныя чытачы майго блога! Сённяшняя артыкул будзе вельмі карысная для пачаткоўцаў вярстальшчыкі. Бо сёння мы будзем з вамі вярстаць простае гарызантальнае меню. Перад тым як мы прыступім непасрэдна да вёрстцы, хачу пару слоў сказаць пра тое, чаму я вырашыў выбраць менавіта гэтую тэму для артыкула.
На самай справе ўсё досыць проста, калі я думаў над тэмай чарговага ўрока для сайта я пачаў успамінаць і аналізаваць свой вопыт вывучэння вёрсткі, то з чым мне даводзілася сутыкацца на пачатковым этапе станаўлення сябе як вярстальніка, што больш за ўсё мне было незразумела пры вывучэнні дадзенай галіне і г.д. Усе гэтыя пытанні я задавалася сабе, каб лепш за ўсё разабрацца ў тым, што можа быць цікава чалавеку, які пачынае свой шлях вярстальніка. І асабіста ў мяне, як толькі я пачынаў вывучаць вёрстку, больш за ўсё ўзнікала пытанняў па вёрстцы розных меню, асабліва калі гаворка ідзе пра шматузроўневай меню. І таму сёння мы будзем казаць пра меню, а больш канкрэтна аб гарызантальным меню. Такім чынам пачынаем!
Як вы напэўна здагадваецеся перш за ўсё нам трэба стварыць 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. Вядома, мы звярсталі аднаўзроўневага меню, трохі складаней будзе з двухузроўневым мену (з укладзеным спісам), але гэта ўжо тэма для іншага урока, на гэтым у мяне ўсё. Заходзьце яшчэ, буду рады !!!
Дык што ў нас ёсць на дадзеным этапе?