Кампутары, Праграмнае забеспячэнне
Як зрабіць выпадальнае меню CSS
Сёння мы будзем разглядаць пытанне «Як стварыць выпадальнае меню CSS?». Варта адразу сказаць, што гэты элемент будзе зроблены без падлучэння якіх-небудзь дадатковых сродкаў. Гэта значыць, меню будзе створана толькі пры дапамозе CSS і HTML.
падрыхтоўка
Каб цалкам зразумець, пра што ідзе ў гаворка ў артыкуле, неабходна хоць трохі пазнаёміцца з тэарэтычным матэрыялам. Але калі вы знаёмыя з псевдокласса, то можаце прапусціць гэты абзац. Такім чынам, каб стварыць вертыкальнае выпадальнае меню CSS, нам спатрэбіцца такі элемент, як «: hover». Псевдокласс «: hover» можа прызначацца да любога тэгу HTML. Ён дазваляе вызначыць момант, калі на які-небудзь элемент наведзены курсор мышы. Напрыклад, мы прызначылі ўласцівасць: «a: hover {color: red;}». Дадзены запіс азначае, што пры навядзенні курсора мышы на любы тэг яго змесціва становіцца чырвоным. Варта заўважыць, што гэты псевдокласс азначае яшчэ неактивированный элемент. Дарэчы, «: hover» мае сваяцкія падобныя элементы. Але менавіта з дапамогай гэтага псевдокласса мы будзем ствараць выпадальнае меню CSS.
інструкцыя
Для пачатку варта зразумець, што ўяўляе сабой выпадальнае меню. Пад гэта вызначэнне трапляе мноства розных прыёмаў пабудовы розных макетаў. У дадзеным выпадку мы будзем разбіраць канструкцыю, якая складаецца з некалькіх пастаянна бачных пунктаў і некалькіх дадатковых (схаваных). Давайце скончым з тэорыяй і прыступім да практыкі.
- Ствараем макет нашага меню. Для гэтага зробім разметку HTML-кода. Створым укладзены спіс:
-
- < / ul>. Прыкладна так павінна выглядаць ваша выпадальнае меню. CSS уступіць у справу крыху пазней. У дадзеным выпадку асноўны спіс складаецца з трох асноўных пунктаў і двух ўкладзеных.
- Ўтойваем дадатковае меню. Для гэтага выкарыстоўваем табліцы стыляў, вызначым наступнае ўласцівасць: ul ul {display: none;} Гэта прыбярэ элементы другога спісу з экрана.
- Ствараем у CSS меню, выпадальнае з асноўнага спісу. У каскадных табліцах стыляў напішам наступнае правіла: ul li: hover ul {display: block;}. Дадзены запіс азначае, што пры навядзенні курсора мышы на элемент li, які знаходзіцца ў спісе ul, на экране з'явіцца ul (укладзены). На першы погляд такая схема можа здацца занадта складанай і заблытанай. Але на самай справе ўсё вельмі проста.
- Выкарыстоўвайце дадзены макет самастойна, устаўляючы паміж тэгамі
- свой кантэнт. Можаце змяняць колькасць элементаў спісу.
дэкаратыўныя змены
Як толькі будзе гатовы асноўны макет меню, можна пачынаць яго афармлення. Напэўна, шмат хто ў першую чаргу жадаюць пазбавіцца ад маркераў, якія абазначаюць элемент спісу. Робіцца гэта пры дапамозе аднаго ўласцівасці CSS, а менавіта list-style-type. Вам трэба дадаць такі запіс: li {list-style-type: none;}. Далей можна ўставіць рамку і зрабіць задні фон. Ўласцівасці border і background вам у гэтым дапамогуць. Магчыма, некаторым не спадабаецца, што выпадальнае меню з'яўляецца як дадатковы спіс, рассоўваючы пры гэтым основный элементы. Каб гэта выправіць, можна пазіцыянаваць яго. Для гэтага ў каскадных табліцах стылю пішам наступны запіс: ul ul {position: absolute; left: 15px; right: 15px; top: 15px; bottom: 15px;}. Натуральна, значэння ў вас будуць выкарыстоўвацца свае. У залежнасці ад таго, дзе вы хочаце ўбачыць выпадальнае меню, CSS прапануе яшчэ мноства уласцівасцяў, якія могуць дадаць розныя эфекты і ўпрыгожыць нашы спісы.
заключэнне
Яшчэ раз варта адзначыць канструкцыю макета меню. Для прысваення CSS правіл у дадзеным выпадку выкарыстоўваюцца укладзеныя значэння, напрыклад, ul ul. Калі ў вас у дакуменце будуць сустракацца іншыя падобныя канструкцыі, то могуць узнікнуць вялікія праблемы. У гэтых сітуацыях трэба выкарыстоўваць больш канкрэтнае прызначэнне, напрыклад, селектары або id-ідэнтыфікатары. Прыведзены ў артыкуле макет выпадальнага меню прызначаны для азнаямлення з агульнай канструкцыяй. Астатняя праца ўскладаецца на вашы плечы.
Similar articles
Trending Now