ადაპტირებული ნავიგაცია მენიუსთვის. როგორ შევქმნათ რეზინის საპასუხო მენიუ css-ის გამოყენებით
როდესაც ჩვენ ვიწყებთ საპასუხო დიზაინთან მუშაობას, ჩვენ ვხვდებით სხვადასხვა ტექნიკას, თუ როგორ უნდა გავუმკლავდეთ ჩვენი ნავიგაციის მენიუს შეცვლას დაბალი რეზოლუციის ეკრანებისთვის. შესაძლებლობები უსასრულო ჩანს. ამიტომ, მე გაჩვენებთ ოთხ მთავარ მიდგომას თავისი დადებითი და უარყოფითი მხარეებით. სამი მათგანი დამზადებულია მხოლოდ CSS-ის გამოყენებით და ერთი მცირე რაოდენობით JavaScript-ით.
შესავალი
ამ სტატიაში წარმოდგენილ კოდში მე არ ვიყენებ ბრაუზერის პრეფიქსებს სტილის კოდის ადვილად წასაკითხად და გასაგებად შესანარჩუნებლად. უფრო რთული მაგალითები გამოიყენება SCSS. თითოეული მაგალითი განთავსებულია CodePen-ზე, სადაც შეგიძლიათ ნახოთ შედგენილი CSS.ამ სტატიაში ყველა მიდგომა იყენებს მარტივ HTML კოდს, რომელსაც მე ვუწოდებ "ძირითადი მენიუს". როლის ატრიბუტი გამოიყენება კონკრეტული ტიპის აღსანიშნავად: ჰორიზონტალური მენიუ (სრული ჰორიზონტალური), ჩამოსაშლელი სია (არჩევა), ჩამოსაშლელი მენიუ (მორგებული ჩამოსაშლელი) და ტილო.
სტილისთვის, მე ვიყენებ იგივე მედია მოთხოვნას ყველა ვარიანტისთვის:
@media ეკრანი და (მაქს. სიგანე: 44 მმ) ( )
1. ჰორიზონტალური მენიუ
უმარტივესი მიდგომა, რადგან თქვენ მხოლოდ უნდა გააკეთოთ ელემენტების სია მთელი გვერდის სიგანეზე:
@media ეკრანი და (მაქს. სიგანე: 44em) ( nav ( ul > li ( სიგანე: 100%; ) ) )
უპირატესობები
- JavaScript საჭირო არ არის
- არანაირი დამატებითი მარკირება
- მარტივი სტილის კოდი
ხარვეზები
- ძალიან დიდ ადგილს იკავებს ეკრანზე
ამ ეფექტის მისაღწევად, ჩვენ უნდა დავამატოთ ჩამოსაშლელი სია ძირითად მარკირებას. იმისათვის, რომ ის იმუშაოს, ჩვენ მოგვიწევს JavaScript კოდის დამატება, რომელიც ცვლის window.location .href-ის მნიშვნელობას, როდესაც მოხდება onchange მოვლენა.
სიის დამალვა დიდ ეკრანებზე:
ნავი (> აირჩიეთ ( ჩვენება: არცერთი; ) )
პატარა ეკრანებზე ჩვენ ვმალავთ მთავარ მენიუს და ვაჩვენებთ ჩამოსაშლელ სიას. მომხმარებლის დასახმარებლად იმის გაგებაში, რომ ეს არის მენიუ - ჩვენ დავამატებთ ფსევდო ელემენტს ტექსტით "მენიუ"
@media ეკრანი და (მაქსიმალური სიგანე: 44 მმ) ( nav ( ul ( ჩვენება: არცერთი; ) აირჩიეთ ( ჩვენება: ბლოკი; სიგანე: 100%; ) &: შემდეგ ( პოზიცია: აბსოლუტური; შინაარსი: "მენიუ"; მარჯვნივ: 0 ქვედა: -1em ) )
დამატებითი დიზაინით, ასე გამოიყურება დაბალი გარჩევადობის ეკრანებზე: 
უპირატესობები
- დიდ ადგილს არ იკავებს
- იყენებს "მშობლიურ" კონტროლს
ხარვეზები
- სამუშაოსთვის საჭიროა JavaScript
- ხდება დუბლიკატი შინაარსი
- ჩამოსაშლელი სია ვერ ხერხდება ყველა ბრაუზერში
3. მორგებული ჩამოსაშლელი მენიუ
ამ მიდგომით, მცირე ეკრანებზე, ძირითადი მენიუ იმალება და მის ნაცვლად ნაჩვენებია შეყვანა და ეტიკეტი (გამომშვები ყუთის გატეხვის გამოყენებით). როდესაც მომხმარებელი დააჭერს ეტიკეტს, მის ქვემოთ ნაჩვენებია საბაზისო მენიუ.პრობლემები ყუთის ჰაკის გამოყენებისას
ამ გადაწყვეტის ორი ძირითადი პრობლემა:- ის არ მუშაობს Safari-ის მობილურ ვერსიებზე (iOS< 6.0) . არ შეიძლება ეტიკეტზე დაწკაპუნება iOS ბრაუზერში< 6.0, чтобы сработал input из-за бага. Решается добавлением пустого события onclick на label
- ის არ მუშაობს Android OS-ის 4.1.2-ზე ნაკლები ან ტოლი ვერსიის მთავარ ბრაუზერზე.დიდი ხნის წინ, იყო შეცდომა WebKit ძრავში, რომელიც არ იძლეოდა ფსევდოკლასების გამოყენებას სელექტორების + და ~ კომბინაციით.
H1 ~ p (ფერი: შავი; ) h1: hover ~ p (ფერი: წითელი;)
ამას არანაირი ეფექტი არ მოჰყოლია, რადგან ჩამრთველი ველის გატეხვამ გამოიყენა :checked ფსევდოკლასი ~ სელექტორით. და სანამ შეცდომა არ გამოსწორდებოდა WebKit 535.1-ში (Chrome 13) და WebKit 534.30-ში, რომელიც აქტუალურია Android 4.1.2-ისთვის, ჰაკი არ მუშაობდა არცერთ მოწყობილობაზე Android OS-ით.
4. ტილო
ამ მიდგომით, მცირე ეკრანებზე, საბაზისო მენიუ იმალება და შეყვანა და ლეიბლი ნაჩვენებია, როგორც 3-ე ოფციაში. როდესაც მომხმარებელი დააწკაპუნებს ეტიკეტზე, საბაზისო მენიუ მოძრაობს მარცხნივ და შინაარსი გადადის მარჯვნივ. ეკრანი დაყოფილია 80% მენიუდ და 20% შინაარსად (დამოკიდებულია გარჩევადობაზე და CSS-ში გამოყენებულ ერთეულებზე)
დიდ ეკრანებზე ჩვენ ვმალავთ ეტიკეტს.
ლეიბლი (პოზიცია: აბსოლუტური; მარცხნივ: 0; ჩვენება: არცერთი;)
პატარა ეკრანებზე განვათავსებთ მენიუს ფანჯრის შიგთავსის მიღმა და ვაჩვენებთ ეტიკეტს და შეყვანას. მენიუს დასამალად დავაყენეთ მისი სიგანე და უარყოფითი პოზიციის მნიშვნელობა. მომხმარებლის ამ მენიუს გაგებაში დასახმარებლად, ჩვენ ასევე დავამატებთ ფსევდოელემენტს ეტიკეტში ტექსტით „≡“ (როგორც კოდი „\2261“ ფსევდოელემენტის შიგთავსად გამოსაყენებლად).
@media ეკრანი და (მაქს-სიგანე: 44მ) ( $menu_width: 20em; body ( overflow-x: დამალული; ) nav ( პოზიცია: აბსოლუტური; მარცხნივ: -$menu_width; სიგანე: $menu_width; ul > li ( სიგანე: 100 %;) ) label (ჩვენება: ბლოკი; ) label:after (პოზიცია: აბსოლუტური; შინაარსი: "\2261"; ) input:checked ~ nav (მარცხნივ: 0; ) input:checked ~ .content (ზღვარი-მარცხნივ: $ menu_width + .5em; margin-right: -($menu_width + .5em)
დამატებითი დიზაინით, ასე გამოიყურება დაბალი გარჩევადობის ეკრანებზე:
უპირატესობები
ხარვეზები
- არასემანტიკური კოდი (შეყვანა/ლეიბლი)
- საჭიროა დამატებითი HTML
- სხეულის ელემენტის აბსოლუტური განლაგება იძლევა ფიქსირებული პოზიციის განცდას
ეს მუშაობს IE-ში?
ყველა გამოყენებულ ტექნიკას აქვს ერთი მიზანი: შექმნას საპასუხო მენიუ თანამედროვე ბრაუზერებისთვის! და ეს იმიტომ, რომ არ არის IE8 ან უფრო დაბალი არცერთ მობილურ მოწყობილობაზე და ამიტომ ჩვენ საერთოდ არ უნდა ვიფიქროთ ამ საკითხზე.გამარჯობა. ძალიან დიდი ხანია არ დამიწერია პოსტები html/css მუშაობის თემაზე. ახლახან დავიწყე ახალი განლაგების შექმნა და ამ პროცესში წავაწყდი საინტერესო ხრიკს, რომლის საშუალებითაც შეგიძლიათ მენიუ გახადოთ რეზინისფერი (შეგიძლიათ დაამატოთ მას ახალი ელემენტები და ზომა არ გაიზრდება, მაგრამ ყოველთვის იქნება მშობლის 100% ბლოკი). ასე რომ, დღეს ჩვენ განვახორციელებთ რეზინის მენიუს CSS-ის გამოყენებით.
თუ ძალიან გეზარებათ სტატიის წაკითხვა, შეგიძლიათ უყუროთ ამ ვიდეოს. ავტორიც ძალიან კარგად ხსნის ყველაფერს:
რეზინის მენიუ CSS-ით - ნაბიჯი 1
პირველი ნაბიჯი ყოველთვის არის html მარკირება, სად ვიქნებოდით მის გარეშე? მაგრამ ჩვენს შემთხვევაში ყველაფერი მარტივი იქნება:
- ბლოკის შეფუთვა მენიუსთვის
- თავად მენიუ, რომელიც ნაჩვენებია ბურთულების სიის მეშვეობით (ul tag)
- ისე, მენიუს ელემენტები შიგნით არის და, შესაბამისად, მათ უკვე აქვთ ბმულები
ყველაფერი ნათელია, აქ არის ჩემი მარკირების კოდი:
ეს ყველაფერი სტანდარტულად გამოიყურება, ასე:
ახლა ყველაფერს ჩავსვამთ სასურველ ფორმაში, CSS შეუდგება მუშაობას.
ნაბიჯი 2 - ძირითადი სტილები
ნაბიჯი 3 - რეზინის დანერგვა
ახლა ავიღოთ თავად მენიუ. მე ამოვხსნი მარკერებს მისგან (ul ტეგი), გავაკეთებ მას ფონზე და, რაც მთავარია, გამოვიყენებ მახასიათებელს display: table-row, რათა მენიუს კონტეინერი მოიქცეს ცხრილის მწკრივის მსგავსად. ეს მნიშვნელოვანია შემდგომი მანიპულაციისთვის.
R-მენიუ (ფონი: ხაზოვანი-გრადიენტი (მარჯვნივ, #b0d4e3 0%,#88bacf 100%); ჩვენება: ცხრილის მწკრივი; სიის სტილი: არცერთი; )
როგორც ხედავთ, ზემოთ მოცემულმა კოდმა გადაჭრა ყველაფერი, რაზეც დავწერე. სხვათა შორის, მოსახერხებელია გრადიენტების გენერირება Ultimate CSS Gradient გენერატორის ინსტრუმენტის გამოყენებით.
R-მენიუ li( ვერტიკალური გასწორება: ქვედა; ეკრანი: ცხრილის უჯრედი; სიგანე: ავტომატური; ტექსტის გასწორება: ცენტრში; სიმაღლე: 50 პიქსელი; კონტური მარჯვნივ: 1px მყარი #222; )
- vertical-align: bottom - ეს თვისება აუცილებელია ისე, რომ თუ მენიუს პუნქტში ტექსტი 2 სტრიქონს მიიღებს, ის თანაბრად გამოჩნდეს. როდესაც მენიუს ვაკეთებთ, შეგიძლიათ წაშალოთ ეს თვისება, გაადიდოთ ისე, რომ ელემენტები შეკუმშული იყოს და ტექსტი გადავიდეს ორ ხაზზე და დაინახოთ ეკრანის პრობლემა. დააბრუნე ქონება და ყველაფერი კარგად იქნება.
- ჩვენება: ცხრილის უჯრედი - რადგან ჩვენ თავად ჩვენ დავაყენეთ მენიუ, როგორც ცხრილის სტრიქონი, ლოგიკური იქნება მისი ელემენტების ჩვენება ცხრილში უჯრედების სახით. ეს აუცილებელია.
- width: auto — სიგანე გამოითვლება ავტომატურად, რაც დამოკიდებულია აბზაცში მოცემული ტექსტის სიგრძეზე
- text-align: center - ეს არის მხოლოდ ტექსტის შიგნით ცენტრისთვის
- სიმაღლე: 50 პიქსელი — დააყენეთ სიმაღლე 50 პიქსელზე
- კარგად, სასაზღვრო-მარჯვნივ არის მხოლოდ საზღვარი მარჯვნივ, გამყოფი ნივთებისთვის
ჯერჯერობით მენიუ არასასიამოვნოდ გამოიყურება, მაგრამ არა უშავს, დროა გავიხსენოთ იგი. 
ბოლო, რაც უნდა გააკეთოთ, არის ნივთების შიგნით ბმულების სტილი. აი ეს კოდი მაქვს:
R-მენიუ li a (ტექსტის დეკორაცია: არცერთი; სიგანე: 1000 პიქსელი; სიმაღლე: 50 პიქსელი; ვერტიკალური გასწორება: შუა; ეკრანი: ცხრილის უჯრედი; ფერი: #fff; შრიფტი: ნორმალური 14 პიქსელი Verdana; )
და მენიუ ახლა ასე გამოიყურება:
კიდევ ერთხელ, ნება მომეცით აგიხსნათ რამდენიმე სტრიქონი:
- ტექსტის დეკორაციის თვისება უგულებელყოფს ბმულების ნაგულისხმევ ხაზგასმას
- სიგანე: 1000px ალბათ ყველაზე მნიშვნელოვანი ხაზია. თქვენ უნდა დააყენოთ ბმულები დაახლოებით ამ სიგანეზე, შესაძლოა ნაკლები, მაგრამ აუცილებლად უფრო დიდი ვიდრე ყველაზე ფართო მენიუს ელემენტი. ბმულები არ იქნება 1000 პიქსელის სიგანე, რადგან სიგანე შეიზღუდება მენიუს ელემენტით, რომლის სიგანე დაყენებულია ავტომატურად, მაგრამ ეს შესაძლებელს გახდის მენიუში ნებისმიერი რაოდენობის ელემენტისთვის ყოველთვის იყოს 100. სიგანის პროცენტი.
- ვერტიკალური გასწორება: შუა და ჩვენება: ცხრილი-უჯრედი - პირველი გაასწორებს ტექსტს ვერტიკალურად ცენტრში, ხოლო მეორე ასევე აჩვენებს ბმულებს უჯრედების სახით. ორივე თვისებაა საჭირო.
- შრიფტი - კარგად, ეს მხოლოდ შრიფტის პარამეტრების ნაკრებია. წაიკითხეთ შრიფტების css თვისებების შესახებ.
ნაბიჯი 4 (სურვილისამებრ) შეგიძლიათ დაამატოთ ინტერაქტიულობა
მაგალითად, ისე, რომ მენიუს ელემენტის ფერი იცვლებოდეს მაუსის დაჭერისას. ეს შეიძლება განხორციელდეს საკმაოდ მარტივად, ჰოვერის ფსევდო კლასის გამოყენებით:
R-მენიუ li:hover (ფონის ფერი: #6bba70;)
მენიუს ტესტირება რეზინისთვის
მშვენიერია, მენიუ მზად არის, მაგრამ ჩვენ არ შევამოწმეთ ყველაზე მნიშვნელოვანი რამ - რამდენად რეზინისაა, როგორც დაგპირდით. ჰოდა, მენიუში კიდევ 2 ელემენტს დავამატებ:
მენიუ რჩება 600 პიქსელის სიგანით. დარჩენილი ნივთები უბრალოდ ოდნავ შემცირდა 2 ახლის მოსათავსებლად.
კიდევ ერთ ვრცელ პუნქტს დავამატებ:
როგორც ხედავთ, მენიუ ოდნავ შემცირდა და გრძელი ელემენტი საკმაოდ ნორმალურად არის ნაჩვენები. და რომ არ ყოფილიყო ვერტიკალური გასწორება: ქვედა საკუთრება, რომლის შესახებაც გითხარით, მენიუ უარესად გამოიყურებოდა.
მენიუს სამ პუნქტამდე ვამცირებ.
ნივთები ბევრად უფრო თავისუფალი გახდა, მაგრამ თავად მენიუ არ შეცვლილა სიგანეში. ასე რომ, ჩვენ გავაკეთეთ 100% რეზინის მენიუ!
როგორ მოვარგოთ?
პრინციპში, თუ შეფუთვის ბლოკს აძლევთ მაქსიმალურ სიგანეს და არა ფიქსირებულს, მაშინ მისი ადაპტირებაც კი არ არის საჭირო. ჩემს შემთხვევაში, მაქვს მაქსიმალური სიგანის თვისება: 600 პიქსელი და როდესაც სიგანე 600 პიქსელზე ნაკლები ხდება, ბლოკი უბრალოდ შემცირდება ეკრანთან ერთად, ჰორიზონტალური გადახვევის გარეშე.
ისე, თუ გსურთ როგორმე შეცვალოთ ან შეასწოროთ მენიუ მობილურ მოწყობილობებზე ან ფართო ეკრანებზე, მაშინ ჩვენ შეგვიძლია დაგეხმაროთ! წარმატებებს გისურვებთ ვებსაიტის მშენებლობაში!
მსგავსი სტატიები ამ თემაზე:
HTML-ის დამატება
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | |
მთელი ნავიგაცია შედგება ორი შეურიგებელი სიისგან. შესაბამისად, თქვენ ცვლით მენიუს სექციების და კატეგორიების სახელებს საკუთარზე.
| 1 | <a href = "#0" class = "cd-nav-trigger" >მენიუ<span > |
ბოლო ხაზი პასუხისმგებელია ეკრანის დაბალი გარჩევადობით ნავიგაციაზე.
CSS-ის დამატება
არქივი მაგალითით შეიცავს ფაილს სტილი.css.
მასში, "მენიუ სტილების" განყოფილებაში არის მენიუს დიზაინის ყველა სტილი, მათ შორის მედია მოთხოვნები.
შეგიძლიათ ჩამოტვირთოთ მთელი ფაილი, ან დაამატოთ სტილები მხოლოდ მენიუსთვის. თუ მთლიანად გადმოწერე სტილი.css, მაშინ არ დაგავიწყდეთ დაკავშირება თქვენსთან htmlფაილი ტეგებს შორის
.
| 1 | <ბმული rel = "stylesheet" href = "css/style.css" > |
დაამატეთ JQuery
დააკოპირეთ js საქაღალდე არქივიდან. და ჩვენ ვუკავშირდებით სკრიპტებს ჩვენს html დოკუმენტს.
| 1 2 3 | <script src = "js/modernizr.js" > <script src = "js/jquery-2.1.1.js" > <script src = "js/main.js" > |
თუ თქვენს პროექტს უკვე აქვს modernizr.js და jquery-2.1.1.js, მაშინ არ გჭირდებათ მათი მეორედ დაკავშირება. მენიუ მზად არის!
ნავიგაციის ეს ვარიანტი ასევე შეიძლება გამოყენებულ იქნას საიტზე, შესვლის ფორმის ან სოციალური ქსელების ბმულების მოსაძიებლად.
პორტალი რთული მენიუებით. ჩვენ გადავწყვიტეთ სკრიპტების დაწერა მხოლოდ იმ შემთხვევაში, თუ ვერ ვიპოვით იმას, რაც გვჭირდება ინტერნეტში. ჩაფიქრებული იყო რამდენიმე სხვადასხვა ნავიგაცია სხვადასხვა მახასიათებლებით. ჩვენდა საბედნიეროდ, ერთის გარდა თითქმის ყველაფერი იპოვეს. თუმცა, ამ მენიუს დაწერაზე მუშაობის დაწყებამდე მაინც მოვახერხეთ იმის პოვნა, რაც გვჭირდებოდა.
საკმაოდ ბევრი სცადეს ადაპტური მენიუები. ამ თემაში მე გადავწყვიტე გამეკეთებინა ყველაზე ღირებული და საინტერესო არჩევანი, რომელიც უნდა ვცადოთ. ყველა ადაპტური მენიუებიარ ჰგავს ერთმანეთს და შექმნილია ექსკლუზიურად კონკრეტული ამოცანებისთვის.
ასე რომ. თქვენი ყურადღებისთვის 5 ადაპტირებული მენიუყველა შემთხვევისთვის.
flexMenu
ეს არის ზუსტად ის მენიუ, რომელიც ასე ძნელად მოსაძებნი იყო და რომლის ფუნქციონირებასაც ვაპირებდით წერას.flexMenu - მენიუ, რომელიც შესაფერისია დინამიურად ცვალებადი სიგანის მქონე საიტებისთვის. მისი მთავარი და უნიკალური თვისებაა ელემენტის "მეტი" დამატებადა მის ჩამოსაშლელ სიაში გადაიტანეთ ისეთი ელემენტები, რომლებიც არ ჯდება მთელი ნავიგაციის სიგანეში. ანუ დიდ მონიტორებს თუ გადავხედავთ, ყველა პუნქტს დავინახავთ. როგორც კი ვიწყებთ ბრაუზერის ფანჯრის შეკუმშვას, მენიუს ბოლოს გამოჩნდება პუნქტი „მეტი“ და ის ელემენტები, რომლებიც ფანჯრის შეკუმშვისას არ ჯდება, დინამიურად გადავა მის ჩამოსაშლელ სიაში. ამრიგად, ჩვენ წარმატებას მივაღწევთ მენიუ ფიქსირებული სიმაღლით და მოქნილი სიგანით.
-თან მუშაობისას flexMenuერთ პრობლემას წავაწყდით. ჩვენს შემთხვევაში, მარჯვნივ იყო ლოგო float: მარცხენა;, მარჯვნივ იყო ეს მენიუ ასევე float: მარცხენა; და მარჯვნივ float-ით: მარჯვნივ; იყო კიდევ ერთი ბლოკი. ბრაუზერის ფანჯრის ზომის შეცვლისას აღმოჩნდა, რომ მარჯვნივ მდებარე ბლოკი გადახტა მენიუს ქვეშ, შემდეგ ეს ყველაფერი გადახტა ლოგოს ქვეშ და შემდეგ გააქტიურდა მენიუს შეკუმშვის ფუნქცია. როგორ გავუმკლავდეთ ამ განლაგების ფუნქციას, განხილული იქნება მომდევნო თემებში. თვალყური ადევნეთ.
საპასუხო ნავიგაციის მენიუს კოდირება
დიდი ნავიგაციის მენიუს მაგალითი. როდესაც ბრაუზერის ფანჯრის ზომას შევცვლით, დავინახავთ, რომ ელემენტები ერთმანეთს ემთხვევა და სიგანეში გასწორებულია. ძალიან მოწესრიგებულად გამოიყურება. ყველაზე მთავარი მოცემული საპასუხო მენიუმშვენივრად გამოიყურება მობილურ მოწყობილობებზე და, რაც მთავარია, მოსახერხებელია სენსორული ეკრანის მქონე მოწყობილობებზე გამოსაყენებლად.
მრავალ დონის ბრტყელი მენიუ - ადაპტური ნავიგაცია
მრავალ დონის ბრტყელი მენიუ- ადაპტაციურია, მრავალ დონის მენიუ Jquery ბიბლიოთეკებთან მუშაობა. დესკტოპის მონიტორებზე ჩვენ ვხედავთ ჩვეულებრივ, ნაცნობ ჰორიზონტალურ მენიუს. მობილურ მოწყობილობებზე ჰორიზონტალური ნავიგაცია გარდაიქმნება ჩამოსაშლელ სიაში.მრავალდონიანი ბრტყელი მენიუ შესანიშნავი არჩევანია, თუ თქვენ გჭირდებათ სივრცის დაზოგვა გვერდზე.
