Ողջույն հարգելի ընթերցողներ։ Այսօր ես ուզում եմ Ձեզ ծանոթացնել այսպես կոչված հորիզոնական ընտրացանկերի հետ (drop down menu)։
Նախ մի քանի խոսքով ներկայացնեմ, թե ինչ է իրենից ներկայացնում հորիզոնական ընտրացանկը։ Այն իրենից ներկայացնում է պատուհան, որի մեջ գրված են ընտրացանկի անդամները։ Այդ պատուհանը չի երևում և դառնում է տեսանելի միայն այն ժամանակ, երբ մկնիկի ցուցիչը տեղափոխում ենք ընտրացանկի գլխագրի վրա։
Սկսենք ընտրացանկի կառուցմունը։ Դրա համար մեզ անհրաժեշտ են 2 ֆայլեր՝ index.html և style.css:
Առաջինի ֆայլի մեջ կառուցում ենք ընտրացանկի մարմինը։
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link href="./style.css" type="text/css" rel="stylesheet" /> <title>Dropdown Menu</title> </head> <body> <ul class="list"> <li><a href="#">HOME</a></li> <li> <a href="#">PRODUCTS +</a> <ul class="dropdown"> <li> <a href="#">Product 1 +</a> <ul class="second-dropdown"> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> </ul> </li> <li> <a href="#">Product 2 +</a> <ul class="second-dropdown"> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> </ul> </li> </ul> </li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </body> </html>
Առաջին ֆայլում մենք այլևս փոփոխություններ չունենք կատարելու։ Մեր հետագա աշխատանքը կատարելու ենք երկրորդ ֆայլում։ Երկրորդ ֆայլով ապահովելու ենք ընտրացանկի արտաքին տեսքը և աշխատանքը։
Ընտրացանկի անդամների թաքցնելը կկատարենք վերջում, որպեսզի արտաքին տեսքի կարգավորումը ավելի հեշտ լինի։
Մի փոքր ձևափոխենք արտաքին տեսքը։ Ստորև ներկայացված է CSS կոդ, որի միջոցով կկարգավորենք մեր ընտրացանկի տեսքը։
.list { background-color: #222222; height: 40px; line-height: 2.5; white-space: nowrap; border-bottom: 5px solid #1B9BFF; } .list, .list > li { display: inline-block; } li { list-style: none; } li a { text-decoration: none; color: #ffffff; } .list > li > a { padding: 5px 20px; } .dropdown a { padding: 10px 31px; background-color: #1B9BFF; border-bottom: 1px solid #1B9BFF; } .dropdown li:last-child > a{ border-radius: 0 0 0 3px; } .second-dropdown > li:last-child a{ border-radius: 0 0 3px 0; } .list > li { position: relative; } .dropdown li { position: relative; } .dropdown { position: absolute; top: 40px; left: -40px; } .second-dropdown { left: 99px; position: absolute; top: 0; } .list li:hover { background-color: #1B9BFF; }
Արտաքին տեսքը կարգավորելուց հետո ժամանակն է թաքցնել պատուհանը։ Դրա համար գրում ենք հետևյալ կոդը․
.dropdown { display: none; } .second-dropdown { display: none; }
Այժմ գրենք կոդի այն մասը, որը պատասխանատու է պատուհանի բացվելու և փակվելու համար․
.list > li:hover .dropdown { display: block; } .dropdown li:hover .second-dropdown { display: block; }
Այստեղ ։hover-ը ցույց է տալիս, որ մկնիկի ցուցիչը տեղափոխվել է նշված օբյեկտի վրա։
Կոդերը և աշխատանքը կարող եք տեսնել այստեղ, ինչպես նաև ձևափոխել կոդերը։
Որևէ հարց ունենալու դեպքում կարող եք գրել մեկնաբանություններում։
Շնորհակալություն մեր բլոգից օգտվելու համար։