ჩვენ ვაგრძელებთ სერიას გაკვეთილით მენიუს შესახებ, რომელიც გამოჩნდება. ჰორიზონტალურ მენიუში, რომელიც საკუთარი ხელით ეცემა css-ზე.
თუ აქ უცებ დაკარგეთ ან ეძებდით მენიუს განსხვავებულ განხორციელებას, რომელიც გამოჩნდება, რაჯა გადავა მამის განყოფილებაში.
ეს განყოფილება აღწერს ჰორიზონტალურ მენიუს, რომელიც მოიცავს CSS და HTML.
შექმენით ჰორიზონტალური მენიუ css სიით (ul li სიებში) jQuery-ისა და Javascript-ის გარეშე, ასევე დაწყობილი ცხრილის გარეშე
კოდზე.ჰორიზონტალური მენიუ, რომელიც იშლება სანამ კოდის წერას დავიწყებთ, მენიუსთვის უნდა შევქმნათ HTML შაბლონი.
რაც შეეხება იმას, რომ ჩვენ გვაქვს უნივერსალური მენიუ, მინდა შევქმნა რაც შეიძლება მსგავსი WordPress მენიუს. ჩემი აზრით, ეს არის ერთ-ერთი ყველაზე მარტივი და უნივერსალური HTML მენიუს კოდი. ეს ასე გამოიყურება:
- გოლოვნა
- Ჩვენს შესახებ
- Ჩვენი სერვისები
- ჩვენი #1 მსახური
- ჩვენი მსახური No2
- ჩვენი მსახური No3
- ჩვენი მსახური No4
- სერვისი 5
- ნოვინი
- კონტაქტები
როგორც კოდიდან ხედავთ, ჩვენი მენიუ, რომელიც ჩამოიშლება, განხორციელდება ul და li სიებში. ღერძი ასე გამოიყურება მენიუსთვის CSS სტილის გარეშე:
ვთქვათ, ის გამოიყურება მაამებელი, როგორც საბოლოო სია. შემდეგ ჩვენ უნდა გავაფორმოთ ეს მენიუ დამატებითი CSS სტილებით.
ჰორიზონტალური მენიუ, რომელიც მოდის CSS-ზე CSS სტილები მენიუსთვის, რომელიც ჩამოსაშლელია და არა მხოლოდ ეს, ასევე აუცილებელია. როდესაც გამოჩნდება ჩანართი, იმუშავეთ ფსევდოკლასის საფუძველზე: hover.
ჰორიზონტალური მენიუსთვის, რომელიც ჩამოსაშლელია, ჩვენ გვჭირდება შემდეგი სტილები:
#menu1(პოზიცია: შედარებითი; ჩვენება: ბლოკი; სიგანე: 100%; სიმაღლე: ავტომატური; z-ინდექსი: 10; ) #menu1 ul (პოზიცია: შედარებითი; ჩვენება: ბლოკი; ზღვარი: 0 პიქს; ბალიშები: 0 პიქსელი; სიგანე: 100 %;სიმაღლე:ავტომატური;სიის სტილი:არცერთი;ფონი:#F3A601; მენიუ1 ul li(პოზიცია:შესაბამისად; ჩვენება:ბლოკი; float:მარცხნივ; სიგანე:ავტო; სიმაღლე:ავტო; ) #menu1 ul li a(ჩვენება: ბლოკი; padding: 9px 25px 0px 25px; შრიფტის ზომა:14px; შრიფტი-ოჯახი:Arial, sans-serif;ფერი:#ffffef;ხაზის სიმაღლე:1.3em;ტექსტი-დეკორაცია:არცერთი;შრიფტის წონა:მუქი;ტექსტი -transform:ზედა;სიმაღლე:36px;box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a(ფონი:#EBBD5B; ფერი:#2B45E0; )
ეს არ არის დასასრული, არამედ მხოლოდ CSS-ის ნაწილი მთავარი ჰორიზონტალური მენიუსთვის. შემდეგ ჩვენ დავწერთ სტილებს მენიუს სიისთვის:
#menu1 ul li ul(პოზიცია: აბსოლუტური; ზედა: 36 პიქსელი; მარცხნივ: 0 პიქსელი; ჩვენება: არცერთი; სიგანე: 200 პიქსელი; ფონი: #EBBD5B; ) #menu1 ul li: hover ul(ჩვენება:ბლოკი;) ჩამოსაშლელი მექანიზმი */ # menu1 ul li ul li(float:none; სიგანე:100%; ) #menu1 ul li ul li(display:block;text-transform:none; 100% box-sizing:border-box;border-top:1px solid # ffffff; ფონი:#FDDC96;ფერი:#6572BC;
ღერძი ახლა ულვაშია. გაყიდვების გათავისუფლების მექანიზმი ერთ რიგში.
ნახეთ კანი ამ მენიუდან:
Პატარა 2 (ჰორიზონტალური მენიუ, რომელიც იშლება)
ქვემოთ მოცემულია რობოტის მენიუს ხელმისაწვდომი დემო და მიმოხილვა, რა ჩანს, ასევე შაბათ-კვირის ჩამოტვირთვის ინსტრუქციები. (დემო იხსნება ჩამოსაშლელი სახით ამ გვერდის თავზე, არ არის საჭირო დაწკაპუნება და გახსნა ახალ ფანჯარაში 🙂 ან დათვის ტიკტიკა)
ჰორიზონტალური მენიუ, რომელიც მოიცავს მთელ სიგანეს უმეტესობა თქვენგანი შეიძლება დაბნეული იყოს ასეთი მენიუების გამოყენებით, როგორც ზემოთ ვაჩვენე, წარსულიდან და ნაწილობრივ ფიქრობთ, მინდა ვნახო ახალი განლაგება ასეთი მენიუებით.
დადებს, რომ თქვენ უფრო მეტად დაინტერესდით კონდახით. Html აღარ არის უცვლელი, მაგრამ CSS ღერძი მთლიანად შეიცვალა. შეგიძლიათ უბრალოდ აიღოთ CSS კოდი აქ და ჩასვათ ანიმაციაში, ან უყუროთ დემო რეჟიმში როგორ მუშაობს.
#container( სიგანე:1000px; სიმაღლე:ავტომატური; ზღვარი:0px ავტო; padding-top:10px; ) #menu1(პოზიცია: შედარებითი; ჩვენება:ბლოკი; სიგანე:100%; სიმაღლე:ავტო; z-ინდექსი:10; ) #menu1 ul(პოზიცია: შედარებითი; ჩვენება: ბლოკი; ზღვარი: 0 პიქსელი; შიგთავსი: 0 პიქს; სიგანე: 100%; სიმაღლე: ავტომატური; სიის სტილი: არცერთი; ფონი: #F3A601; ) #menu1 > ul( ტექსტის გასწორება: დასაბუთება; შრიფტის ზომა: 1 პიქსელი; ხაზის სიმაღლე: 1 პიქს; ) #menu1 > ul::after( ჩვენება: inline-block; სიგანე:100%; სიმაღლე:0px; :relative; ჩვენება:inline-block; სიგანე: auto ;სიმაღლე:ავტო;ვერტიკალური გასწორება:ზემოდან;ტექსტის გასწორება:მარცხნივ; ) #menu1 :14px;font-family:Arial, sans-serif;color:#ffffef;ხაზის სიმაღლე:1.3em;ტექსტის გაფორმება:არცერთი ; font-weight:bold;text-transform:uppercase;სიმაღლე:36px; :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a(ფონი:#EBBD5B; ფერი:#2B45E0; ) #menu1 ul li ul(:0px; ჩვენება: არცერთი; სიგანე:ავტო; ფონი:# EBBD5B; white-space:nowrap; ) #menu1 ul li:last-child ul(/* დარჩენილი ელემენტი მიმაგრდება მარჯვენა კიდეზე*/ მარცხენა: auto; მარჯვნივ: 0px; ) ჩამოსაშლელი მენიუ*/ #menu1 ul li ul li (ჩვენება: ბლოკი; სიგანე: ავტომატური; ) #menu1 ul li ul li (ჩვენება: ბლოკი; ტექსტის ტრანსფორმაცია: არცერთი; სიმაღლე: ავტომატური; ყუთის ზომა: სასაზღვრო ყუთი; საზღვრის ზედა: 1px მყარი #ffffff; ) #მენიუ1 # FDDC96; ფერი:#6572BC;
ასევე, ეს მაგალითი განსხვავდება პირველისგან იმით, რომ მენიუ, რომელიც იშლება, თავად წვეთი, ვრცელდება სიგანეში, რაც დამოკიდებულია მენიუს ყველა ელემენტის სიგანეზე.
მენიუს ძალიან გრძელი ელემენტების შემთხვევაში, ეს ვარიანტი შეიძლება არ იყოს ძალიან პრაქტიკული, რადგან სუნი გავრცელდება საზღვრებს მიღმა. ამ ძალაუფლების მოსაპოვებლად საკმარისია ვიცოდეთ „white-space:nowrap;“-ის ძალა. სელექტორზე #menu1 ul li ul და აირჩიეთ იგი.
ქვემოთ შეგიძლიათ ნახოთ დემო ვერსია ან ისიამოვნოთ ჰორიზონტალური მენიუს შაბათ-კვირის ვარიანტებით:
გამყოფების გარეშე მენიუ ასე გამოიყურება. დეტალების დამატება შესაძლებელია HTML-ში ხელით, მაგრამ თუ თქვენ გაქვთ CMS, მაგალითად WordPress, მაშინ მათი ხელით დამატება არც ისე ადვილია.
ჰორიზონტალური მენიუ სექციებით არსებობს ათობით ვარიანტი მენიუს ელემენტებს შორის დაბნეულობის დასამატებლად სუფთა CSS-ის გამოყენებით. მე არ გავამეორებ ვარიანტებს, როგორიცაა:: ადრე ან:: შემდეგ , ან ბევრად უფრო მარტივი საზღვრები-მარცხნივ, საზღვარი-მარჯვნივ.
არის სიტუაციები, როდესაც განლაგება იქმნება ისე სასწაულებრივად, რომ შეუძლებელია jquery-ის გარეშე.
ჩვენს HTML კოდს ძალიან ბევრი აკლია, მაგრამ ჩვენ მხოლოდ თავად jQuery ბიბლიოთეკას და ფაილს, რომელიც შეიცავს შემდეგს:
Დაუყოვნებლივ.
როგორც კი გაიგებთ, თქვენ უნდა შექმნათ ფაილი script-menu-3.jsდა ჩადეთ ეს პატარა კოდი იქ:
$(დოკუმენტი).ready(function())($("#menu1 > ul > li:not(:last-child)").after(" "); ));
ასეთი მენიუსთვის CSS სტილები უნდა მოიხსნას, + ამ ხაზის ღერძი დადეთ ბოლოს:
#menu1 ul li.razd(სიმაღლე:28px; სიგანე:1px; ფონი:#ffffff; margin-top:4px; )
ჰორიზონტალური მენიუ გამყოფებით jQuery-ში ასე გამოიყურება:
შეგიძლიათ უყუროთ დემო რეჟიმში ან ჩამოტვირთოთ ჰორიზონტალური მენიუს შაბლონი ქვემოთ:
ასეთი გადაწყვეტილების უპირატესობებია:
- მენიუ შედგენილია დინამიურად;
- წვდომა გამყოფიდან წერტილამდე, თუმცა;
- დიზაინი კიდევ უფრო ლამაზია.
ჰორიზონტალური მდიდარი მენიუ ჩამოსაშლელი CSS+HTML-ით მას შემდეგ, რაც ბევრი მენიუ გამოჩნდება, როდესაც მათზე გადახვევთ, ცალკე დაყავით ისინი ქვეჯგუფებად:
დამიზნებისას ვარდნით
მესამე დონის აფურთხებით
ჩემს შემთხვევაში მე ვაჩვენე დიდი რაოდენობით CSS მენიუ 3 დონეზე და შემდეგ ვფიქრობ, არ იქნება რთული იმის გარკვევა, თუ რა უნდა გაკეთდეს.
არის ახალი მენიუ, რომელიც ჩნდება ჩამოსაშლელი ველიდან, როდესაც აჩერებთ მას დასაწყებად, ჩვენ ცოტათი უნდა შევცვალოთ ჩვენი HTML. იქნება რამდენიმე რიგი მე-3 დონისთვის:
- გოლოვნა
- Ჩვენს შესახებ
- Ჩვენი სერვისები
- ჩვენი #1 მსახური
- სერვისის დანამატი 1
- სერვისის დანამატი 2
- ჩვენი მსახური No2
- სერვისის დანამატი 3
- სერვისის დანამატი 4
- ჩვენი მსახური No3
- ჩვენი მსახური No4
- სერვისი 5
- ნოვინი
- კონტაქტები
- მიმართულებების რუკა
- ბარათის დანამატი
- დანართი მე-2 ბარათისთვის
- საყელოს ფორმა
#container( სიგანე:1000px; სიმაღლე:ავტომატური; ზღვარი:0px ავტო; padding-top:10px; ) #menu1(პოზიცია: შედარებითი; ჩვენება:ბლოკი; სიგანე:100%; სიმაღლე:ავტო; z-ინდექსი:10; ) #menu1 ul(პოზიცია: შედარებითი; ჩვენება: ბლოკი; ზღვარი: 0 პიქსელი; შიგთავსი: 0 პიქს; სიგანე: 100%; სიმაღლე: ავტომატური; სიის სტილი: არცერთი; ფონი: #F3A601; ) #menu1 > ul( ტექსტის გასწორება: დასაბუთება; შრიფტის ზომა: 1 პიქსელი; ხაზის სიმაღლე: 1 პიქს; ) #menu1 > ul::after( ჩვენება: inline-block; სიგანე:100%; სიმაღლე:0px; :relative;ჩვენება:inline-block; სიგანე:ავტომატური ;height:auto;vertical-align:top;text-align:left; ) #menu1 ul li.razd( სიმაღლე:28px; სიგანე:1px; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px;em;text-decoration:none;font-weight:bold;text-transform:ზედა;სიმაღლე:36px;box-sizing:border-box;) #menu1 ul li> (ფონი: #EBBD5B ; ფერი:#2B45E0; ) #menu1 ul li ul(პოზიცია: აბსოლუტური; ზედა: 36 პიქსელი; მარცხნივ: 0 პიქსელი; ჩვენება: არცერთი; სიგანე: ავტო; ფონი: #EBBD5B; თეთრი სივრცე:nowrap; ) #menu1 > ul > li:last-child > ul(/*ბოლო ელემენტი მიმაგრდება მარჯვენა კიდეზე*/ მარცხენა:auto; მარჯვენა: 0px; ) #menu1 ul li:hover > ul(display:block;)/*ეს ხაზი ახორციელებს ჩამოსაშლელ მექანიზმს*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a ( დისპლეი: ბლოკი; ტექსტის ტრანსფორმაცია: არცერთი; სიმაღლე: ავტომატური; შიგთავსი: 7px 45px; სიგანე:100%; საზღვრის ზედა: 1px მყარი #ffffff; a(ფონი:#FDDC96; ფერი:#6572BC; ) #menu1 ul li ul li ul( ზედა:0px; მარცხნივ:100%; ჩვენება:არცერთი; ფონი:#fddc96; ) #menu1 > ul > li:last-child > ul ul(მარცხნივ:ავტო; მარჯვნივ:100%;) #menu1
jQuery-სთვის ფაილები კოპირებულია თითქოს წინა მხრიდან. თუ გსურთ ამოიღოთ გამყოფები ისე, რომ მენიუ ოდნავ მაინც ლამაზად გამოიყურებოდეს. მათ გარეშე, რა თქმა უნდა, შესაძლებელია.
ღერძი ასე აღმოჩნდა:
მე შევქმენი 2 სკინი ერთში, რათა მეჩვენებინა, როგორ გამოიყურება მარჯვენა ხელით და შუაში.
ქვემოთ შეგიძლიათ ნახოთ დემო ვერსია და ჩამოტვირთოთ მაგალითი:
არის ახალი მენიუ, რომელიც ჩნდება მოცურების ჩამოსაშლელი ღილაკით, როდესაც მასზე დგას Trochi oliya შევიდა სათაურში, ale prokotit, smut code.
ამის არსი მდგომარეობს იმაში, რომ შეიქმნას ჰორიზონტალური მენიუ, რომელიც ეცემა მთელ სიგანეზე დაცემა სრულ სიგანეზე + სიმდიდრე.
მე არ შევცვლი HTML კოდს, შეგიძლიათ აიღოთ იგი წინა კონდახიდან. jQuery-ში განყოფილებები ასევე ამოღებულია.
მხოლოდ CSS შეიძლება შეიცვალოს მთელი:
#container( სიგანე:1000px; სიმაღლე:ავტომატური; ზღვარი:0px ავტო; padding-top:10px; ) #menu1(პოზიცია: შედარებითი; ჩვენება:ბლოკი; სიგანე:100%; სიმაღლე:ავტო; z-ინდექსი:10; ) #menu1 ul(პოზიცია: შედარებითი; ჩვენება: ბლოკი; ზღვარი: 0 პიქსელი; შიგთავსი: 0 პიქს; სიგანე: 100%; სიმაღლე: ავტომატური; სიის სტილი: არცერთი; ფონი: #F3A601; ) #menu1 > ul( ტექსტის გასწორება: დასაბუთება; შრიფტის ზომა: 1 პიქსელი; ხაზის სიმაღლე: 1 პიქს; ) #menu1 > ul::after( ჩვენება: inline-block; სიგანე:100%; სიმაღლე:0px; :relative; ჩვენება:inline-block; სიგანე: auto ;სიმაღლე:ავტო;ვერტიკალური გასწორება:ზემოდან;ტექსტის გასწორება:მარცხნივ;) :28px;სიგანე:1px;ფონი:#ffffff;ზღვარი-ზევით:4px; ) #menu1 ul li a( ჩვენება:ბლოკი; შიგთავსი:9px 45px სერია;ფერი:#ffffef;ხაზის სიმაღლე:1.3em;ტექსტის დეკორაცია:არცერთი;შრიფტის წონა: თამამი;ტექსტის ტრანსფორმაცია:ზედა;სიმაღლე:36პიქს. ;box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a(ფონი:#EBBD5B; ფერი:#2B45E0; ) #menu1 ul li ul(პოზიცია:აბსოლუტური; ზედა :36px; მარცხნივ:0px; ჩვენება:არცერთი; სიგანე:100%;ფონი:#EBBD5B; ) #menu1 > ul > li > ul::after(clear: ორივე; float:none; სიგანე:100%; სიმაღლე:0px ; შინაარსი:" "; ; :ბლოკი; სიგანე:30%; float:მარცხნივ; ) #menu1 ul li ul li a( ჩვენება:ბლოკი; - ყუთი; ფერი:#6572BC; ) #menu1 ul li ul li ul( ზედა :0px; მარცხნივ:100%; ჩვენება:არცერთი; ფონი:#fddc96; z-index:15; ) #menu1 ბლოკი;float:none;width:100%;) #menu1 ul li
მენიუ ასე გამოიყურება: ერთი რამ - საიტს აქვს საკმარისი ადგილი, რადგან მარჯვნივ ბოლო ელემენტის გამოჩენის ადგილი არ არის. ამ პრობლემის გადაჭრა შესაძლებელია: მე-6 შვილი, მაგრამ მე არ ვხდები ქალაქის ქალაქი.
ნახეთ ჰორიზონტალური ბარგის მენიუს დემო ვერსია:
როგორც თქვენ შენიშნეთ: ქვედა ფირფიტა ასევე არის მთელი სიგანე. ღერძი ასე იშლება რამდენიმე ბლოკის გარშემო.
სულ ეს არის ჩემთვის, იმედი მაქვს, თუმცა მარტო ჩემი უკანალი მოგეწონებათ. მადლობას გიხდით პატივისცემისთვის.
მოიტანეთ ქერქი მე და მას 🙂. თუ კარგად წაიკითხეთ პოსტი, მაგრამ არ იცით როგორ შექმნათ თქვენი საკუთარი ჰორიზონტალური მენიუ, რომელიც ჯდება css-ზე, დასვით თქვენი შეკითხვები კომენტარებში ან სწრაფად მოძებნეთ საიტი.
ასევე, მინდა გაგაცნოთ მამაჩემის გვერდი https://site/vypadayushhee-menu/, სადაც ყველა აპლიკაცია და სხვადასხვა ტიპის მენიუა თავმოყრილი.
მენიუ კანის საიტის უცნობი ნაწილია, ისევე როგორც კანი. მენიუ (ან ნავიგაცია) საშუალებას გაძლევთ სწრაფად გადახვიდეთ საიტის მთავარ განყოფილებებში, რაც მსგავსია წიგნების სივრცეში. მსგავსება განსაკუთრებით შესამჩნევია საიტის რუკებზე (სხვადასხვა სახის ნავიგაცია):
მენიუ შეიძლება განსხვავებულად გამოიყურებოდეს. შესაძლოა ჰორიზონტალური
ვერტიკალური
ბაგატორი
მენიუ შეიძლება იყოს კიდევ უფრო მრავალფეროვანი და შეიძლება წარმოდგენილი იყოს კიდევ უფრო განსხვავებული გზით: ცხრილები, ბლოკები, მარტივი ჩანაწერები, შესაძლოა ჩანაწერები
...შეგიძლიათ გამოიცნოთ ბევრი „ფრთხილი“ მეთოდი და მათი უმეტესობა შეესაბამება ბლოკის (მაგიდის გარეშე) განლაგების პრინციპებს. პროფესიულ წრეებში, ვფიქრობ, მნიშვნელოვანია, რომ ნავიგაცია ეფუძნებოდეს შეუკვეთებელ სიებს.< >і< >.
რატომ უნდა გამოიყენოთ ul ნავიგაციაში? პირველი, რაც უნდა ავხსნათ, არის მოსვლა, რადგან უბრალოდ ლოგიკურია ფიქრი: მენიუ სავსეა პოზილანებით (სექციებით). და თუ უბრალოდ არ ფიქრობთ, არამედ შეხედეთ ლექსიკონს, მაგალითად, ოჟეგოვი:
ცხადი ხდება, რომ ჩვენ სწორ გზაზე ვართ (მათთვის, ვისაც დაავიწყდა, სემანტიკური კოდი ლოგიკური (ცვლილების უკან) სწორი კოდის წინ არის).
როგორ დავიტანჯოთ ეჭვები, გაბრაზებული ვთხოვოთ დახმარება ხელისუფლებისგან. W3C სიების შესახებ:
სიები შეიძლება იყოს შეცდომაში შემყვანი: - მწყობრიდან გამოსული
- შეკვეთა overflow
- ნავიგაცია
- დანიშვნა
მენიუ სურათებით
ნავიგაცია ( სიის სტილი: არცერთი; /* მარკერები სასურველია */ ზღვარი: 30 პიქსელი; ) .navigation li ( float: მარცხნივ; /* სიის ელემენტები არჩეულია ერთ რიგში */ მარჟა-მარჯვნივ: 15 პიქსელი; /* მენიუზე წვდომა ელემენტი აუცილებელია არ გაბრაზდე */) .ნავიგაცია li a ( ჩვენება: ბლოკი; ტექსტის გასწორება: ცენტრში; padding-top: 100px; * ფონი მაღალია და ცენტრშია */ ფონზე-გამეორება: არ განმეორდეს; სიგანე : 200px;/* ზომები მითითებულია, რომ სურათები გამოსახული უნდა იყოს სრულად */ სიმაღლე: 50px; სხვაგვარად განმარტავს ბლოკის მოდელს */ სიმაღლე: 150px; ) .navigation .chrysler a (background-image: /menu-audi. jpg); ) .ნავიგაცია .bugatti a ( background-image: url(path-to/menu-bugatti.jpg); ) .
ამ გაკვეთილიდან დაწყებული, ჩვენ დავიწყებთ საიტის განლაგებას ნულიდან პოპულარული ბრტყელი სტილის გამოყენებით. ეს თემა ძალიან ვრცელია და მას ერთზე მეტ გაკვეთილს მივუძღვნით. რას ნიშნავს პრაქტიკული?
გასაგებია, რომ თქვენ შტატგარეშე ბირჟაზე უარი გითხარით ცალმხრივი საიტის განლაგების მოთხოვნაზე. დეპუტატმა მოგცათ განლაგება .psd-ის სახით და გთხოვეთ HTML მხარის განათება. განლაგების დიზაინერმა ასევე უნდა დაჭრას განლაგება სურათებად, მაგრამ ჩვენ გამოვტოვებთ ამ ნაბიჯს, დანარჩენი დრო Photoshop-ზე დაიხარჯება. ამ თემაზე შეგიძლიათ დამოუკიდებლად შეისწავლოთ Photoshop-ის ძირითადი გაკვეთილები.
დეპუტატი თურმე კეთილი ადამიანი აღმოჩნდა და განლაგება მოგვცა და მოგვიანებით სურათებიც ამოჭრა. HTML გვერდის შესაქმნელად გვჭირდება: .psd განლაგება, საქაღალდე სურათებით, Photoshop, Notepad++ და ბრაუზერი.
ჩვენ ვსაუბრობთ განლაგებაზე, მაგრამ ეს მხოლოდ სურათია, რომლითაც შეგვიძლია შევქმნათ სრულფასოვანი HTML გვერდი.
გთხოვთ გაითვალისწინოთ, რომ ჩვენი განლაგება არის კლასიკური ბრტყელი დიზაინი. ბრტყელი დიზაინი - ეს ნიშნავს "ბრტყელს", აქ თქვენ არ მიიღებთ მოცულობითი ჩრდილები, გრადიენტები და სხვა "ზარები და სასტვენები".
ჩვენ ვხსნით განლაგებას Photoshop-ში და ვიღებთ ყველა საჭირო ინფორმაციას - ფერს, შრიფტს, ზომას და ვიწყებთ კოდის წერას, ჯერ გადავდივართ საიტის სათაურზე, რომელიც შედგება ლოგოსა და ნავიგაციის მენიუსგან. გასაგებია, რომ ჩვენი საიტი იქნება ადაპტირებული ნებისმიერი მოწყობილობისთვის ან ცალკე ეკრანისთვის, ამიტომ ყველა ზომა მითითებულია % და em-ში.
ვებსაიტის სათაურის განლაგება მოდით შევქმნათ HTML მხარე და ჩვენი სათაურის დეტალური განლაგება. სათაურის ნაცვლად ჩაწერეთ დაწყვილებული სათაურის ტეგის შუაში.
- გოლოვნა
- პორტფოლიო
- Ჩემს შესახებ
- კონტაქტი
CSS სტილის გარეშე, სათაური სრულიად განსხვავებულად გამოიყურება, როგორც უნდა გამოიყურებოდეს. style.css ფაილში ჩვენ დავწერთ სელექტორებს სხვადასხვა ავტორიტეტებისთვის ისე, რომ სათაური შეესაბამებოდეს განლაგებას.
მოდით შევხედოთ ძირითად პუნქტებს. ლოგო და ნავიგაციის მენიუ გამოჩნდება ერთ რიგში. float in div ლოგოთი დაყენებულია float: მარცხენა; ნავიგაციის მენიუ ახლა ლოგოს მარჯვნივ იქნება. მენიუს ელემენტები ნაჩვენებია ერთ რიგში - ჩვენება: inline-block; თქვენ შეგიძლიათ გაასუფთავოთ შეფუთვა კოდში ცარიელი div-ის ჩასმით, სტილებში აშკარად ასე იწერება - .clear(clear:both;)
ვებსაიტის სათაურის კოდი style.css ფაილისთვის:
სხეული (
შრიფტი-ოჯახი: "ლატო", ვერდანა;
შრიფტის ზომა: 100%;
ფონი: #fff;
}
.გახვევა
{
ზღვარი: 0 ავტო;
სიგანე: 70%; /* გადადით თქვენი ბრაუზერის ფანჯარაში */
}
სათაური (
padding: 1.3em 0em; /* ველები ტექსტის გვერდით */
}
.ლოგო(
float: მარცხენა; /* ლოგოს გარშემო შემოიხვიე */
}
.ლოგო ა (
ჩვენება: ბლოკი; /* გადანაწილება ბლოკად */
}
.nav(
float: მარჯვნივ; /* ლოგოს გარშემო შემოიხვიე */
margin-top: 0.82em;
}
.nav > ul > li (
ჩვენება: inline-block; /* მწკრივის ბლოკზე გადანაწილება */
}
.nav > ul > li.active a(
ფონი: #d0a5a5;
ფერი: #ffffff;
}
.nav > ul > li > a (
ჩვენება: ბლოკი;
font-family: "Lato", sans-serif;
შრიფტის ზომა: 1.1em;
ტექსტის ტრანსფორმაცია: დიდი;
padding: 0.5em 1em;
ფერი: #444;
-webkit-გარდამავალი: 0.9s; /* გლუვი გადასვლა */
-moz-გარდამავალი: 0,9წმ;
-o-გარდამავალი: 0,9წმ;
გარდამავალი: 0.9s;
}
.nav > ul > li > a:hover (
ფერი: #fff;
ფონი: #d0a5a5;
}
HTML კოდი ვებსაიტის სათაურის განლაგებისთვის:
პაგ "ველის" პორტფოლიო
- გოლოვნა
- პორტფოლიო
- Ჩემს შესახებ
- კონტაქტი
/* მომრგვალებული */
ვებსაიტის ნულიდან განლაგების პროცესში ჩვენ ვხსნით მზა სათაურს ვებსაიტისთვის.
თუ თქვენი ვებ – გვერდი არ არის გარშემორტყმული ერთი ვებ – გვერდით, შეგიძლიათ განიხილოთ ნავიგაციის ზოლის (მენიუ) დამატება. მენიუ არის ვებსაიტის განყოფილება, რომელიც ეხმარება მომხმარებლებს ნავიგაციაში. ნებისმიერი მენიუ არის შეტყობინებების სია, რომლებიც მიდიან საიტის შიდა გვერდებზე. საიტზე ნავიგაციის ზოლის დასამატებლად უმარტივესი გზაა პერსონალური მენიუს შექმნა CSS და HTML გამოყენებით.
ვერტიკალური მენიუ ვერტიკალური მენიუს შექმნის პირველი ნაბიჯი იქნება ბურთულების სიაში. ჩვენ ასევე უნდა შეგვეძლოს სიის იდენტიფიცირება, ამიტომ დავამატებთ სხვა id ატრიბუტს იდენტიფიკატორით „navbar“. ტყავის ელემენტი
ჩვენი სია იმსახურებს ერთ შეტყობინებას:
- გოლოვნა
- ნოვინი
- კონტაქტები
- Ჩვენს შესახებ
ჩვენი დღევანდელი დღე მდგომარეობს სიაში ჩამოვარდნილ სტილებთან, რომლებიც დამონტაჟებულია ტანსაცმლის უკან. ჩვენ უნდა მივიღოთ გარე და შიდა შეყვანები თავად სიიდან და მარკერები სიის ელემენტებიდან. შემდეგ ჩვენ დავაყენებთ საჭირო სიგანეს:
#navbar (ზღვარი: 0; padding: 0; list-style-type: none; სიგანე: 100px; )
ახლა დროა თავად გზავნილის სტილიზაცია. ჩვენ მათ დავუმატებთ ფონის ფერს, შევცვლით ტექსტის პარამეტრებს: შრიფტის ფერი, ზომა და სიმკვრივე, ვირჩევთ აქცენტებს, დავამატებთ მცირე შეჭრას და გადავაადგილებთ ეკრანს. ელემენტი მწკრივიდან ბლოკამდე. დამატებითი ინფორმაცია დაემატა სიის ელემენტებს მარცხენა და ქვედა ჩარჩოებში.
ჩვენი ცვლილებების ყველაზე მნიშვნელოვანი ნაწილია ბლოკზე მცირე ელემენტების გადანაწილება. ახლა ჩვენი შეტყობინებები იკავებს სიის ერთეულების მთელ ხელმისაწვდომ ადგილს, ამიტომ შეტყობინებაზე გადასასვლელად აღარ გვჭირდება კურსორის ზუსტად გადატანა ტექსტზე.
#navbar a (ფონის ფერი: #949494; ფერი: #fff; padding: 5px; ტექსტის დეკორაცია: არცერთი; შრიფტის წონა: თამამი; მარცხნივ: 5px მყარი #33ADFF; ეკრანი: ბლოკი; ) #navbar li ( მარცხნივ საზღვარი: 10 პიქსელი მყარი #666; საზღვრის ქვედა ნაწილი: 1 პიქსელი მყარი #666;
ჩვენ გავაერთიანეთ ყველა კოდი, მეტი აღწერა, ერთ მაგალითში, ახლა, ცდის ღილაკზე დაწკაპუნებით, შეგიძლიათ გვერდით გადახვიდეთ მაგალითით და ნახოთ შედეგი:
დოკუმენტის სათაური #navbar ( ზღვარი: 0; შიგთავსი: 0; სიის სტილის ტიპი: არცერთი; სიგანე: 100 პიქსელი; ) #navbar li (საზღვარი-მარცხნივ: 10px მყარი #666; სასაზღვრო ქვედა: 1px მყარი #666; ) # navbar a (ფონის ფერი: #949494; ფერი: #fff; padding: 5px; ტექსტის დეკორაცია: არცერთი; შრიფტის წონა: თამამი; მარცხნივ: 5px მყარი #33ADFF; ეკრანი: ბლოკი; )
- გოლოვნა
- ნოვინი
- კონტაქტები
- Ჩვენს შესახებ
Სცადე "როდესაც მაუსის კურსორს მენიუს ერთეულზე ატარებთ, თქვენი ხედვა შეიძლება შეიცვალოს და მოიპოვოს ქისტუვაჩის პატივისცემა. თქვენ შეგიძლიათ შექმნათ ეს ეფექტი დამატებითი ფსევდო კლასის გამოყენებით: hover.
მოდით დავუბრუნდეთ ვერტიკალურ მენიუს, რომელიც ადრე ვნახეთ და დავამატოთ შემდეგი წესი სტილის ფურცელს:
#navbar a:hover (ფონის ფერი: #666; საზღვრის მარცხენა: 5px მყარი #3333FF; ) სცადეთ »
ჰორიზონტალური მენიუ უპირველეს ყოვლისა, ჩვენ შევხედეთ ვერტიკალურ ნავიგაციის პანელს, სადაც ყველაზე ხშირად შეგიძლიათ საიტებზე ნავიგაცია მარცხნივ ან მარჯვნივ ძირითადი შინაარსის ზონაში. თუმცა, ნავიგაციის მენიუ ასევე ხშირად ჰორიზონტალურად არის ნაჩვენები ვებ გვერდის ზედა ნაწილში.
ჰორიზონტალური მენიუ შეიძლება შეიქმნას ორიგინალური სიის დამატებითი სტილიზაციის გამოყენებით. ელემენტების დენის ჩვენება
თქვენ უნდა შეიყვანოთ მნიშვნელობები ხაზში, რათა სიაში ელემენტები სათითაოდ დაემატოს.
მენიუს ელემენტების ჰორიზონტალურად დასაყენებლად, ჯერ შეგიძლიათ შექმნათ მარკირების სია ელემენტებით:
- გოლოვნა
- ნოვინი
- კონტაქტები
- Ჩვენს შესახებ
მოდით დავწეროთ რამდენიმე წესი ჩვენი სიისთვის, რომელიც ამოიღებს სტილს, რომელიც გამოიყენება ნივთების სიებისთვის, და ხელახლა მიაკუთვნებს სიაში არსებულ ელემენტებს ბლოკებიდან მწკრივებში:
#navbar ( ზღვარი: 0; padding: 0; list-style-type: none; ) #navbar li ( ჩვენება: inline; ) სცადეთ »
ახლა ჩვენ მოკლებული ვართ რაიმე მნიშვნელოვან სტილს ჩვენი ჰორიზონტალური მენიუსთვის:
#navbar ( ზღვარი: 0; padding: 0; list-style-type: none; კონტური: 2px მყარი #0066FF; საზღვრის რადიუსი: 20px 5px; სიგანე: 550px; ტექსტის გასწორება: ცენტრში; ფონის ფერი: #33ADFF; ) #navbar a ( ფერი: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; სიგანე: 100px; ) #navbar a:hover (საზღვრის-რადიუსი: 20px 5px ; ფონის ფერი: #0066FF; ) სცადეთ »
აქტიური მენიუ მენიუ, რომელსაც ჩვენ შევქმნით, მოიცავს მთავარ სანავიგაციო შეტყობინებებს, რომლებიც განლაგებულია ჰორიზონტალურ სანავიგაციო პანელში, და ქვეპუნქტებს, რომლებიც ნაჩვენებია მხოლოდ მას შემდეგ, რაც მაუსის კურსორი გადაინაცვლებს მენიუს ერთეულზე, ნებისმიერი წერტილის და ქვეპუნქტების დამატებამდე.
მე მინდა გთხოვოთ, რომ შექმნათ ჩვენი მენიუს HTML სტრუქტურა. ძირითადი ნავიგაციის შეტყობინებები განთავსდება ბურთულების სიაში:
- გოლოვნა
- ნოვინი
- კონტაქტები
- Ჩვენს შესახებ
ქვეპუნქტები განთავსდება მიმდებარე სიაში, მათ შორის ელემენტში
, რომელიც არის შურისძიება მამის გზავნილზე ქვეპუნქტებისთვის. ახლა ჩვენ შეგვიძლია დავინახოთ ჩვენი მომავალი სანავიგაციო პანელის მკაფიო სტრუქტურა:
- გოლოვნა
- ნოვინი
- კონტაქტები
- მისამართები
- ტელეფონი
- ელფოსტა
- Ჩვენს შესახებ
Სცადე "ახლა დავიწყოთ CSS კოდის წერა. დასაწყისისთვის, თქვენ უნდა დაურთოთ ქვეპუნქტების სია დამატებით ეკრანს: არცერთი, რათა ისინი არ იყოს ნაჩვენები ვებ გვერდზე მთელი საათის განმავლობაში. ქვეპუნქტების საჩვენებლად, ჩვენ გვჭირდება ეს ელემენტზე გადასვლისას
ბლოკის ელემენტებზე ახალი ტრანსფორმაციების სია:#navbar ul ( ჩვენება: არცერთი; ) #navbar li:hover ul (ჩვენება: დაბლოკვა; )
ორივე სიაში ვირჩევთ განლაგების უკან მოთავსებულ მარკერებს. სიის ელემენტები ნავიგაციის ინსტრუქციებით მძლავრად ცურავს, ქმნიან ჰორიზონტალურ მენიუს, ხოლო სიის ელემენტები, რომლებიც შეიცავს ქვეპუნქტებს, დაყენებულია float: none; ისე რომ სუნი ერთმანეთის მიყოლებით გაჩნდეს.
#navbar, #navbar ul ( ზღვარი: 0; padding: 0; list-style-type: none; ) #navbar li ( float: მარცხენა; ) #navbar ul li ( float: none; )
შემდეგ ჩვენ უნდა ვიმუშაოთ ისე, რომ ჩვენმა ქვემენიუმ, რომელიც ჩამოდის, არ გადაანაცვლოს ნავიგაციის პანელის ქვეშ მოთავსებული შინაარსი, ქვემოთ. ამ მიზნით ჩამოვთვალოთ ნივთები სიის პოზიციაზე: ნათესავი; და ქვეპუნქტების დასამატებელი სია პოზიცია: აბსოლუტური; და ზედა სიძლიერე ემატება მნიშვნელობებს 100%, ისე, რომ აბსოლუტურად განლაგებული ქვემენიუ გამოჩნდება ზუსტად ისე, როგორც მოთხოვნილი.
#navbar ul ( ჩვენება: არცერთი; პოზიცია: აბსოლუტური; ზედა: 100%; ) #navbar li ( float: მარცხნივ; პოზიცია: შედარებითი; ) #navbar ( სიმაღლე: 30px; ) სცადეთ »
მამათა სიის სიმაღლე მიზანმიმართულად დაემატა, რადგან ბრაუზერები არ იღებენ მცურავ შინაარსს ელემენტად, სიმაღლის დამატების გარეშე, ჩვენს სიას უგულებელყოფს ბრაუზერი და შიგთავსი, რომელიც მოჰყვება სიას ჩვენს მენიუში გადახვევისას.
ახლა ჩვენ აღარ მოგვიწევს ჩვენი სიებისა და მენიუების სტილისტიკა, რომლებიც მზად იქნება:
#navbar ul ( ჩვენება: არცერთი; ფონის ფერი: #f90; პოზიცია: აბსოლუტური; ზედა: 100%; ) #navbar li:hover ul ( ჩვენება: დაბლოკვა; ) #navbar, #navbar ul ( ზღვარი: 0; padding: 0; list-style-type: none; ) #navbar ( სიმაღლე: 30px; background-color: #666; padding-left: 25px; min-width: 470px; ) სიმაღლე: 100%; ) #navbar li a ( ჩვენება: ბლოკი; padding: 6px; სიგანე: 100px; ) #navbar li:hover (ფონის ფერი: #f90; ) #navbar ul li:hover (ფონის ფერი: #666; )
გამარჯობა, ჩემი ბლოგის მკითხველებო! დღევანდელი სტატია კიდევ უფრო საინტერესო იქნება განლაგების დიზაინერებისთვის. რადგან დღეს ჩვენ ვიქნებით თქვენთან ერთად მარტივი ჰორიზონტალური მენიუს შესაქმნელად. სანამ პირდაპირ განლაგებაზე გადავალთ, მინდა ვთქვა ორიოდე სიტყვა მათზე, ვინც გადაწყვიტა სტატიის თემის არჩევა.
სინამდვილეში, ყველაფერი მარტივია, როდესაც ვიფიქრე საიტის დასკვნითი გაკვეთილის თემაზე, დავიწყე ფიქრი და გაანალიზება ჩემი ცოდნის განლაგების დიზაინის შესახებ, რის გამოც მომიწია დაბრკოლება, რომ გავმხდარიყავი განლაგების დიზაინერი, რაც ყველაზე ჭკვიანურად მიჭირდა ყველა გალუსისთვის და ა.შ. მთელ ამ საკვებს საკუთარ თავზე ვდებ, რათა უფრო მცოდნე გავხდე, რითი ისარგებლოს ადამიანებს, როდესაც ისინი იწყებენ კარიერას, როგორც განლაგების დიზაინერს. და განსაკუთრებით ჩემთვის, რაც დავიწყე layout-ის აკრეფა, ყველაზე მეტად მაინტერესებდა სხვადასხვა მენიუს განლაგება, განსაკუთრებით მაშინ, როდესაც საქმე მდიდარ მენიუს ეხება. დღეს კი საუბარია მენიუზე და უფრო კონკრეტულად ჰორიზონტალურ მენიუზე. ასე რომ, დავიწყოთ!
დავიწყოთ ჩვენი ჰორიზონტალური მენიუს განლაგება! როგორც ადვილად მიხვდებით, მანამდე უნდა შევქმნათ HTML გვერდი სტანდარტული განლაგებით და მის წინ დავამატოთ სტილის ფაილი. მე არ განვიხილავ ამ საკითხს, რადგან დარწმუნებული ვარ, რომ თქვენ ახლავე არ იწყებთ, ამიტომ ნათლად შემიძლია გითხრათ, რომ სხეული და თავი და როგორ არის დაკავშირებული სტილები. აქვე ვიტყვი, რომ css ფაილში ჩვენი მენიუს სტილების გარდა, დავწერ უმარტივეს გადატვირთვას, რათა გადავტვირთოთ სტილები და მივაღწიოთ ერთნაირი გარეგნობის მიღწევას ყველა ბრაუზერში. ასე გამოიყურება ჩემი უმარტივესი გადატვირთვა:
ჩვენ ჯერ არ ვისაუბრებთ სტილის გადატვირთვაზე, რადგან არსებითად ეს სხვა სტატიის თემაა, ერთადერთი რაც თქვენ უნდა იცოდეთ აღწერილობის კოდის შესახებ არის ის, რომ ეს კოდი საჭიროა გვერდის ყველა ელემენტისთვის, რომელსაც ჩვენ დავწერთ, გადავაყენებთ ზღვრისა და შიგთავსის გარდა, ჩვენ უნდა ვიმუშაოთ იმისათვის, რომ ჩვენი გვერდი ყველა ბრაუზერში ერთნაირად გამოიყურებოდეს.
აბა, რა გვაქვს ამ ეტაპზე? ჩვენ გვაქვს html გვერდი სტანდარტული განლაგებით:
ჰორიზონტალური მენიუ
ჩვენ გვაქვს სტილის ფაილი (ან style.css) დაკავშირებული ამ გვერდზე, ამის ნაცვლად:
შემდეგი ნაბიჯი იქნება ჩვენი მენიუსთვის HTML მარკირების შექმნა.
მენიუს განლაგების შექმნა ჩვენი აზრით, ჩვენ განვიხილავთ ახალ ტეგს, რომელიც გამოჩნდა HTML5-ში, გირჩევთ, დაუყოვნებლივ მიიღოთ ახალი ტეგები, რათა მიჰყვეთ ტენდენციას და სტანდარტს. მათ აქვთ საკუთარი განლაგება, ამიტომ ძალიან ადრეა, თქვენ ჯერ კიდევ მოგიწევთ მათზე გადასვლა, ისევე როგორც განლაგების დიზაინერები გადავიდნენ ცხრილური განლაგებიდან ბლოკის განლაგებაზე, ასეთი რეალობა ჯობია მიჰყვეთ ტენდენციას!
და რადგან ჩვენ უკვე ვსაუბრობთ ახალი HTML 5 ტეგების მხარდაჭერაზე, რათა არ გვქონდეს პრობლემები ძველ ბრაუზერებში, ჩვენი დოკუმენტი უნდა შეიცავდეს სპეციალურ ბიბლიოთეკას - html5shiv. შეეცადეთ არ ჩადოთ იგი
თქვენი გვერდის განყოფილების ხელმძღვანელი შემდეგი კოდით:
ყველა შემდეგი ტეგი (და სხვა ტეგი, რომელიც შედის HTML5-ში) ჩვეულებრივ გაანალიზდება ძველი ბრაუზერების მიერ.
მოდით მივუბრუნდეთ ჩვენს მარკირებას. შემდეგი, ჩვენ უნდა ჩავსვათ მარკირების სია ჩვენს ტეგში; ის ასე გამოიყურება:
- გოლოვნა
- Ჩვენს შესახებ
- პორტფოლიო
- ბლოგი
- კონტაქტები
ასე რომ, შენიშვნასთან ერთად, ჩვენ შევაჩერეთ დაწყების საათი სტილის დაწერისთანავე, ასე რომ, ახლა ჩვენი მენიუ ასე არ არის:
წერის სტილები ჩვენი ჰორიზონტალური მენიუსთვის ასე რომ, უპირველეს ყოვლისა, მენიუს განლაგებისას, ჩვენ უნდა დავამატოთ მარკერები სიაში, ეს აშკარად არ გვჭირდება, ამიტომ ასე უნდა მოვიქცეთ:
Ul (სიის სტილი: არცერთი;)
ამის შემდეგ ჩვენი მენიუ ასე გამოიყურება:
მე ნამდვილად არ მომწონს, რომ ჩვენი მენიუ ბრაუზერის კიდეებზეა მიმაგრებული, მოდით გამოვასწოროთ:
ამ კოდით დავაყენეთ ჩვენი მენიუს სიგანე, მივეცით 50 პიქსელი წინ და ქვედა ნაწილში და გადავიყვანეთ ცენტრში. თუ არ იცით, რა არის ბლოკის ელემენტის სიგანე, მაშინ იმისათვის, რომ ეს ელემენტი მკაცრად გადავიტანოთ ცენტრში, მხოლოდ მისი გარე ზღვარი (ზღვარი) მარჯვნივ და მარცხნივ უნდა დავაყენოთ ავტო მნიშვნელობებზე.
შემდეგ ეტაპზე, ჩვენ უნდა გავხადოთ ჩვენი მენიუ ჰორიზონტალურად და ყურადღება გავამახვილოთ საჭირო ელემენტებზე.
float: მარცხნივმენიუ li ( float: მარცხნივ; )
ჩვენი მთელი მენიუ ჰორიზონტალური გახდა.
თუ ვერ აცნობიერებთ, რომ მოგკლავენ და ცდილობთ თავი დააღწიოთ მცურავი დენის ძალას, გირჩევთ მოიძიოთ გუგლში ინფორმაცია ამ სიმძლავრის შესახებ და გთხოვთ წაიკითხოთ იგი
თქვენ არ შეგიძლიათ ამის გარეშე განლაგების ყველა მხარეს, ამას ნამდვილად გეუბნებით. აბა, გავაგრძელოთ!
მენიუ li а( ჩვენება: ბლოკი;/* აირჩიეთ ბლოკის ელემენტი */ padding:12px 20px;/* აირჩიეთ შიდა ჩანაწერი */ ტექსტის დეკორაცია: არცერთი; /* აირჩიეთ ქვედა სავარძელი */ ფერი:#fff;/* აირჩიეთ ფერი დააყენეთ ფერი მუქზე */ ფონი:#444;/* ფონის ფერი მუქი */ font:14px Verdana, sans-serif;/* დააყენეთ შრიფტის ზომა და სახელი */ )
აქ ერთ-ერთი ყველაზე მნიშვნელოვანი წესია ჩვენება: ბლოკი;. მარჯვნივ, რადგან შეტყობინება იგზავნება მცირე ელემენტებში, ხოლო მცირე ელემენტებზე წვდომა სხვადასხვა ბრაუზერში ძნელია, აუცილებელია შეტყობინების შექმნა ბლოკის ელემენტით და მხოლოდ ამის შემდეგ დააყენოთ მასთან დაკავშირებული ძალა. გარედან ან შიდადან. შესასვლელები. არ მინდა ამ ინფორმაციის გადატვირთვა, მაგრამ დროთა განმავლობაში რეალურ მაგალითებზე გაიგებთ, რომ ასეთი აქცენტი სავარაუდოდ აქ განვითარდება.
ვნახოთ რა გვაქვს, მოდი განაახლოთ ბრაუზერის მხარე და მივდივართ!:
როგორც ხედავთ, ცუდად გამოიყურება, შეიძლება ითქვას, რომ პრინციპში ჩვენი მენიუ მზად არის. ერთადერთი, რაც უნდა გაკეთდეს, არის შუქის დაყენება ჰოვერირებისას, მაგრამ ასევე უფრო მარტივი გარეგნობის მენიუს შექმნა ელემენტებს შორის გამყოფებით.
დავასრულოთ ცალ-ცალკე:
მენიუ li(საზღვარი-მარცხნივ: 1px მყარი #666; ) .menu li:first-child(საზღვარი-მარცხნივ:არცერთი; )
რას ვაკეთებდით აქ? მაგრამ ჩვენ ყველაფერს ძალიან მარტივად ვაყენებთ ჩვენს ქულებს (
) მარცხენა ხელის კორდონის ზომა 1px და ფერი #666;. ვინაიდან არსებობს selector.menu li:first-child, ჩვენ გვაქვს სპეციალური ფსევდოკლასი, რომელიც საშუალებას გაძლევთ აირჩიოთ სიის პირველი შვილი ელემენტი. ასევე გირჩევთ წაიკითხოთ მოხსენება ინტერნეტში ფსევდო-კლასების შესახებ, თქვენ გაიგებთ ბევრ სასარგებლო ინფორმაციას.
კიდევ ერთხელ მიკვირს ის, რაც ჩვენგან გამოვიდა:
ჩემი აზრით, ცალ-ცალკე ბევრად ლამაზია.
მენიუ a:hover(ფონი:#888;)
მე წარმოგიდგენთ სპეციალურ ფსევდო კლასს, ამჯერად - ატარეთ, ჩვენ ვაყენებთ შეტყობინების ფერს, როდესაც კურსორი მასზე დევს, გასაოცრად:
მე ძალიან მაგარი ვარ 🙂, იმედია თქვენც ისეთივე მენიუ გაქვთ, როგორც ჩემი.
ეს არის ამ გაკვეთილის დასასრული, მე უკვე დარწმუნებული ვარ, რომ დაიბადებით და ახლა თქვენ იცით, როგორ შექმნათ მარტივი ჰორიზონტალური მენიუ სუფთა html და css-ში. რა თქმა უნდა, ჩვენ შევქმენით ერთი დონის მენიუ, ცოტა უფრო რთული იქნება ეზოს მენიუდან (ჩასმული სიით), მაგრამ ეს უკვე სხვა გაკვეთილის თემაა, რაც მე მაქვს. შემოდი რადიუმს მოგცემ!
