06 01
როგორ შევქმნათ ჩადგმული ნავიგაცია CSS და არა სურათები
ნავიგაცია ვებ გვერდებზე არის სიის ფორმა და tabbed ნავიგაცია ჰორიზონტალური სიის მსგავსია. ეს საკმაოდ მარტივია შექმნა ჰორიზონტალური tabbed ნავიგაცია CSS, მაგრამ CSS 3 გვაძლევს კიდევ რამდენიმე ინსტრუმენტი, რათა მათ გამოიყურება კი გავალამაზოთ.
ამ tutorial მიიღებს თქვენ მეშვეობით HTML და CSS საჭიროა შექმნათ CSS Tabbed მენიუ. დააჭირეთ ბმულს, თუ როგორ გამოიყურება იგი.
ეს tabbed მენიუ არ იყენებს სურათებს , მხოლოდ HTML და CSS 2 და CSS 3. ადვილად შეიძლება რედაქტირებული დაამატოთ მეტი ჩანართები ან შეცვალონ ტექსტი მათში.
ბრაუზერის მხარდაჭერა
ეს tab მენიუ იმუშავებს ყველა ძირითად ბრაუზერში . Internet Explorer არ გამოჩნდება მრგვალ კუთხეებში, მაგრამ სხვაგვარად გამოჩნდება ჩანართები Firefox, Safari, Opera და Chrome.
06 06
დაწერეთ თქვენი მენიუს სია
ყველა სანავიგაციო მენიუ და ჩანართები მართლაც მხოლოდ უწესრიგო სიაა. ასე რომ, პირველი რაც გსურთ, არის დაწერილი უწესრიგო სია ბმულები, სადაც გსურთ თქვენი tabbed ნავიგაცია წავიდეთ.
ამ ტერმინს ვარაუდობს, რომ თქვენ HTML თქვენს ტექსტურ რედაქტორში წერს და რომ თქვენ იცით, სად განთავსდება HTML თქვენს მენიუში თქვენს ვებ გვერდზე.
დაწერეთ თქვენი უწესრიგო სია მსგავსი:
- class = "tablist">
- CSS 3
- id = "მიმდინარე"> ჩანართები
- იყიდება
- მენიუები
თქვენ შეამჩნევთ, რომ კოდი ორ რამეს მოუწოდებს: კლასი = "tablist" და id = "მიმდინარე". პირველი საჭიროა . თუ თქვენ არ დააყენებთ tablist კლასის თქვენს უწესრიგო სიაში, ჩანართების არ იმუშავებს. მეორე არის სურვილისამებრ. განათავსეთ id = "მიმდინარე", რომელი tab- ს გსურთ ისარგებლოს ამ გვერდზე. მე, როგორც წესი, გამოვიყენებ ამ გვერდს, რომელიც მე ვარ, მაგრამ შეგიძლიათ გამოვიყენოთ ყველაზე მნიშვნელოვანი ჩანართის ჩვენება. ან შეგიძლიათ წაშალოთ იგი მთლიანად.
06 06
დაიწყეთ შენი სტილი ფურცლის რედაქტირება
თქვენ შეგიძლიათ გამოიყენოთ გარე სტილი ან შიდა სტილის ფურცელი . ნიმუში მენიუ გვერდი იყენებს შიდა სტილის ცხრილს დოკუმენტის
.პირველი ჩვენ სტილი სუფევს
ეს არის ის, სადაც ჩვენ ვიყენებთ კლასს tablist. იმის ნაცვლად, რომ შეიმუშაოს UL tag, რომელიც სტილის ყველა უწესრიგო სიები თქვენს გვერდზე, თქვენ უნდა სტილი მხოლოდ UL კლასის. tablist ასე რომ პირველი შესვლის თქვენი CSS უნდა იყოს:
.tablist {}მე მომწონს, რომ დავამთავროთ დამთავრებული curly brace (}) ვადამდე, ამიტომ მე არ დაგვავიწყდეს მოგვიანებით.
მიუხედავად იმისა, რომ ჩვენ ვიყენებთ უწესრიგო სიის ჩანართას tab მენიუს სიაში, მაგრამ ჩვენ არ გვინდა ტყვიები ან რიცხვები მცოცავი სისტემაში. სიის სტილი: არა; ეს ეუბნება ბრაუზერს, რომ ეს სიაშია, ეს სიაში არ არის წინასწარ განსაზღვრული სტილი (ტყვიები ან რიცხვები).
ამის შემდეგ შეგიძლიათ დააყენოთ თქვენი სიის სიმაღლე, რომ შეავსოთ ის სივრცე, რომლის შევსებაც გსურთ. მე აირჩიე 2m ჩემი სიმაღლე, როგორც ეს ორმაგი სტანდარტული შრიფტის ზომა, და დაახლოებით ნახევარი em ზემოთ და ქვემოთ ტექსტი tab. სიმაღლე: 2; მაგრამ თქვენ შეგიძლიათ დააყენოთ თქვენი სიგანე იმ ზომით რაც გსურთ. UL tags ავტომატურად მიიღებს 100% სიგანის, ასე რომ, თუ არ გინდათ, რომ იყოს პატარა ვიდრე მიმდინარე კონტეინერი, შეგიძლიათ დატოვონ სიგანე out.
და ბოლოს, თუ თქვენი სამაგისტრო სტილის ფურცელს არ აქვს presets for UL და OL tags, თქვენ უნდა დააყენოს მათ შემოსული ეს ნიშნავს, რომ თქვენ უნდა გამორთეთ საზღვრები, მინდვრები და padding თქვენს UL. padding: 0; ზღვარი: 0; საზღვარი: არა; თუ თქვენ უკვე გაქვთ გადატვირთვის UL tag, შეგიძლიათ შეცვალოთ მინდვრები, padding ან საზღვარი რაღაც, რომელიც შეესაბამება თქვენი დიზაინი.
შენი საბოლოო .tablist კლასის უნდა გამოიყურებოდეს ეს:
.tablist {list-style: none; სიმაღლე: 2; padding: 0; ზღვარი: 0; საზღვარი: არა; }06 06
რედაქტირება LI სია Items
მას შემდეგ, რაც თქვენ ე.წ. თქვენი უწესრიგო სია, თქვენ უნდა სტილი LI tags შიგნით. წინააღმდეგ შემთხვევაში, ისინი იმოქმედებენ როგორც სტანდარტული სიის და თითოეული ნაბიჯი შემდეგი ხაზის გარეშე თქვენი ჩანართების სწორად.
პირველი, შექმენით თქვენი სტილი ქონება:
.tablist li {}შემდეგ გსურთ ჩანართების ჩანართები ისე, რომ ისინი ჰორიზონტალურ სიბრტყეზე გამოდიან. float: მარცხენა;
და არ უნდა დაგვავიწყდეს, რომ დაამატოთ გარკვეული ზღვარი ჩანართებს შორის, ასე რომ მათ არ შერწყმევას ერთად. ზღვარი მარჯვნივ: 0.13;
შენი li სტილის უნდა გამოიყურებოდეს ეს:
.tablist li {float: left; ზღვარი მარჯვნივ: 0.13; }06 06
ჩანართების ჩანართი CSS- ის ჩანართებით გამოიყურება
ამ სტილის ფურცლის უმეტესობის გაკეთება, უპასუხისმგებლო სიაში მე კავშირები მაქვს. ბრაუზერები აღიარებენ, რომ ბმულები უფრო მეტ ვებ გვერდზეა, ვიდრე სხვა tags, ასე რომ უფრო ადვილად მისაღებად ძველი ბრაუზერები შეასრულოს რამ, როგორიცაა hover აცხადებს თუ ანიჭებენ მათ წამყვანმა tag (ბმულები). ასე რომ, დაწერე შენი სტილის თვისებები:
.tablist li a} .tablist li a: hover {}იმის გამო, რომ ეს ჩანართები უნდა იმოქმედონ ჩანართებში ჩანართზე, გინდათ მთელი ტაბლეტის ბლოკირება, რომელიც არ არის მხოლოდ დამაკავშირებელი ტექსტი. ამისათვის თქვენ უნდა გადაიყვანოთ A tag- ის ნორმალური " inline " სახელმწიფო ბლოკ ელემენტად . ჩვენება: ბლოკი; (თუ თქვენ აინტერესებთ მეტი იცოდე შესახებ, წაიკითხეთ ბლოკ-დონე წინააღმდეგ Inline Elements .)
ამის შემდეგ, მარტივად რომ ვთქვათ, თქვენი ჩანართები ერთმანეთთან სიმეტრიული უნდა იყოს, მაგრამ ტექსტის სიგანეს შეესაბამება, რომ მარჯვენა და მარცხენა პანდირება იგივე იყოს. მე გამოვიყენე padding shorthand საკუთრების დასაყენებლად ზედა და ქვედა 0-ის და მარჯვნივ და მარცხნივ 1m. padding: 0 1;
მე ასევე აირჩია ამოიღონ ლინკი ხაზს უსვამს, ისე, რომ ჩანართების გამოიყურება ნაკლებად მოსწონს ბმულები. მაგრამ თუ თქვენი აუდიტორია შეიძლება დაბნეული იყოს, დატოვეთ ეს ხაზი. ბმული-გაფორმება: არა;
ჩანართების გარშემო თხელი საზღვრის გადაღებით, ის ქმნის ჩანართებს. სასაზღვრო გამტარუნარიანობა მე ოთხივე მხარის საზღვრის გარშემო სასაზღვრო სასაზღვრო გამშვები პუნქტის გამოყენებაა: 0.06 მ მყარი # 000; და შემდეგ გამოიყენა საზღვრის ქვედა საკუთრება, რათა ამოიღო იგი ბოლოში. საზღვრის ქვედა: 0;
შემდეგ ჩანართების შრიფტის, ფერისა და ფონის ფერის შესწორებას მივუძღვენი. დააყენეთ ეს სტილი, რომელიც ემთხვევა თქვენს საიტზე. შრიფტი: თამამი 0.88em / 2em arial, geneva, helvetica, sans-serif; ფერი: # 000; ფონის ფერი: #ccc;
ყველა ზემოთ ჩამოთვლილი სტილი უნდა შევიდეს სელექციონერში .თბლისტი, წესი, რომ ისინი გავლენას ახდენენ წამყვან რგოლებში. შემდეგ იმისათვის, რომ ჩანართები გამოჩნდეს უფრო დაჭერილი, უნდა დაამატოთ რამდენიმე სახელმწიფო წესი .tablist li: hover.
მე მიყვარს შეცვალონ ტექსტისა და ფონის ფერის შეცვლა ტაბლეტის პოპზე, როდესაც მასზე მაუსი. background: # 3cf; ფერი: # ff;
და მე შემიძლია კიდევ ერთი შეხსენება იმ ბრაუზერებზე, რომლითაც მინდა ხაზი გავუსვა ბმული. ტექსტი-გაფორმება: არა; კიდევ ერთი საერთო მეთოდი არის ის, რომ ხაზგარეშე უკან, როცა მაუსი tab. თუ გსურთ ამის გაკეთება, შეცვალოთ ეს ტექსტური გაფორმება: ხაზგასმული;
მაგრამ სად არის CSS 3?
თუ ყურადღებას აქცევენ, ალბათ შევამჩნიე, რომ სტილის ფურცელი არ არის გამოყენებული CSS 3 სტილის. მას აქვს უპირატესობა მუშაობის ნებისმიერი თანამედროვე ბრაუზერი, მათ შორის Internet Explorer. მაგრამ ეს არ გააკეთოს ჩანართების ჰგავს არაფერი მეტი კვადრატული ყუთები. დასძინა CSS 3 სტილის ზარის სასაზღვრო რადიუსი (და მასთან დაკავშირებული ბრაუზერის სპეციფიკური ზარები) შეგიძლიათ გააკეთოთ კიდეები მრგვალდება, რათა უფრო მეტი ჩანართები მენიუს საქაღალდეში გამოიყურებოდეს.
სტილის უნდა დაამატოთ totablist li წესი: -webkit საზღვრის ზედა მარჯვენა რადიუსი: 0.50em; -ვებრი-საზღვრის ზედა მარცხენა რადიუსი: 0.50მი; -ზონ-საზღვარ-რადიუსი- Topright: 0.50em; -ზოგადი-რადიუსი- topleft: 0.50em; საზღვრის ზედა მარჯვენა რადიუსი: 0.50მი; საზღვრის ზედა მარცხენა რადიუსი: 0.50;
ეს არის საბოლოო სტილი წესები დავწერე:
.tablist li {display: block; padding: 0 1; ტექსტი-გაფორმება: არა; საზღვარი: 0.06 მ მყარი # 000; საზღვრის ქვედა: 0; შრიფტი: თამამი 0.88em / 2em arial, geneva, helvetica, sans-serif; ფერი: # 000; ფონის ფერი: #ccc; / * CSS 3 ელემენტები * / Webkit- საზღვრის ზედა მარჯვენა რადიუსი: 0.50; -ვებრი-საზღვრის ზედა მარცხენა რადიუსი: 0.50მი; -ზონ-საზღვარ-რადიუსი- Topright: 0.50em; -ზოგადი-რადიუსი- topleft: 0.50em; საზღვრის ზედა მარჯვენა რადიუსი: 0.50მი; საზღვრის ზედა მარცხენა რადიუსი: 0.50; } .tablist li: hover {background: # 3cf; ფერი: # ff; ტექსტი-გაფორმება: არა; }ამ სტილის, თქვენ გაქვთ tabbed მენიუ, რომელიც მუშაობს ყველა ძირითადი ბრაუზერები და ჰგავს ლამაზი დაბეჭდილი ჩანართების CSS 3 შესაბამისი ბრაუზერები. შემდეგი გვერდი მოგცემთ კიდევ ერთ ვარიანტს, რომელიც შეგიძლიათ გამოიყენოთ კიდევ უფრო მეტი კაბაში.
06 06
მონიშნეთ ამჟამინდელი ჩანართი
In HTML შევქმენი, UL ჰქონდა ერთი სიაში ელემენტს ID. ეს საშუალებას გაძლევთ, რათა ერთი LI განსხვავებული სტილი დანარჩენი. ყველაზე გავრცელებული სიტუაციაა იმისა, რომ ამჟამინდელი ჩანართი გარკვეულწილად გამოირჩევა. კიდევ ერთი გზა ვფიქრობ ის არის, რომ გსურთ gray out ჩანართების, რომლებიც არ ცხოვრობენ. თქვენ მაშინ შეცვლით, სადაც id არის სხვადასხვა გვერდებზე.
I სტილი როგორც #current tag ასევე #current A: hover sta ისე, რომ ორივე ოდნავ განსხვავებული. თქვენ შეგიძლიათ შეცვალოთ ფერი, ფონის ფერი, ამ ელემენტის სიმაღლე, სიგანე და პანდირებაც. შეიტანეთ ცვლილებების შეტანა თქვენი დიზაინით.
.tablist li # მიმდინარე {background-color: # 777; ფერი: # ff; } .tablist li # current: hover {background: # 39C; }და თქვენ კეთდება! თქვენს ვებსაიტზე მხოლოდ tabbed მენიუ შექმნა.