• ერთი.
• ორი.
• სამი.
• ოთხი.
• ხუთი.

და ა.შ. (ბოდიშს ვუხდი rebus) :-)

თუ თქვენ გაქვთ თარგი ბლოგზე, თითქოს ჩემნაირია, რომ ფონზე არის ნაცრისფერი და ბლოკი არის თეთრი, crumbs საუკეთესო დააყენა ბლოკი, როგორც მე. რადგან ისინი შეიძლება გადაეცეს ახალი სტრიქონი თუ სახელი ძალიან გრძელია და მერწმუნეთ, ეს არ არის ძალიან ლამაზი. :-)

Სულ ეს არის. ძვირფასო მეგობრებოთუ ზოგიერთი სირთულეები აუცილებლად გაჩნდა სთხოვეთ კომენტარს. Მალე გნახავ.

წინა სტატიაში "Breadcrumbs ნავიგაცია სამკუთხედები CSS" აღწერილია, თუ როგორ უნდა შექმნათ მენიუ გამოყენებით სუფთა CSS., გრაფიკის გამოყენების გარეშე.

მეთოდი ყველასთვის კარგია, გარდა ერთი - ძველი ბრაუზერების ასეთი მენიუს მხარდაჭერა საეჭვოა. მაგრამ ამ მუხლის გადაცემით, მინიშნება იყო გრაფიკის გამოყენებით ნავიგაციის შესაქმნელად.

სტატია დიდი ხნის განმავლობაში წერია, მაგრამ მეთოდი აბსოლუტურად მუშაობს. სტატიის ავტორი Veerle Pieters, და პოსტი თავად ეწოდება "მარტივი scalable CSS დაფუძნებული breadcrumbs". ქვემოთ მე არ ვარ თავისუფალი თარგმანი, მაგრამ უფასო retelling.

რამდენიმე დღის წინ მქონდა ამოცანა შექმნა ნავიგაციის მენიუს შექმნის "პურის crumbs" (breadcrumbs) სტილში, რომელიც მე ვმუშაობდი. მე არ მგონია, რომ ასეთი მენიუ აუცილებელია თითოეული საიტისთვის, მაგრამ ზოგიერთ შემთხვევაში ეს ძალიან სასარგებლო და პრაქტიკულია.

თუმცა, ეს მაგალითი, თითქოს ისაა, რაც შეიძლება გაფართოვდეს და პრაქტიკაში გამოიყენოს. მენიუ შეიქმნება რეგულარული ეტიკეტების სიის გამოყენებით.

1

დ

.

მაგრამ პირველად შევხედოთ ნიმუშს, რომელთანაც ჩვენ ვიმუშავებთ:

მენიუ არის მარტივი საკმარისი, როგორც არის კოდი, რომელთანაც ჩვენ შევქმნით მას.

HTML კოდი - ძირითადი UL სია

• სახლი
• მთავარი სექცია.
• ქვე სექცია.
• ქვე სუბიექტი.
• გვერდზე თქვენ ახლა ხართ

ყველა მენიუს ელემენტი აქვს ბმულები გარდა უკანასკნელი - "გვერდზე თქვენ ახლავე" (გვერდი თქვენ ამჟამად). მენიუში მუშაობისას მაინტერესებს, თუ ყველაზე შესაფერისი სტრუქტურის ჩამონათვალია მენიუს შექმნა? მე მჯერა, რომ ამ შემთხვევაში სიის გამოყენება არ არის მკაცრი წესი, მაგრამ მეჩვენება ჩემთვის ყველაზე სემანტიკური და სწორი ვარიანტი.

CSS კოდი - შექმენით სტილის მენიუ

ჩვენ მიუთითეთ საერთო სტილის მენიუ - წაშლა მარკერები და აღადგინოთ შინაგან საქმეთა ბრაუზერები Firefox.ანუ:

ჩვენ ვამზადებთ მთლიანი მენიუს სიმაღლის ტოლფასს. და მითითებული ფერი ტექსტი. შემდეგი, ჩვენ განთავსდება მითითება ფონზე გამოსახულება მოჭრილი საწყისი განლაგება. ამის გაკეთება, დაჭრილი მხოლოდ "arrow" თავად:

... რომელიც "უბრალოდ" ჩქარობს "მარჯვნივ (100%) და ადგილი ზუსტად ვერტიკალური (50%). ჩვენ ასევე ვაკეთებთ მითითებას უფლების მარჯვნივ

