Ვერტიკალური მენიუ საიტის სახით აკორდეონი ერთად jQuery

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

შექმნა მენიუ "აკორდეონი"

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

HTML კოდი

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

გადავარჩინოთ ეს კოდი ფაილი სახელად Accord_menu.html.

როგორც ხედავთ, ჩვენ შევქმენით უწესრიგო სია. იგი შედგება 3 ძირითადი რაოდენობა:

- ფოტო;

- ფილმები;

- წიგნები.

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

CSS კოდი

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

ფერი არის მითითებული CSS ფაილი, ზომა მარკერები ამოღებულ ელემენტი სიაში მარცხენა. განისაზღვრება თუ როგორ უნდა მოიქცეს თითოეული პუნქტის და ქვე-მენიუ, როდესაც თქვენ hover მას. მაგალითად:

# E1fee2 - ეს ღია მწვანე ფერის ქვე.

# C4f0f7 -golubovaty ჩრდილში sub როდესაც თქვენ hover მათზე.

ჩვენების ქონება ვთხოვთ ბლოკი მნიშვნელობა შეცვალოს საჭირო padding და ზომა. ფერი, ზომა, შრიფტის ტიპი, ადგილმდებარეობა - ყველაფერი ისე, როგორც აღწერილია CSS ფაილი. მას, მაგალითად, accordionmenu_my1.css.

დამაკავშირებელი jQuery მენიუ გაუმჯობესება

შეგახსენებთ, ჩვენი მიზანია - შექმნას ვერტიკალური მენიუ jQuery. თუ თქვენ არ იცნობს ამ ტექნოლოგიის, არ ინერვიულოთ. ჩვენ ვიყენებთ Google საცავი და დაკავშირება JQuery script. ეს გახდის უფრო მიმზიდველი მენიუში. jQuery არის JavaScript ბიბლიოთეკა საფუძველზე ურთიერთქმედების ჰიპერტექსტის მარკირების HTML და JavaScript. jQuery გაძლევთ წვდომას შინაარსი და ატრიბუტები ელემენტების.

ასე რომ, დაკავშირება საჭირო script ორგანოს HTML ფაილი და დადგენილი წესის შენახვის 2 ცვლადები, გარდა დოღი ელემენტებს. ხელი შეუწყოს კოდი, დახურვის სხვა ჩანართების გახსნის ერთი, რომელიც არ არის მაუსის დაწკაპუნებით. აი, როგორ გამოიყურება:

ყველა ცვლილების შენახვა, ვხედავ, თუ რას ჰგავს ბრაუზერის მენიუში. ეს არის საერთო შედეგი: შედეგად, ჩვენ არ მოდის მიმზიდველი menu, რომ თქვენ ყოველთვის შეგიძლიათ შეცვალოს, დამოკიდებულია მათი პრეფერენციები. და ახალი ცოდნის სფეროში jQuery, CSS, თქვენ შექმნათ უნიკალური ელემენტები საიტი, გასაუმჯობესებლად მათი უნარი.