ასევე, თუ ვინმეს აინტერესებს, შეგიძლიათ გაეცნოთ წინა მეთოდს CSS-ის გამოყენებითრომელიც აღწერილია სტატიაში -
ახლა საქმეზე. როგორც წინა სტატიაში, პირველ რიგში, მოდით დავწეროთ ჩვენი მენიუს HTML კოდი. კოდი იგივეა რაც იმ სტატიაში, რომ არ იყოს დაბნეულობა და უფრო გასაგები იყოს. მენიუ ორი ელემენტით და ორივეს აქვს ქვემენიუ.
- პუნქტი 1
- ჩამოსაშლელი ელემენტი 1
- ჩამოსაშლელი ელემენტი 2
- ჩამოსაშლელი ელემენტი 3
- წერტილი 2
- ჩამოსაშლელი ელემენტი 1
- ჩამოსაშლელი ელემენტი 2
- ჩამოსაშლელი ელემენტი 3
თუ თქვენ გაქვთ ასეთი ხაზი ან მსგავსი, რომელიც უკვე შეიცავს ბიბლიოთეკას, მაშინ ეს აღარ უნდა გააკეთოთ.
jQuery(document).ready(function($)( $("#slow_nav ul li").hover(function () ($("ul", this).stop().slideDown(400); ), ფუნქცია ( ) ( $("ul", this).stop().slideUp(400); ));
სკრიპტის მეორე სტრიქონში ჩვენ მივუთითებთ ჩვენი მენიუს ID-ს. თუ იყენებთ ამ მეთოდითჩემი საკუთარი მენიუ, შემდეგ ბუნებრივად შეცვალეთ სახელი თქვენი სახელით. ამ შემთხვევაში ეს არის #slow_nav.
თქვენ ასევე შეგიძლიათ დაარეგულიროთ ანიმაციის დრო. ამ სკრიპტში გახსნისა და დახურვის მნიშვნელობა არის 400 მილიწამი, რაც არის 0.4 წამი. თუ გსურთ, შეგიძლიათ შეცვალოთ იგი უფრო მაღალი ან დაბალი მნიშვნელობით.
ბოლო ნაბიჯი არის სტილის დამატება. ისინი ძალიან ჰგავს წინა სტატიის სტილებს, მხოლოდ მათ აკლიათ CSS თვისებებიანიმაცია.
#slow_nav > ul( სიგანე: 500px; margin:25px auto 0; ) #slow_nav > ul > li(list-style: none; ჩვენება: inline-block; position:relative; padding:0; ) #slow_nav a(text- გაფორმება: არცერთი;) #slow_nav > ul > li > a( შრიფტის ზომა: 18 პიქსელი; padding: 5px; ფონის ფერი:#333; ფერი:#fff; ) #slow_nav li ul(პოზიცია:აბსოლუტური; სიის სტილი: none; a( padding:5px 12px; ფერი:#fff; display:block; ) #slow_nav li ul li:hover( background-color:#444; ) #slow_nav li ul li:first-child( margin-top:25px; პოზიცია :relative;
ასევე სტილებს დაემატა ერთი ახალი ხაზი, რომლითაც სკრიპტი მუშაობს სწორად. ელემენტისთვის - #slow_nav li ul თვისების ჩვენება:none; . თუ არ დაამატებთ, ჩამოსაშლელი მენიუ თავდაპირველად გამოჩნდება და გაქრება მხოლოდ მას შემდეგ, რაც კურსორს გადაიტანთ მასზე. ყველა სხვა სტილი იგივეა, რაც წინა სტატიაში.
წინა მეთოდის მსგავსად, ეს შეიძლება გამოყენებულ იქნას არა მხოლოდ თვითდაწერილ მენიუებზე, არამედ იმავე დინამიურ მენიუებზე, რომლებიც შექმნილია კონტენტის მართვის სისტემებით, როგორიცაა WordPress. ამისათვის თქვენ უნდა შეცვალოთ სტილი ცოტათი და ეს არის ის. ანუ, თქვენ არ გჭირდებათ პირველი HTML კოდის გამოყენება, მხოლოდ სტილები. სტილებში, თქვენ უნდა შეცვალოთ ID სახელი #slow_nav იმით, რაც გაქვთ, და შესაძლოა შეცვალოთ სხვა წვრილმანები. დეტალებში არ შევალ. თითოეული შემთხვევა მოითხოვს პირად მიდგომას, ასე რომ მაპატიეთ :)
სულ ესაა, მადლობა ყურადღებისთვის. 🙂
ძალიან ხშირად შეგიძლიათ იპოვოთ ჩამოსაშლელი ნავიგაციის ელემენტები შაბლონებში. დეველოპერები იყენებენ ამ ტიპისდამალული მენიუები დამატებითი ფარული ბმულების საჩვენებლად, რომლებიც თემატურად დაკავშირებულია მთავარ ელემენტთან. შეგიძლიათ იპოვოთ მოცურების პანელების ან სხვადასხვა აკორდეონის სტილის მენიუს მაგალითები, რომლებიც ახორციელებენ ამ ნავიგაციის პრინციპს.
მაგრამ შიგნით ეს გაკვეთილიჩვენ ავაშენებთ მარტივ ჩამოსაშლელ მენიუს jQuery-ის გამოყენებით. ის იმუშავებს ანიმაციის ტექნიკის გამოყენებით დაგვიანებული ეფექტების შესაქმნელად. CSS3 გარდამავალი ეფექტები ასევე გამოიყენება JavaScript კოდთან ერთად. შედეგი არის შაბლონი საიტის ნავიგაციისთვის.
HTMLპირველი, მოდით ავაშენოთ ძირითადი HTML5 შაბლონი. საჭირო უახლესი ვერსია jQuery, რომელსაც ვიღებთ Google API-დან. ჩვენ ასევე დავამატებთ სტილის ფაილის styles.css, რომელიც ქვემოთ იქნება წარმოდგენილი:
ჰორიზონტალური ნავიგაციის ზოლი | საიტის მასალების საიტი
ახლა მოდით შევხედოთ სტრუქტურას, რომელიც აგებულია გვერდის ზედა უწესრიგო სიის გარშემო. მთელი სია მოთავსებულია HTML5 ელემენტში უკეთესი SEO შედეგებისთვის.
კოდის სტრუქტურა საკმაოდ მარტივია. სიის თითოეული ელემენტი შეიცავს მონიშვნის ეფექტს, როდესაც მასზე მაუსის კურსორია განთავსებული. ყველა შიდა UL ელემენტი შეიცავს სიის თავდაპირველ ელემენტს, ამიტომ შეყვანის ფოკუსი არ იკარგება ჩამოსაშლელი მენიუს ელემენტებზე გადასვლისას.
ნავიგაციის სტილებისტილის ფურცელი შეიცავს კოდს ქონების მნიშვნელობების ნაგულისხმევად დასაბრუნებლად. ბევრი დეველოპერი შეიცავს ერიკ მეის ფაილს, მაგრამ ჩვენი გამოყენებისთვის ის ძალიან რთულია. გარდა ამისა, კოდი ინახება სხვა სერვერზე, რაც თავისთავად ცუდი გამოსავალია ამ შემთხვევაში.
Html, ტექსტი, div, span, აპლეტი, ობიექტი, iframe, h1, h2, h3, h4, h5, h6, p, ბლოკციტატი, pre, a, abbr, აკრონიმი, მისამართი, დიდი, ციტირება, კოდი, del, dfn, em, img, ins, kbd, q, s, samp, პატარა, strike, ძლიერი, sub, sup, tt, var, b, u, i, ცენტრი, dl, dt, dd, ol, ul, li, ველების ნაკრები, ფორმა, ლეიბლი, ლეგენდა, ცხრილი, წარწერა, tbody, tfoot, thead, tr, th, td, სტატია, განზე, ტილო, დეტალები, ჩაშენება, ფიგურა, ფიგურა, ქვედა კოლონტიტული, სათაური, hgroup, მენიუ, ნავი, გამომავალი, რუბი, განყოფილება, რეზიუმე, დრო, ნიშანი, აუდიო, ვიდეო ( ზღვარი: 0; შიგთავსი: 0; საზღვარი: 0; შრიფტის ზომა: 100%; შრიფტი: მემკვიდრეობა; ვერტიკალური გასწორება: საბაზისო; მონახაზი: არცერთი; -webkit-font- გამარტივება: -webkit-size-adjust: 100% -webkit-box-sizing: -moz-box-sizing: 101%; ("images/bg.png"; font-size: 1; ფიგურა, ქვედა კოლონტიტული, სათაური, hgroup, მენიუ, ნავი, სექცია ( ჩვენება: ბლოკი; o -წონა: თამამი;
კოდში არის საინტერესო თვისება -webkit-font-smoothing. იგი შექმნილია შრიფტების გასამარტივებლად ბრაუზერებში კოდის გაშვებისას Mac კონტროლი OS X ან iOS.
ახლა მოდით გადავიდეთ ჩვენს მენიუზე.
#ddmenu ( ეკრანი: ბლოკი; სიგანე: 100%; სიმაღლე: 80 პიქსელი; ზღვარი: 0 ავტომატური; ბალიშები: 0 15 პიქსელი; ფონი: #fff; საზღვრის რადიუსი: 6 პიქს; საზღვარი: 1 პიქსელი მყარი rgba(0, 0, 0, 0.15 box-shadow: 0 1px rgba(20, 0.2) font-weight: float-size: 1.45em; fff-მარჯვნივ: 1px სტრიქონი-სიმაღლე: none - 0,2s ხაზოვანი; hover > a ( ფერი: #7180a0; ფონი: #d9e2ee; ) #ddmenu ul (პოზიცია: აბსოლუტური; ზედა: 88 პიქსელი; სიგანე: 130 პიქსელი; ფონი: # fff; ეკრანი: არცერთი; შიგთავსი: 7 პიქსელი 0; საზღვრის რადიუსი: 3 პიქსელი საზღვარი: 1px მყარი rgba(0, 0, 0.2); )
ჩვენ ვამატებთ #ddmenu ul ამომრჩეველს, რათა შევარჩიოთ ყველა შიდა ელემენტი სიის თითოეულ ელემენტში, რადგან მნიშვნელოვანია მათთვის მანძილის განსაზღვრა. აბსოლუტური პოზიციონირება. ჩვენ ასევე ვამატებთ ხაზოვან გადასასვლელს ყველა ბმულისთვის, რომელიც ჩნდება, როდესაც თქვენ ატარებთ მათზე.
ახლა მოდით შევხედოთ ზედა ელემენტის ინდიკატორის შექმნას. იგი იქმნება ბრუნვის თვისებისა და უნივერსალური ჩარჩოს გამოყენებით, მუქი ფონი ჩრდილისთვის. ოფსეტური პოზიციონირების გამოყენებით, ჩვენი სტრუქტურის ერთი ელემენტი განლაგებულია მეორეზე მაღლა და ქმნის მაჩვენებლის ვიზუალურ წარმოდგენას ჩამოსაშლელ მენიუში.
#ddmenu ul:after ( შინაარსი: ""; სიგანე: 0; სიმაღლე: 0; პოზიცია: აბსოლუტური; ქვედა: 100%; მარცხნივ: 8 px; საზღვრის სიგანე: 0 8px 8px 8px; საზღვრის სტილი: მყარი; საზღვრის ფერი : #fff გამჭვირვალე; : საზღვრები - ფერი: rgba(0, 0, 0, 0.1) გამჭვირვალე ); o-transition: ყველა 0.2s წრფივი: ყველა 0.2s წრფივი )
JavaScript$(დოკუმენტი).ready(function())($("a").on("click", function(e)(e.preventDefault(); )); $("#ddmenu li").hover( ფუნქცია () (clearTimeout($.data(this"timer")); $("ul",this).stop(true,true).slideDown(200); ), ფუნქცია () ($.data(this , "timer", setTimeout($.proxy(function() ($("ul",this).stop(true,true).slideUp(200); ), this), 100));
კოდის პირველი ნაწილი წყვეტს დაწკაპუნებებს ბმულებზე და აჩერებს მათ ნაგულისხმევ დამუშავებას (გვერდების ჩატვირთვა URL-ზე).
კოდის მეორე ნაწილი ყველა მაგიას აკეთებს. ჩვენ ვამაგრებთ მოვლენის დამმუშავებელს სიის ერთეულზე მაუსის გადატანის პროცესისთვის. დამმუშავებელი შეაჩერებს ამჟამად აქტიურ ანიმაციას და გამოსცემს ახალ ქვეს .slideDown()-ის გამოყენებით. ჩვენ ასევე დავაყენეთ მცირე შეფერხება ისე, რომ იგი პასუხობს მხოლოდ ნივთის ფაქტობრივ შერჩევას.
დღეს მსურს გავაკეთო ნავიგაციის შედარებით ახალი თაობის შერჩევა საიტისთვის - სრულეკრანიანი მენიუები. ისინი გამოიყენება იმ შემთხვევებში, როდესაც გვერდზე არ არის ნავიგაცია, არის მხოლოდ ერთი ღილაკი, როდესაც დაჭერით, მენიუ იხსნება. მსგავსი პრინციპი ჩანს -framework-ში: როდესაც ნავიგაციის ზოლი აღარ ჯდება, მენიუს ელემენტების სიის ბლოკი უბრალოდ იმალება. მის ადგილას ჩნდება ღილაკი, როგორც წესი, სამი ზოლის გამოსახულებით. დაჭერისას გამოჩნდება სრული მენიუ. ბევრ თანამედროვე ვებსაიტზე მენიუ მუდმივად იმალება თუნდაც დიდი ეკრანები. ეს გაკეთდა ისე, რომ გვერდი არ ჩაიტვირთა. თუმცა ახლა ეს არ უნდა გააკეთოთ ყველა თქვენს პროექტზე. თუ მენიუს მეორეხარისხოვანი მნიშვნელობა აქვს, შეგიძლიათ მისი დამალვა, მაგრამ თუ თქვენ გაქვთ დიდი საიტი რთული სტრუქტურით, უმჯობესია არ გამოიყენოთ ეს ვარიანტი. Ისე. თან ზოგადი პრინციპისამუშაო დალაგებულია, მაგრამ ამ ტიპის მენიუ საკმაოდ სტანდარტულია, მინდა რაღაც ახალი. არც ისე დიდი ხნის წინ დავიწყე საიტების შემჩნევა, სადაც ნავიგაცია არა მხოლოდ იშლება, არამედ მთლიანად იხსნება სრულ ეკრანზე pop-up ფანჯარაში. რაღაც პოპულარული სლაიდ პანელების მსგავსია, მაგრამ ეს ყველაფერი იკავებს სამუშაო ფართობის მთელ არეალს. ცალკეული jQuery დანამატები და css3 გადაწყვეტილებები გამოჩნდა საიტების მიღმა, რაზეც რეალურად არის ეს თემა.
პირადად მე ძალიან მომწონს ნავიგაციის მენიუს ეს განხორციელება, რადგან მოსახერხებელია მობილური მოწყობილობების მომხმარებლებისთვის და ძალიან შთამბეჭდავად გამოიყურება. დიდი მონიტორები. სულ უფრო მეტი საიტია სრულეკრანიანი მენიუებით, უფასო jQueryასევე არის უფრო მეტი დანამატი და კონცეფცია თანდათან ხდება ტენდენცია.
Ისე. თქვენს ყურადღებას მოვიყვანთ 20 jQuery დანამატს სრულეკრანიანი მენიუსთვის ამომხტარ ფანჯარაში.
ფანჯრის დიზაინის ძალიან ლამაზი დამატებაა ანიმაციური SVG ხატულა. ნაგულისხმევად გამოიყურება, როგორც სამი ზოლი, მაგრამ დაწკაპუნებით, ხატულა გარდაიქმნება ისრად, რაც აჩვენებს, რომ მენიუ შეიძლება დამალული იყოს სრულ ეკრანზე ნავიგაციის სკრიპტში, იგივე დეველოპერებისგან, როგორც ზემოთ. ეს სკრიპტიაქვს ძალიან მაგარი და უჩვეულო გარეგნობის ეფექტი. მენიუს ღილაკზე დაწკაპუნებისას, ტალღა გამოდის ხატიდან css3-ის გამოყენებით მთელ მონიტორზე, რომელიც იზრდება მენიუს ელემენტების ფონზე. იგივე დამალვის ეფექტი.
ეს ნავიგაცია მშვენივრად მუშაობს მობილურ მოწყობილობებზე, მაგრამ იმის გათვალისწინებით, რომ გარეგნობის ეფექტი საკმაოდ მძიმეა, ვფიქრობ, ძველ ტელეფონებზე ყველაფერი ნელი იქნება (მე არ გამომიცდია, ასე რომ მოხარული ვიქნები, თუ დაწერთ თქვენს გამოცდილებას კომენტარებში) .
სამწუხაროდ, on მობილური ტელეფონებიარ მუშაობს სწორად: თუ მენიუს ბევრი ელემენტია და ისინი არ ჯდება ეკრანზე, მაშინ ვერტიკალური გადახვევა არ ჩანს და ნავიგაცია უბრალოდ წყდება.
კლასიკური JQuery-ის გამოყენებით, ამ თემაზე უამრავი სტატია დაიწერა. შევეცადე დავალება ცოტათი გამერთულებინა საიტზე გადაადგილებისას მენიუს სექციების ღია (ან დახურული, მომხმარებლის არჩევანის მიხედვით) დატოვების შესაძლებლობის დამატების გზით.
ამ პრობლემის გადასაჭრელად გადავწყვიტე გამომეყენებინა JQuery Cookie მოდული. ამ მოდულის უპირატესობა ის არის, რომ ოპერაცია ხორციელდება კლიენტის მხარეს, რაც, თავის მხრივ, ამცირებს დატვირთვას სერვერზე. მინუსი - თუ მომხმარებელს აქვს JS გამორთული, დანამატი არ იმუშავებს. მაგრამ ეს ვარიანტიმე არ მიმაჩნია, რადგან შემდეგ ჩამოსაშლელი მენიუს მთელი აზრი ქრება. მაშ ასე, დავიწყოთ.
პირველ რიგში, ჩვენ უნდა დავაკავშიროთ თავად JQuery ჩარჩო და JQuery მოდულიქუქი:
კოდი: HTML
შემდეგი არის მარკირება. ეს გამოიყურება როგორც მარტივი სია, არაფერი ზებუნებრივი. ერთადერთი, რაც მე აღვნიშნავ არის ის, რომ ტეგი უნდა შეიცავდეს სათაურს, მასზე დაწკაპუნებისას მენიუ ჩამოიშლება:
კოდი: HTML
პირველი სათაური
- პირველი ბმული
- მეორე ლინკი
- მესამე ლინკი
მეორე სათაური
- პირველი ბმული
- მეორე ლინკი
- მესამე ლინკი
მესამე ტიტული
- პირველი ბმული
- მეორე ლინკი
- მესამე ლინკი
მეოთხე ტიტული
- პირველი ბმული
- მეორე ლინკი
- მესამე ლინკი
ისე, და ასე შემდეგ უსასრულოდ. ახლა მოდის ყველაზე საინტერესო ნაწილი. მე დავამატებ რამდენიმე კომენტარს კოდში, რათა ის დაახლოებით გასაგები იყოს.
კოდი: JS
$(დოკუმენტი).ready(function())(
if($.cookie("num_open_ul"))( // შეამოწმა არის თუ არა ჩანაწერი ქუქიებში
if($.cookie("num_open_ul") != 0)( // და ეს ჩანაწერი არ არის 0-ის ტოლი
var number_eq = parseInt($.cookie("num_open_ul")-1);
$(".navigation_body").eq(number_eq).show().prevAll("#navigation h2.navigation_head:first").addClass("active_navigation");
}
};
$("#navigation h2.navigation_head").click(function())( // როდესაც დააწკაპუნებთ, ეს ფუნქცია იმუშავებს
if(!$(this).next().is(":visible"))(
$("div.navigation_body").ძმები ("div.navigation_body").slideUp(500); // თუ სხვები ღიაა, დახურეთ ყველაფერი, გარდა მიმდინარე
}
$(this).next("div.navigation_body").slideToggle(500).ძმები("div.navigation_body").slideUp(500);
$(this).toggleClass("active_navigation").ძმები ("#navigation h2.navigation_head").removeClass("active_navigation"); // კლასი დაემატა ღიას სტილის შესაცვლელად
setTimeout (fncookie, 600); //ჩაწერა თავად ქუქიებში დაგვიანებით, რათა სკრიპტს ჰქონდეს დრო, დაასრულოს სამუშაო ჩაწერამდე (500ms - სიჩქარე, დაყოვნება - 600ms)
});
ფუნქცია fncookie())( // თავად ჩაწერის ფუნქცია
var number_open_ul = 0;
var i = 0;
$("div.navigation_body").each(function())(
მე++;
if($(this).is(":visible"))(
ნომერი_ღია_ულ = i;
}
$.cookie("num_open_ul", ნომერი_open_ul, (იწურება:3, გზა:"/")); // შეინახეთ 3 დღის განმავლობაში მთელი საიტისთვის.
});
}
});
ანუ, ახლა, თუ მომხმარებელმა გახსნა მენიუ, დატოვა საიტი და რამდენიმე დღის შემდეგ ისევ დაუბრუნდა მას, მენიუ მისთვის ისევ ღია დარჩება.
და ბოლოს, ჩვენ გვაქვს მცირე შეხება: ფაქტობრივად, css სტილები. ამის გაკეთება შეგიძლიათ თქვენი გემოვნებით, მაგალითში მე ავიღე მზა დიზაინი ერთ-ერთი პროექტიდან
კოდი: CSS
#ნავიგაცია (
ზღვარი: 80px ავტო;
სიგანე: 250px;
}
#navigation h2, #navigation h2.navigation_head (
შრიფტის ზომა: 18px;
font-weight: უფრო თამამი;
ფონის ფერი: #ffb6c1;
background-image: -webkit-gradient(წრფივი,50% 0.50% 100%,color-stop(0%,#ffe9e9),color-stop(100%,#ffb6c1));
background-image: -webkit-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -moz-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -o-linear-gradient(#ffe9e9,#ffb6c1);
background-image: linear-gradient(#ffe9e9,#ffb6c1);
padding: 5px 3px 6px 3px;
ზღვარი: ავტო;
პოზიცია: ნათესავი;
}
#navigation h2.navigation_head:after (
პოზიცია: აბსოლუტური;
მარჯვნივ: 5px;
ფერი: #550000;
შინაარსი: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
კურსორი: მაჩვენებელი;
}
.active_navigation(
background-image: -webkit-gradient(წრფივი,50% 0.50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !მნიშვნელოვანი;
background-image: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !მნიშვნელოვანი;
background-image: -moz-linear-gradient(#ffb6c1,#ffe9e9) !მნიშვნელოვანი;
background-image: -o-linear-gradient(#ffb6c1,#ffe9e9) !მნიშვნელოვანი;
background-image: linear-gradient(#ffb6c1,#ffe9e9) !მნიშვნელოვანი;
}
.active_navigation:after (
პოზიცია: აბსოლუტური;
მარჯვნივ: 5px;
შინაარსი: "cssd" !მნიშვნელოვანი;
}
.navigation_body(
ჩვენება: არცერთი;
}
#ნავიგაცია ul (
ზღვარი: 0;
padding: 0;
list-style-type: none;
}
* html #ნავიგაცია ul li(
სიმაღლე: 1%;
}
#navigation div.navigation_body ul li (
ზღვარი მარცხნივ: 10 პიქსელი;
}
#ნავიგაცია a (
font-family: "Times New Roman";
ჩვენება: ბლოკი;
ფერი: #918871;
padding: 3px;
ფონის ფერი: #ffe3e0;
საზღვარი-ქვედა: 1px მყარი #fff;
ტექსტი-დეკორაცია: არცერთი;
}
#ნავიგაცია a:hover (
ფერი: #585858;
ფონის ფერი: #ffb6cc;
}
თუ ვინმემ შენიშნა, აქ შევეცადე გამომეყენებინა შინაარსის თვისება: +/- როდესაც დახურულია/ მენიუს გახსნა, მაგრამ შეგიძლიათ დაამატოთ სურათი ან ნებისმიერი სხვა დიზაინი. თქვენ შეგიძლიათ ნახოთ მაგალითი იმისა, რაც ჩვენ მივიღეთ აქ
როგორც ყოველთვის, მზად ვარ მოვუსმინო კითხვებს და ვცადო მათზე პასუხის გაცემა. ყველაფერი საუკეთესო, ყველაფერი საუკეთესო.
იმისათვის, რომ თავად დაწეროთ ნავიგაცია jQuery-ში ვერტიკალური ჩამოსაშლელი მენიუს სახით ქვეკატეგორიების ჩამოსაშლელი სიით, თქვენ უნდა გესმოდეთ ამ მექანიზმის მუშაობის პრინციპი. მაგრამ პირველ რიგში, მოდით შევხედოთ ნავიგაციის სტრუქტურას:
ნავიგაცია
როგორც თქვენ ალბათ მიხვდით, ჩვენი ჩამოსაშლელი მენიუ დაფუძნებულია ბურთულიან სიებზე. როცა ტეგზე ატარებთ
- ტესტი 1
- ტესტი 2
- ტესტი 3
- ტესტი 4
მაგრამ როგორ, გეკითხებით? დიახ, სინამდვილეში ყველაფერი ძალიან მარტივია. პირველ რიგში, მოდით გადავხედოთ ჩვენი ნავიგაციის სიის სტილის ფურცელს, ის ასე გამოიყურება:
ტექსტი ( ფონი: rgb(244, 244, 244); შრიფტი-ოჯახი: Verdana; შრიფტის წონა: 100; ) /*---ნავიგაცია---*/ #მენიუ ( სიგანე: 200 პიქსელი; ზღვარი: 0; ბალიშები: 2 პიქსელი; ფონი: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3 background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); 1px მყარი #2AC4B3 .menu:hover (ფონი: #00c; ფონი: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); ფონი: -webkit-linear-gradient( top, rgb(230, 230, 230), #0CBFAB ფონი: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB) .menu span ( სიგანე: 11px; სიმაღლე: 11px; ჩვენება: ბლოკი: კურსორი: 150 პიქსელი: - 198 პიქსელი; -გრადიენტი(ზედა, rgb(198, 255, 242), #2AC4B3); ფონი: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); ფონი: -o-წრფივი-გრადიენტი(ზემო, rgb(198, 255, 242), #2AC4B3); საზღვარი: 1px მყარი #fff; ) .menu ul li:hover ( ფონი: #00c; ფონი: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); ფონი: -webkit-linear-gradient(top, rgb( 230, 230, 230), #0CBFAB ფონი: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB) .menu a ( padding: 5px; display: block; text-); გაფორმება: არცერთი ფერი: თეთრი ) .მენიუ a:hover (ფერი: თეთრი;)
სტილის ფურცლიდან ხედავთ, რომ ჩამოსაშლელი სია თავდაპირველად არ არის დამალული, მაგრამ ჩვენ ამ პუნქტს გამოვასწორებთ:
$(დოკუმენტი).ready(function())($(".menu ul").hide();$(".menu span").css("ფონი", "url("down.png")" $("#menu li").hover(function())($(this).children("ul").show(); ;*/ $(this).find("span").css("background", "url("right.png")" /*Equivalent to $("span", this).css("background ", "url"); ("right.png")");*/ ),function())($(this).children("ul").hide(); /*$("ul)-ის ექვივალენტი ", this).hide(); */ $(this).find("span").css("background", "url("down.png")"); /*$("span", ეს ).css("ფონი", " url("down.png")");*/ )) ))
ახლა მოდით განვიხილოთ ჩამოსაშლელი მენიუს jQuery კოდი დეტალურად, რადგან... შესაძლოა, ზოგიერთისთვის მთლად ნათელი არ იქნება. თავიდანვე წერია შემდეგი კონსტრუქცია:
$(დოკუმენტი).ready(function())( ))
იგი განსაზღვრავს ბრძანებებს, რომლებიც უნდა შესრულდეს შემდეგ სრული დატვირთვაგვერდები. ეს გაკეთდა ისე, რომ სხვადასხვა სახის შეცდომები არ გამოჩნდეს, როდესაც შეუძლებელია რაიმე ობიექტის პოვნა იმის გამო, რომ ის უბრალოდ ჯერ არ არის დატვირთული.
$(".menu ul").დამალვა();
რას ნიშნავს ეს ჩანაწერი? "$()" კონსტრუქცია საშუალებას გაძლევთ აირჩიოთ ელემენტები. ამიტომ, თავიდანვე უნდა დავმალოთ ჩვენი ჩამოსაშლელი სია. ვიღებთ „$()“ კონსტრუქციას და ვწერთ ობიექტს, რომელიც გვაინტერესებს. ჩვენს შემთხვევაში, ეს ობიექტი იქნება პუნქტიანი სია კლასით "მენიუ". შემდეგი, ჩვენ ვწერთ "hide()" მეთოდს, რომელიც საშუალებას გვაძლევს დავმალოთ ჩვენთვის საინტერესო ობიექტი.
$(".menu span").css("background", "url("down.png")");
Რას აკეთებს? ის ეძებს ტეგს, რომლის მთავარ ელემენტს ენიჭება კლასის „მენიუ“ და „css(“background”, “url(”down.png”)”)” მეთოდის გამოყენებით, ანიჭებს “background” სტილის თვისებას მნიშვნელობას ” url("down. png")". "down.png" არის ხატულა, რომელიც მიუთითებს სიის გაფართოებაზე.
შემდეგ მოდის კონსტრუქცია, რომელიც გააფართოვებს ჩვენს სიას, ასე გამოიყურება:
$("#menu li").hover(function())($(this).children("ul").show(); $(this).find("span").css("ფონი", " url("right.png")" ),function())($(this).children("ul").hide();$(this).find("span").css("); ფონი" , "url("down.png")");
ჩვენ ვეძებთ ტეგს, რომლის მთავარი ელემენტი მინიჭებულია id="menu" შემდეგ მოდის "hover" მეთოდი და ორი ფუნქცია ფრჩხილებში. პირველი ფუნქცია შესრულდება მაუსის დაჭერისას, ხოლო მეორე შესრულდება, თუ მაუსის კურსორი ჩვენთვის საინტერესო ელემენტს დატოვებს.
პირველი ფუნქცია ამბობს:
$(this).ბავშვები("ul").show(); $(this).find("span").css("ფონი", "url("right.png")");
კონსტრუქცია „$(ეს)“ ნიშნავს, რომ ჩვენ გვაინტერესებს ელემენტი, რომელსაც ვუყურებთ ამ მომენტშირეჟისორი (ეს ინგლისურიდან ეს). და ჩვენ მივუთითეთ ტეგზე
ამის შემდეგ, ჩვენ ვეძებთ ტეგის შთამომავლებს, კერძოდ: tag და შევცვალოთ მისი ფონი სხვა ხატზე.
ამის შემდეგ იწერება ფუნქცია, რომელიც ყველაფერს აკეთებს ისე, როგორც თავდაპირველად იყო, მას შემდეგ, რაც მაუსის კურსორი დატოვებს სიის ელემენტს:
ფუნქცია())($(this).children("ul").hide();$(this).find("span").css("ფონი", "url("down.png")") ;)
იმისათვის, რომ jQuery-ში დაწერილმა კოდმა იმუშაოს და ჩვენი ჩამოსაშლელი მენიუ სწორად იმუშაოს, თქვენ უნდა ჩამოტვირთოთ ბიბლიოთეკა jquery.com-დან და დააკავშიროთ იგი გახსნის ტეგის შემდეგ ხაზის ჩაწერით.
კარგი, ახლა ყველაფერი დასრულდა! დასასრულს, მინდა აღვნიშნო, რომ თუ თქვენი საიტი საკმაოდ მძიმეა, მაშინ შესაძლოა სკრიპტი ძალიან გვიან ამოქმედდეს (საიტს დიდი დრო დასჭირდება ჩატვირთვას) და მომხმარებლები დაინახავენ, თუ როგორ იხსნება ის ჯერ მთლიანად და მხოლოდ ამის შემდეგ იმალება, რაც ხედავ, ძალიან მახინჯია. ამიტომ, ამ კონსტრუქციის მიღმა აუცილებელია ყველა jQuery ბრძანების გადატანა: “$(document).ready(function()())”. ეს ასე გამოიყურება:
$(დოკუმენტი).ready(function())( )) $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")"); $("#menu li").hover(function())($(this).children("ul").show(); $(this).find("span").css("ფონი", " url("right.png")" ),function())($(this).children("ul").hide();$(this).find("span").css("); ფონი" , "url("down.png")");
ჩვენი სკრიპტის კავშირი უნდა გადავიდეს ტეგიდან ბოლომდე, დახურვის ტეგამდე, ან შეგიძლიათ დააკავშიროთ სკრიპტი პუნქტიანი სიის შემდეგ.
(ჩამოტვირთვები: 314)