1	Padding-left: 15px

რომელშიც იქნება ფონური სურათი (დაჭრილი arrow): .crumbs li a (ჩვენება: ბლოკი; padding: 0 15px 0 0; ფონის: URL (img / crumbs.gif) 100% 50% არ გამეორება;)

უკვე თითქმის ყველაფერი კეთდება. ეს რჩება ბმული ტექსტის სტილის შესაქმნელად. ჩვენ ამოღება სტანდარტული ხაზს უსვამს და შეცვალეთ ფერი:

.crumbs li a: ბმული, .crumbs li a: ეწვია (ტექსტი-გაფორმება: არა, ფერი: # 777;)

1

: Hover

და

1

: ფოკუსი

. როდესაც თქვენ hover მაუსის კურსორი ან მიღების ფოკუსი საწყისი კლავიატურის ფერი ტექსტური ბმული შეიცვლება: .crumbs li a: hover, .crumbs li a: ფოკუსი (ფერი: # dd2c0d;)

აქ ჩვენი ნამუშევრის შედეგი წარმოდგენილია:

თარჯიმანი შენიშვნა:

სტატიის ავტორმა გამარტივდა მაგალითი და კოდი, შესაბამისად, რამდენადაც მე მესმის. ფაქტია, რომ მაგალითს აშკარად ჩანს თითოეული მენიუს ნივთების წრფივი ჰორიზონტალური გრადიენტი. თუმცა, კოდექსში არ იყო ნაჩვენები. კარგად, არ არის უბედურება - ეს არის პრობლემა, რომ შეიქმნას წრფივი გრადიენტი CSS3? ამოცანა თავად შესრულებულია!

ნავიგაცია "პურის ნამსხვრევების" სახით ხელს უწყობს საიტის სტუმრებს დოკუმენტების იერარქიულ სტრუქტურაში ნავიგაცია და იპოვოს გზა ზედა დონე. ამიტომ, თუ საიტი გამოიწვია დიდი რიცხვი დოკუმენტები, მაშინ უნდა იყოს უზრუნველყოფილი "პურის ნამსხვრევები". ამ გაკვეთილში, CSS კოდი წარმოდგენილი იქნება სხვადასხვა დიზაინის პარამეტრების შესაქმნელად ასეთი სასურველი სანავიგაციო ინსტრუმენტისთვის.

HTML მარკირება

მარკირება მარტივი და მინიმალურია. იგი ეფუძნება უწესრიგო სიას.

• Lorem ipsum.
• ვივამუს ნისი ეროსი.
• Nulla sed lorem risus
• NAM IACULIS COMMOODO.
• Აქ ხარ

CSS.

დასაწყისისთვის, ჩვენ შევქმნით მცირე CSS გადატვირთვას ჩვენი უწესრიგობის სიისთვის:

Ul (margin: 0; padding: 0; სია-სტილი: არა;)

გამოყენებული იქნება ჩვენი "პურის ნამსხვრევების" დიზაინის ფსევდო-ელემენტები.

პირველი მაგალითი

ამ მაგალითში გამოიყენება ძალიან მარტივი ტექნიკა. სამკუთხედი იქმნება ფარგლებში მარჯვენა მხარეს ფსევდო-ელემენტების დახმარებით მეორეზე. მუქი სამკუთხედი ცვლის ჩარჩო ეფექტის შესაქმნელად.

# Breadcrumbs- ერთი (ფონზე: #eee; სასაზღვრო-სიგანე: 1px; სასაზღვრო-ფერი: სასაზღვრო-ფერი: # F5F5F5 # E5E5E5 #CC; სასაზღვრო-რადიუსი: 5px; ყუთი ჩრდილი: 0 0 2PX RGBA (0, 0,0, .2); overflow: დამალული; სიგანე: 100%;) # breadcrumbs-one li (float: მარცხნივ;) # breadcrumbs- ერთი (padding :.7EM 2EM, Float: მარცხენა; მორთულობა: არცერთი ფერი: # 444; თანამდებობა: ნათესავი; ტექსტი-ჩრდილი: 0 1px 0 rgba (255,255,255, .5); ფონის ფერი: #DDD; ფონის გამოსახულება: ხაზოვანი-გრადიენტი (მარჯვნივ, # F5F5F5, # Ddd);) # Breadcrumbs-One Li: პირველი შვილი A (Padding-Left: 1EM; სასაზღვრო-რადიუსი: 5px 0 0 5px;) # Breadcrumbs- ერთი A: Hover (Background: #FFF;) # Breadcrumbs- ერთი :: Afterter, # Breadcrumbs- ერთი :: ადრე (შინაარსი: ";" პოზიცია: აბსოლუტური; ზედა: 50%; ზღვარი Top: -1.5EM; სასაზღვრო-ზედა: 1.5EM მყარი გამჭვირვალე; სასაზღვრო-ქვედა: 1.5EM მყარი გამჭვირვალე; სასაზღვრო-მარცხნივ: 1IM მყარი; მარჯვენა: -1EM;) # Breadcrumbs- ერთი :: AfterX (Z- ინდექსი: 2; სასაზღვრო-მარცხენა ფერადი: #ddd;) # Breadcrumbs-One A) სასაზღვრო-მარცხენა ფერადი: #ccc; ri GHT: -1.1EM; Z- ინდექსი: 1; ) # Breadcrumbs-One A: Hover :: Afterter (Border-Left-Color: #FFF;) # BREADCRUMS-ONE .კარგი, # Breadcrumbs- ერთი .კურარი: Hover (შრიფტი-წონა: Bold: None;) Breadcrumbs -ონი .კურარი :: Afterter, # Breadcrumbs- ერთი .კარგი :: ადრე (შინაარსი: ნორმალური;)

CSS ფორმები აგებულია ფსევდო-ელემენტებით, რომლებიც განთავსდება ელემენტამდე და მის შემდეგ.

# Breadcrumbs-ორი (overflow: დამალული: სიგანე: 100%;) # breadcrumbs-two (float: მარცხნივ, ზღვარი: 0.5EM 0); # Breadcrumbs-ორი A (Background: #dddd; Padding :.7EM 1EM ; Float: მარცხენა, ტექსტი-გაფორმება: არცერთი ფერი: # 444; ტექსტი-ჩრდილი: 0 1px 0 rgba (255,255,255, .5); თანამდებობა: ნათესავი;) # Breadcrumbs-ორი A: Hover: # 99db76;) # Breadcrumbs-Two A :: ადრე: აბსოლუტური; ზედა: 50%; ზღვარი -1.5. სასაზღვრო სიგანე: 1.5EM 0 1.5EM 1EM; სასაზღვრო სტილი: მყარი; სასაზღვრო - ფერადი: #DDDDDD # DDD გამჭვირვალე; მარცხნივ: -1EM;) # Breadcrumbs-Two A: Hover :: ადრე (სასაზღვრო ფერი: # 99db76 # 99db76 # 99db76 გამჭვირვალე;) # Breadcrumbs-Two A :: შემდეგ (შინაარსი: "" პოზიცია: აბსოლუტური; ზედა: 50%; ზღვარი Top: -1.5EM; სასაზღვრო-ზედა: 1.5EM მყარი გამჭვირვალე; სასაზღვრო-ქვედა: 1.5IM მყარი გამჭვირვალე; საზღვრის მარცხენა: 1EM მყარი #ddd; მარჯვენა: -1EM;) # Breadcrumbs-ორი A: Hover :: Afterter (Border Left-Color: # 99db76;) # Breadcrumbs-ორი .კურარი, # breadcrumbs-ორი .კურარი: Hover (შრიფტის წონა: თამამი; ფონზე: არა; ) # Breadcrumbs-Two .Current :: Afterter, # Breadcrumbs-Two .current :: ადრე (შინაარსი: ნორმალური;)

სასაზღვრო რადიუსის ქონების გამოყენებით, ოთხკუთხედისა და სკვერების კუთხეები. მოედანზე გამოდის ბრილიანტი.

# Breadcrumbs-ther (overflow: დამალული, სიგანე: 100%;) # breadcrumbs-three li (float: მარცხნივ, ზღვარი: 0 2EM 0 0;) # breadcrumbs-three a (padding :.7EM 1EM. მარცხენა; ტექსტი-გაფორმება: არცერთი ფერი: # 444; ფონი: #dddd; პოზიცია: ნათესავი; z- ინდექსი: 1; ტექსტური-ჩრდილი: 0 1px 0 rgba (255,255,255, .5); სასაზღვრო რადიუსი:. 0.4IM;) # Breadcrumbs-Three A: Hover (Background: # ABE0EF;) # Breadcrumbs-Three A :: შემდეგ (Background: #ddd; შინაარსი: ""; სიმაღლე: 2.5EM; ; პოზიცია: აბსოლუტური; მარჯვენა: -1EM; ზედა: 50%; სიგანე: 2.5EM; Z-1; Transform: როტაცია (45deg); სასაზღვრო რადიუსი: .4EM;) # Breadcrumbs-Three A: Hover: : მას შემდეგ, რაც (ფონის: # ABE0EF;) # BREADCRMBS-TIR.CURRENT, # BREADCRUMS-TIR .CURRENT: HOVER (შრიფტის წონა: თამამი; ფონზე: არცერთი;) # Breadcrumbs-there. )

ფსევდო ელემენტების დახმარებით, ორი მართკუთხედი ემატება. შემდეგ ისინი curl კუთხეებში.

# Breadcrumbs-four (overflow: დამალული; სიგანე: 100%;) # breadcrumbs-four li (float: მარცხენა, ზღვარი: 0.5EM 0); # Breadcrumbs- ოთხი A (Background: #dddd; Padding :.7EM 1EM Float: მარცხენა; ტექსტი-გაფორმება: არცერთი ფერი: # 444; ტექსტი-ჩრდილი: 0 1px 0 rgba (255,255,255, .5); თანამდებობა: ნათესავი;) # Breadcrumbs-Four A: Hover: # EFC9AB;); # Breadcrumbs-four a :: ადრე, # breadcrumbs-four a :: შემდეგ (შინაარსი: "; პოზიცია: აბსოლუტური; ზედა: 0; სიგანე: 1; Backgrath: #ddd; ტრანსფორმაცია: Skew (-10DEG) ;) # Breadcrumbs-four a :: ადრე (მარცხნივ: -5EM; სასაზღვრო-რადიუსი: 5px 0 0 5px;) # Breadcrumbs-Four A: Hover :: სანამ (ფონზე: # EFC9AB;) # Breadcrumbs-Four A :: მას შემდეგ, რაც (მარჯვნივ: -.5EM, სასაზღვრო-რადიუსი: 0 5px 5px 0;) # Breadcrumbs-Four A: Hover :: მას შემდეგ, რაც (Background: # EFC9AB;) # Breadcrumbs-Four .კურარი, # Breadcrumbs-Four .Current: Hover: Hover (შრიფტის წონა: Bold: None;) # Breadcrumbs-Four .Current :: Afterter, # Breadcrumbs-Four .Current :: ადრე: ნორმალური;)

"პურის ნამსხვრევების" დიზაინის უპირატესობები CSS3- ზე დაფუძნებული

• არ არის გამოსახულება, ასე რომ მხოლოდ განახლება და შენარჩუნება.
• ადვილად მასშტაბური.
• ძველ ბრაუზერებთან შთამბეჭდავი თავსებადობა.

ამ გაკვეთილში, თქვენ გაეცნობიან bootstrap 3 და 4 ნავიგაციის ჯაჭვების შექმნის პროცესს ("პურის crumbs").

ნავიგაციის ჯაჭვების მარკირება

ნავიგაციის ჯაჭვები ("პური crumbs", breadcrumbs) არის სანავიგაციო სქემა, რომელიც აჩვენებს ამჟამინდელ პოზიციას მომხმარებლის საიტზე. ისინი იყენებენ იერარქიულად ორგანიზებულ ინფორმაციას. მაგალითად, ონლაინ მაღაზიაში "პურის ნამსხვრევები", როგორც წესი, წარმოადგენენ სექციების ჯაჭვებს. მათი დახმარებით, მომხმარებელს შეუძლია განსაზღვროს, თუ რომელი სექცია ახლა არის, ისევე, როგორც ისინი საშუალებას გაძლევთ წასვლა სექციები მეტი მაღალი დონე. უზრუნველყოს საიტის სტრუქტურის ნავიგაციის კიდევ ერთი შესაძლებლობა.

"პურის ნამსხვრევები" Bootstrap- ში არის ჩვეულებრივი უბრძანა სია კლასის breadcrumbs. სიის ელემენტის გამყოფი ავტომატურად დაამატეთ CSS- ის გამოყენებით (bootstrap.min.css) შემდეგ კლასში:

Breadcrumbs\u003e Li + Li: ადრე (ფერი: #CCCCC; შინაარსი: "/" padding: 0 5px;)

მაგალითი "პურის crumbs" ერთად bootstrap.

1. მთავარი

1. მთავარი
2. პროცესორები

1. მთავარი
2. პროცესორები
3. INTEL

ნავიგაციის ჯაჭვების რეგისტრაცია Bootstrap- ში

კიდევ ერთი მაგალითი:

1. მთავარი
2. 2013
3. ნოემბერი

პური crumbs for ნავიგაცია არქივი ინფორმაცია

პურის ნამსხვრევების დიზაინის სტანდარტული ვარიანტი არ არის

განვიხილოთ პურის crumbs შემდეგი განსახიერების მაგალითი:

პურის ნამსხვრევების დიზაინის მაგალითი საიტზე

პურის crumbs შექმნის პროცესი შედგება HTML სტრუქტურისა და სტილის (CSS) განვითარებისგან.

CSS პურის crumbs:

/ * პურის crumbs * / #breadcrumb (სია-სტილი: არა, ჩვენება: inline-block; padding-left: 0px;) #breadcrumb .ICon (Font-Size: 14px;) #breadcrumb li (float: მარცხენა;) Breadcrumb; Li A (ფერი: #FFF; ჩვენება: ბლოკი; ფონის: # CC2AA; ტექსტი-გაფორმება: არა; პოზიცია: ნათესავი სიმაღლე: 34px; line-height: 34px; padding: 0 10px 0 5px; Margin-Right: 23px; -WebKit-User-User-Select: None; -MOZ-User-User-User-Arch: None; -MS-User-User-User-Select: None; მომხმარებელი-არჩევა;) #breadcrumb li: პირველი ბავშვი A (Padding -LEFT: 15px; -MOZ-Border-Radius: 4px 0 0 4px; -Webkit-Border-Radius: 4px; სასაზღვრო-რადიუსი: 4px 0 0 4px;) #breadcrumb li: პირველი შვილი: ადრე (საზღვარი: არა ;) #Breadcrumb li: ბოლო ბავშვი A (padding-rix; -მომ-სასაზღვრო რადიუსი: 0 4px 4px 0; -Webkit-border-radius: 0; სასაზღვრო-რადიუსი: 0 4px 4px 0;) # Breadcrumb LI: ბოლო შვილი A: შემდეგ (საზღვარი: არცერთი;) #breadcrumb li a: ადრე, #breadcrumb li a: შემდეგ (შინაარსი: "; პოზიცია: აბსოლუტური; ზედა: 0; საზღვრის: 0 მყარი # CC2AA; სასაზღვრო სიგანე: 17px 10px; სიგანე: 0; სიმაღლე: 0; ) #Breadcrumb li a: ადრე (მარცხნივ: -20px; სასაზღვრო-მარცხენა ფერადი: გამჭვირვალე;) #breadcrumb li a: შემდეგ (მარცხნივ: 100%; სასაზღვრო-ფერი: გამჭვირვალე; სასაზღვრო-მარცხენა ფერი: # CC2AA;) #Breadcrumb li a: hover (ფონის ფერი: # A22587;) #breadcrumb li a: hover: ადრე (სასაზღვრო ფერი: # a22587; სასაზღვრო-მარცხენა ფერადი: გამჭვირვალე;) #breadcrumb li a: Hover: შემდეგ (საზღვარი - მარცხენა ფერადი: # A22587;) # A22587;) #breadcrumb li a: აქტიური (ფონის ფერი: # A22587;) #breadcrumb li a: აქტიური: ადრე (სასაზღვრო ფერი: # A22587; სასაზღვრო-მარცხენა ფერადი: გამჭვირვალე;) # Breadcrumb li A: აქტიური: შემდეგ (სასაზღვრო-მარცხენა ფერადი: # A22587;) #breadcrumb li.current A (მაჩვენებელი - მოვლენები: არა, კურსორი: არ არის დაშვებული; ფილტრი: Alpha (Opacity \u003d 65); -Webkit-box -shadow : არა; ყუთი-ჩრდილი: არა; Opacity: .65;)

ფერადი ცვლილებები დამზადებულია შესაბამისი CSS თვისებების ღირებულებების რედაქტირებით.

HTML მარკირება:

1. მთავარი
2. მოწყობილობები
3. პროცესები
4. INTEL

ამჟამინდელი ელემენტის წამყვანი (თუ იგი გამოიყენება ჯაჭვში) ხორციელდება მიმდინარე კლასის დასამატებლად Li Element- ზე.