ასევე ვინ არის დაინტერესებული, შეგიძლიათ შეხედეთ წინა გზა CSS- ის გამოყენებით, რომელიც აღწერილია სტატიაში -
ახლა ბიზნესში. როგორც ბოლო სტატიაში, პირველ რიგში, მოდით დავწეროთ HTML. ჩვენი მენიუს კოდი. კოდექსი არის ამ სტატიაში ისე, რომ არ არსებობს დაბნეულობა და უფრო გასაგებია. მენიუ ორი ელემენტით და ორივე აქვს submenu.
თუ თქვენ გაქვთ ასეთი ხაზი ან მსგავსი, რომელმაც უკვე ადრე ბიბლიოთეკა, მაშინ არ უნდა გავაკეთოთ ისევ.
სცენარის მეორე სტრიქონში, თქვენ დააკონკრეტებთ ჩვენს მენიუს IDI- ს. თუ იყენებთ ეს მეთოდი თქვენი მენიუ, მაშინ ბუნებრივია შეცვალოს სახელი თქვენი საკუთარი. -ში ეს საქმე ეს არის - #Slow_nav..
თქვენ ასევე შეგიძლიათ Customize ანიმაციური დრო. ეს სკრიპტი გახსნისა და დახურვისთვის არის 400 მილიწამს, ეს არის 0.4 წამი. თუ გსურთ შეცვალოთ უფრო დიდი ან პატარა.
ბოლო ნაბიჯი, დაამატეთ სტილის. ისინი ძალიან ჰგავს სტილის წარსულში სტატიიდან, არ არსებობს cSS თვისებები ანიმაცია.
#Slow_nav\u003e ul (სიგანე: 500px; ზღვარი: 25px auto 0;) #slow_nav\u003e ul\u003e li (list-style: none; ჩვენება: inline-block; პოზიცია: ნათესავი; padding: 0;) #slow_nav a (ტექსტი- მორთულობა: არა) #slow_nav\u003e ul\u003e Li\u003e A (Font-Size: 18px; padding: 5px; ფონის ფერი: # 333; ფერი: #FFF;) #Slow_nav Li UL (პოზიცია: აბსოლუტური; არა; ტექსტის გასწორება: ცენტრი; ზედა: 15px; შრიფტის ზომა: 15px; მარცხენა: 0; ზღვარი: 0; padding: 0; ჩვენება: არა;) #slow_nav li ul li (ფონის ფერი: # 333; ქვედა: 1px მყარი # 888;) #slow_nav li ul li: ბოლო ბავშვი (სასაზღვრო ბოლოში: არცერთი;) #slow_nav li ul li a (padding: 5px 12px; ფერი: #FFF; ჩვენება: ბლოკი;) #slow_nav li ul Li: Hover (ფონის ფერი: # 444;) #slow_nav li ul li: პირველი შვილი (ზღვარი-ტოპ 25px; თანამდებობა: ნათესავი;) #slow_nav li ul li: პირველი შვილი: ადრე (შინაარსი: "; : აბსოლუტური; სიგანე: 1px; სიმაღლე: 1px; სასაზღვრო: 5px მყარი გამჭვირვალე; სასაზღვრო-ქვედა-ფერი: # 333; მარცხენა: 10px;)
ასევე დაამატეთ სტილის ახალი ხაზირომელთანაც სკრიპტი სწორად მუშაობს. ელემენტისთვის - #Slow_nav li ul. ქონება განისაზღვრება ჩვენება: არა;. თუ ეს არ არის დამატებული, მაშინ ჩამოსაშლელი მენიუ თავდაპირველად ჩანს და მხოლოდ კურსორის შემდეგ გაქრა. ყველა სხვა სტილის, როგორც წინა სტატია.
წარსულის მეთოდის მსგავსად, ეს შეიძლება გამოყენებულ იქნას არა მხოლოდ თვითმმართველობის შეიცავს მენიუში, არამედ იმავე დინამიურ მენიუში, რომელიც შექმნილია მართვის სისტემით, როგორიცაა WordPress.. ამისათვის თქვენ უნდა შეცვალოთ სტილის და ყველა. ანუ, პირველი HTML კოდი არ უნდა გამოვიყენოთ, მხოლოდ სტილის გამოყენება. In სტილის თქვენ უნდა შეცვალოს სახელი Iyidi #slow_nav რა იქნება თქვენთან ერთად, კარგად, შესაძლებელია გამოსწორების რაღაც trifles. დეტალურად არ შეწყდება. თითოეული შემთხვევაში, თქვენ გჭირდებათ პირადი მიდგომა, ასე რომ მე ვწუხვარ ♥
ეს ყველაფერი, მადლობა თქვენი ყურადღება. 🙂
ამ სტატიაში ჩვენ ვითარდება მარტივი ჩამოაგდეს მენიუ JQuery გამოყენებით. დაწყებისთანავე, შეხედეთ დემო ფაილს. ჩვენ ვიმედოვნებთ, რომ თქვენც კი იციან jQuery და CSS- ის საფუძვლები. ამ Drop-Down მენიუს შექმნის ძირითადი ასპექტები CSS- ის გამოყენებაა: პოზიცია, ზედა, მარცხენა, Z- ინდექსის პარამეტრების გამოყენება.
ამ პარამეტრების გამოყენება, ჩვენ შეგვიძლია დარწმუნებული ვიყოთ, რომ ჩვენი მენიუ ზუსტად გამოჩნდება ბმულზე, რომელსაც კურსორი გამოაქვეყნა, და ეს აუცილებლად იქნება ყველა სხვა ელემენტი. ჩვენ ასევე მენიუში გამოვხატავთ კურსორის ჩამოსვლისას და გაუჩინარდა, როდესაც კურსორი გადაეცემა მხარეს. ამ მოვლენების განხორციელება, ჩვენ გამოვიყენებთ jQuery: Mouseenter და Mouseleve ფუნქციები. და ეს ყველაფერი ჩვენ უნდა შევქმნათ ჩამოსაშლელი მენიუ!
Demo ფაილი საბოლოო შედეგი და ჩამოტვირთვა ბმული
HTML კოდი
შეამოწმეთ HTML კოდი ჩამოსაშლელი მენიუ:
როგორც ხედავთ, აქ ჩვენ გამოვიყენებთ უწესრიგულ სიებს მენიუს ელემენტების განხორციელებაში. თითოეული მენიუ მინიშნება ენიჭება მენიუს მენიუს კლასს და თავად ჩამოშლადი მენიუ დაფარულია ქვე-ბმული კლასის მიერ. კლასი სახელები გამოყენებული იქნება jQuery, რათა დადგინდეს რომელი მენიუ თქვენ უნდა აჩვენოს.
CSS კოდი
შეამოწმეთ CSS კოდი:
/ * CSS for Dropdown მენიუ დაწყება * /
დ
{
სიის სტილი: არა;
Padding: 0px;
ზღვარი: 0px
}
ul li
{
ჩვენება: Inline;
Float: მარცხენა;
}
ul li ა
{
ფერი: #FFFFFF;
ფონის: # 990E00;
ზღვარი მარჯვნივ: 5px;
შრიფტის წონა: თამამი;
ფონტის ზომა: 12px;
შრიფტის ოჯახი: ვერდეანა;
ტექსტის გაფორმება: არა;
ჩვენება: ბლოკი;
სიგანე: 100px;
სიმაღლე: 25px;
ხაზი სიმაღლე: 25px;
ტექსტის გასწორება: ცენტრი;
-Webkit-Border-Radius: 5px;
-მოს-სასაზღვრო-რადიუსი: 5px;
სასაზღვრო: 1px მყარი # 560E00;
}
ul li a: hover
{
ფერი: #CCCCCC;
ფონის: # 560E00;
შრიფტის წონა: თამამი;
ტექსტის გაფორმება: არა;
ჩვენება: ბლოკი;
სიგანე: 100px;
ტექსტის გასწორება: ცენტრი;
-Webkit-Border-Radius: 5px;
-მოს-სასაზღვრო-რადიუსი: 5px;
საზღვარი: 1px მყარი # 000000;
}
ul li.sublinks ა
{
ფერი: # 000000;
ფონის: # F6F6F6;
სასაზღვრო-ქვედა: 1px მყარი #CCCCCC;
შრიფტის წონა: ნორმალური;
ტექსტის გაფორმება: არა;
ჩვენება: ბლოკი;
სიგანე: 100px;
ტექსტის გასწორება: ცენტრი;
ზღვარი ზედა: 2px;
}
ul li.Sublinks A: Hover
{
ფერი: # 000000;
ფონის: # ffefc6;
შრიფტის წონა: ნორმალური;
ტექსტის გაფორმება: არა;
ჩვენება: ბლოკი;
სიგანე: 100px;
ტექსტის გასწორება: ცენტრი;
}
ul li.Sublinks.
{
ჩვენება: არა;
}
/ * CSS for Dropdown მენიუდან დასასრული * /
ყველაზე CSS კოდექსის უმრავლესობა გამოიყენება მენიუსთვის (შეგიძლიათ მისცეს გარეგნობა მენიუ საკუთარი შეხედულებისამებრ), მაგრამ აქ არის ასევე მნიშვნელოვანი რაოდენობა:
1 - ჩამონტაჟებული ჩანართების სია-სტილი: არა;
2 - ჩვენ ვიცით, რომ სიები ბლოკ-ელემენტებია და ყოველთვის ვერტიკალურ წესრიგშია. იმისათვის, რომ მათ ჰორიზონტალურად შევქმნათ, ჩვენ მათ დავუმატებთ მათ ელემენტების პარამეტრს და მათ მარცხენა მხარეს გასწორება:
ჩვენება: inline;
float: მარცხენა;
3
- ნაგულისხმევი, ბმულები ქვედა შემთხვევაში ელემენტებია. ჩვენ გადავცემთ მათ ბლოკ-ელემენტებს ეკრანის გამოყენებით: ბლოკი (ასე რომ, ჩვენ შეგვიძლია ვკითხოთ მათ სიგანეზე).
4 - დამალვა ყველა მენიუ მეშვეობით:
Ul li.Sublinks.
{
ჩვენება: არა;
}
jQuery.
მომზადება ყოფილი ჯერ როდესაც ჩამოსაშლელი მენიუები განხორციელდა უხეში javascript კოდიგარდა ამისა, იყო არასასურველი კოდი. მაგრამ დღეს ყველაფერი ჩვენ გვჭირდება jQuery:
$ (ფუნქცია ()
Submenu.css ((
პოზიცია: "აბსოლუტური",
Zindex: 1000.
});
Submenu.stop (). Slidedown (300);
$ (ეს) .Slideup (300);
});
});
});
ძალიან საინტერესო და მარტივი რამ. მოდით ავუხსნათ, როგორ მუშაობს. დასაწყისისთვის, და როგორც ყოველთვის, ჩვენ დაფარავს ჩვენს კოდს jQuery კონტროლერი:
$ (ფუნქცია ()
...
});
ჩვენი კოდი გააქტიურებულია, როდესაც მაუსის კურსორი არის უხილავი (Mouseenter ფუნქცია), რომლის მიხედვითაც არის წვეთი ქვემოთ მენიუ ($ (". Dropdown") ენიჭება). ჩვენს შემთხვევაში, ეს არის მენიუს ბმული:
$ (ფუნქცია ()
$ ("Dropdown"). Mouseenter (ფუნქცია () (
........
});
});
მოდით დავრწმუნდეთ, რომ ჩვენ დამალვა (დამალვა ()) ყველა წინა ღია მენიუს სანამ მაუსის კურსორი ისვრის შემდეგ ბმულს:
$ (". Sublinks"). შეჩერება (ცრუ, ჭეშმარიტი) .დამალე ();
ყურადღება მიაქციეთ გაჩერების ფუნქციას, რომელიც გვეხმარება მხოლოდ ერთი ჩამოსაშლელი მენიუში იმ დროს, როდესაც მაუსის კურსორი მენიუში სხვადასხვა კავშირების გასწვრივ გადადის. თუ ჩვენ არ ვიყენებთ ამ ფუნქციას, თითოეული ჩამოსაშლელი მენიუ დარჩება ღია, სანამ ჩვენ მთლიანად გადაადგილდება მაუსის კურსორი მენიუდან. ეს ქმნის ზოგიერთ უგულებელყოფს, ამიტომ ჩვენ უნდა თავიდან ავიცილოთ ეს. შემდეგი, ჩვენ გაკეთებული გაკეთებული გახსნილი ვარდნა ქვემოთ მენიუ და მინიჭება ცვლადი:
Var submenu \u003d $ (ეს) .Parent (). შემდეგი ();
ეს არის ის, რაც იქნება HTML კოდი:
როდესაც მაუსის კურსორი არის ბმული dropdown კლასის, ჩვენ გადაადგილება გამოყენებით მშობელი () და შეწყვიტოს "Li", და შემდეგ მომდევნო (), ჩვენ აღმოჩნდება იყოს სასურველი ჩამოსაშლელი მენიუ, და "Li "უკვე იქნება სქესობრივი კავშირების კლასი (sublinks). ამდენად, jQuery გვაიძულებს პროცესს მოძიებაში, თუ რა Drop-Down მენიუ არის ნაჩვენები, როდესაც მაუსის კურსორი არის კონკრეტული ბმული.
Submenu.css ((
პოზიცია: "აბსოლუტური",
top: $ (ეს) .offset (). Top + $ (ეს) .Height () + "PX",
მარცხენა: $ (ეს) .offset (). მარცხენა + "PX",
zindex: 1000.
});
კოდექსი ძალიან მნიშვნელოვანია, რადგან ის უზრუნველყოფს ჩვენთვის, რომ ჩამოსაშლელი მენიუ ზუსტად განსაზღვრულია კონკრეტული მითითებით. თუ პოზიცია ასახავს აბსოლუტურს, ჩვენ შეგვიძლია განვახორციელოთ ელემენტი ჩვენი გვერდის ნებისმიერ სფეროში. შემდეგი, ჩვენ განსაზღვრავს ზედა პოზიციას ბმული, რომელთა კურსორი არის hovering ერთად $ (ეს). FFFSE (ეს ეხება მიმდინარე მენიუს, რომელსაც კურსორი გამოწვეულია) და დაამატეთ მას სიმაღლეზე ეს ისე, რომ მენიუ გამოჩნდება ზუსტად მითითება. მსგავსი რამ კეთდება მარცხენა პარამეტრით. შემდეგ ჩვენ ვიყენებთ Z- ინდექსს დარწმუნებული უნდა იყოს, რომ ჩვენი მენიუ სხვა ელემენტების თავზე გამოჩნდება.
Submenu.stop (). Slidedown (300);
რა თქმა უნდა, შეგიძლიათ გამოიყენოთ სხვა ვარიანტი ანიმაციის ტიპის Fadein, ანიმაცია თქვენი საკუთარი სტილის და ასე შემდეგ.
ახლა თქვენ უნდა გადაიტანოთ საწყისი კონცეფცია აჩვენებს ჩამოსაშლელი მენიუ, და მას დამალვა. ჩვენ გვჭირდება ეს ნაწყვეტი კოდი:
Submenu.mouseleave (ფუნქცია ()
$ (ეს) .Slideup (300);
});
ჩამოსაშლელი მენიუს დამალვის მიზნით, ჩვენ ვიყენებთ slideup, ანტონიზებული slidedown. განვიხილოთ ის ფაქტი, რომ Submenu არის ცვლადი, რომელიც ჩვენ შევქმენით კონკრეტული ჩამოსაშლელი მენიუდან.
ამდენად, ჩვენ გვქონდა მიმზიდველი ერთი დონის ჩამოსაშლელი მენიუ jQuery..
იმისათვის, რომ დაამატოთ ნავიგაცია თავად ვერტიკალური ჩამოსაშლელი მენიუს სახით subcategory drop-down სიაში, აუცილებელია ამ მექანიზმის ოპერაციის პრინციპის გაგება. მაგრამ პირველი ჩვენ გავაანალიზებთ ნავიგაციის სტრუქტურას:
ნაოსნობა
როგორც უკვე მიხვდა, ჩვენი ჩამოსაშლელი მენიუ აშენებულია აღნიშნული სიების საფუძველზე. როდესაც hovering მაუსის კურსორი tag
- ტესტი 1.
- ტესტი 2.
- ტესტი 3.
- ტესტი 4.
მაგრამ როგორ გეკითხებით? დიახ, ყველაფერი მართლაც ძალიან მარტივია. დასაწყისისთვის, მოდით გაუმკლავდეთ ჩვენი სანავიგაციო სიის სტილის მაგიდასთან, ეს ასე გამოიყურება:
სხეული (ფონის: RGB (244, 244, 244); შრიფტი-სახე: Verdana; შრიფტის წონა: 100;) / *- ნავიგაცია --- * / #menu (სიგანე: 200px; 2px;) #menu li (სიის ტიპის ტიპი: არა;) .Menu (პოზიცია: შოკოლადი: შოკოლადი: -მო-ხაზოვანი-გრადიენტი (საუკეთესო, RGB (198, 255, 242), # 2AC4B3) ; ფონზე: -Webkit-linear-Gradient (Top, RGB (198, 255, 242), # 2ac4b3); ფონი:-ხაზოვანი-გრადიენტი (საუკეთესო, RGB (198, 255, 242), # 2ac4b3); საზღვარი : 1px მყარი # 2ac4b3;) .Menu: Hover: Hover (Background: # 00C; Background: -Moz-Linear-Gradient (Top, RGB (230, 230, 230), # 0cbfab); Background: -WebKit-Linear-Gradient ( ყველაზე მაღალი, RGB (230, 230, 230), # 0cbfab); ფონზე: -o-linear-Gradient (Top, RGB (230, 230, 230), # 0cbfab);) .Menu Span (სიგანე: 11px; სიმაღლე: 11px; ჩვენება: ბლოკი; პოზიცია: აბსოლუტური; ზედა: 8px; მარჯვენა: 10px; კურსორი: მაჩვენებელი;) .Menu ul (სიგანე: 150px; მარგინი: 0; padding: 1px; პოზიცია: აბსოლუტური; 198px;) .Menu UL LI (ფონის: შოკოლადი; -მომ-ხაზოვანი-გრადიენტი (ყველაზე, RGB (198, 255, 242), # 2ac4b3); Background: -Webkit-linear-Gradient (Top, RGB (198, 255, 242), # 2ac4b3); ფონის: -ო-ხაზოვანი-გრადიენტი (საუკეთესო, RGB (198, 255, 242), # 2ac4b3); სასაზღვრო: 1px მყარი #fff; ). Ul: Hover (Background: # 00C; Background: -Moz-Linear-Gradient (Top, RGB (230, 230, 230), # 0cbfab); Background: -WebKit-Linear-Gradient (Top, RGB ( 230, 230, 230), # 0cbfab); ფონზე: -o-linear-Gradient (Top, RGB (230, 230, 230), # 0cbfab);) .Menu A (Padding: 5px; ჩვენება: მორთულობა: არა; ფერი: თეთრი;) .Menu A: Hover (ფერი: თეთრი;) / *----
სტილის ფურცელიდან ჩანს, რომ თავდაპირველად ჩამოსაშლელი სია არ არის დამალული, მაგრამ ამ მომენტში ჩვენ გამოსწორდება:
$ (დოკუმენტი) .რადი (ფუნქცია () ($ "მენიუ ul"). დამალვა ("მენიუ"). CSS ("ფონზე", "URL (" Down.png ")"); $ ("# მენიუ"). Hover (ფუნქცია ($) .ბავშვები ("UL"). აჩვენე () / * ექვივალენტი $ ("ul", ეს) .Show (); * / $ ეს). FIND ("SPAN"). CSS ("ფონზე", "URL (" RIGHT.PNG ")"); / * ეკვივალენტი $ ("Span", ეს) .css ("ფონზე", "URL (" *) *); * /), ფუნქცია () ($ (ეს) .ბავშვები ("ul"). დამალვა (); / * ექვივალენტი $ ("UL", ეს) .დამალდა (); $ (ეს). FIND ("Span"). CSS ("ფონზე", "URL (" Down.png ")") / * $ ("Span", ეს) .css ("ფონზე", "URL ( "Down.png") "); * /))))
ახლა ჩვენ გავაანალიზებთ მენიუს მენიუს JQuery კოდს, რადგან ალბათ, ვინმე არ იქნება სრულიად გაგებული. თავდაპირველად, შემდეგი მშენებლობა ინიშნება:
$ (დოკუმენტი) .რადი (ფუნქცია ())
იგი დადგენილი ბრძანებები, რომლებიც უნდა შესრულდეს შემდეგ სრული გვერდი ჩამოტვირთვა. ეს კეთდება ისე, რომ არ არსებობს სხვადასხვა სახის შეცდომები, თუ შეუძლებელია რაიმე ობიექტის მოძიება იმის გამო, რომ ის ჯერ კიდევ არ არის დატვირთული.
$ ("მენიუ ul"). დამალვა ();
რას ნიშნავს ეს შესვლის ნიშნავს? "$ ()" დიზაინი საშუალებას გაძლევთ აირჩიოთ ელემენტები. შესაბამისად, თავიდანვე, ჩვენ გვჭირდება დამალვა ჩვენი ჩამოსაშლელი სია. ჩვენ ვიღებთ დიზაინის "$ ()" და დაწერეთ ის ობიექტი, რომელიც დაინტერესებულია. ჩვენს შემთხვევაში, ეს ობიექტი იქნება სია კლასის "მენიუდან". შემდეგი, ჩვენ განსაზღვრავს "დამალვა ()" მეთოდი, რომელიც საშუალებას გაძლევთ დამალვა ობიექტი თქვენ დაინტერესებული.
$ ("მენიუ Span"). CSS ("ფონზე", "URL (" Down.png ")");
რას აკეთებს? იგი ეძებს tag მშობელთა ელემენტი რომელიც ენიჭება "მენიუს" და "CSS" მეთოდის გამოყენებით, "URL (" Down.png ")") "" ფონური "სტილი" URL ("Down.png") "." Down.png "არის ხატი, რომ სიის გახსნა შესაძლებელია.
მაშინ არის დიზაინი, რომელიც გაამჟღავნებს ჩვენს სიას, ეს ასე გამოიყურება:
$ ("# მენიუ LI"). Hover (ფუნქცია () ($ (ეს) .ბავშვები ("ul"). შოუ (). $ ("Span"). CSS ("ფონზე", " URL ("RIGHT.PNG") ");), ფუნქცია () ($ (ეს) .ბავშვები (" ul "). დამალვა (). $ (" Span "). CSS (" ფონზე " , "URL (" Dowg ")");
ჩვენ ვეძებთ TAG- ს მშობლის ელემენტს, რომელიც ენიჭება ID \u003d "მენიუში". შემდეგი არის "Hover" მეთოდი და ფრჩხილებში ორი ფუნქცია. პირველი ფუნქცია შესრულდება, როდესაც თქვენ hover მაუსის კურსორი, და მეორე უნდა შესრულდეს, თუ მაუსის კურსორი ტოვებს ნივთი თქვენ დაინტერესებული.
პირველი ფუნქცია გაწერილია:
$ (ეს) .ბავშვები ("ul"). ჩვენება (); $ (ეს). FIND ("span"). CSS ("ფონზე", "URL (" RIGHT.PNG ")");
დიზაინი "$ (ეს)" ნიშნავს, რომ ჩვენ ვართ დაინტერესებული ამ პუნქტში, რომელსაც ჩვენ ვართ ამ მომენტში ჩამოიყვანეს (ეს ინგლისიდან. ეს). და ჩვენ მივიღეთ tag
ამის შემდეგ, tag ჩვენ ვეძებთ შთამომავლები, კერძოდ: tag და მას აქვს ფონზე სხვა ხატი.
ამის შემდეგ, ფუნქცია ინიშნება, რომელიც ყველაფერს აკეთებს, როგორც თავდაპირველად, მაუსის შემდეგ კურსორი ტოვებს სიას:
ფუნქცია () ($ (ეს) .ბავშვები ("ul"). დამალვა (). $ ("SPAN"). CSS ("ფონზე", "URL (" Dowg ")"););
იმისათვის, რომ დაწერონ წერილობითი კოდი jQuery და ჩვენი წვეთი ქვემოთ მენიუ მუშაობდა სწორად, თქვენ უნდა ჩამოტვირთოთ ბიბლიოთეკის JQuery.com და დააკავშირებს მას, საუბარი შემდეგ გახსნის tag
ხაზი.Ის არის! დასასრულს, მინდა აღვნიშნო, რომ თუ თქვენი საიტი საკმაოდ სახალისოა, მაშინ შესაძლებელია, რომ სკრიპტი ძალიან გვიან დაიწყებს (საიტი დიდი ხნის განმავლობაში იტვირთება) და მომხმარებლები დაინახავთ, თუ როგორ გვაშორებს მთლიანად, მაგრამ მხოლოდ მაშინ მალავს რომ, ხედავთ, ძალიან მახინჯი. აქედან გამომდინარე, აუცილებელია ამ დიზაინის ყველა jQuery ბრძანების გაუძლოს: "$ (დოკუმენტი) .რადი (ფუნქცია ())". ეს ასე გამოიყურება:
$ (დოკუმენტი) .რატომ (ფუნქცია ()) $ ("მენიუ UL"). დამალვა (); $ ("მენიუ Span"). CSS ("ფონზე", "URL (" Down.png ")"); $ ("# მენიუ LI"). Hover (ფუნქცია ("). შოუ (). $ (" Span "). CSS (" ფონზე "," URL ("RIGHT.PNG") ");), ფუნქცია ($ (ეს) .ბავშვები (" ul "). დამალვა (). $ (" Span "). CSS (" ფონზე "," URL ("Dowg") ");)
დამაკავშირებელი ჩვენი სკრიპტი უნდა გადაეცეს tag
უმარტივეს, დახურვის თვალწინან თქვენ შეგიძლიათ დააკავშიროთ სკრიპტი აღნიშნულ სიაში.(ჩაშვების: 314)
JQuery- კლასიკური დახმარებით, ამ თემის სტატიები დაწერილია. მე შევეცადე ცოტა უფრო გაართულებს დავალებას და დასძინა, რომ მენიუს ღია (ან დახურული, მომხმარებლის შერჩევისას დამოკიდებულია) გადაადგილების უნარი.
ამ ამოცანის გადასაწყვეტად, გადავწყვიტე, რომ გამოიყენო jQuery Cookie მოდული. უპირატესობა ამ მოდულის არის ის, რომ ოპერაცია ხორციელდება კლიენტის მხარეს, რომელიც, თავის მხრივ, ამცირებს დატვირთვის სერვერზე. მინუს- თუ მომხმარებელი გამორთულია JS- სთან, მოდული არ იმუშავებს. მაგრამ ეს ვარიანტი მე არ მიმაჩნია, რადგან მაშინ მენიუს მთლიანი წერტილი ქრება. ასე რომ, დავიწყოთ.
პირველი, ჩვენ უნდა დააკავშიროთ jQuery ჩარჩო თავად და jQuery Cookie მოდული:
კოდი: HTML
შემდგომი მარკირება. ეს გამოიყურება მარტივი სია, არაფერი ზებუნებრივი. ერთადერთი შენიშვნა, რომ tag
უნდა იყოს სათაური, როდესაც დაჭერით რომელი მენიუ დაეცემა:
კოდი: HTML
კარგად, და ასე განუსაზღვრელი ვადით. ახლა ყველაზე საინტერესოა. კოდექსში დავამატებ ცოტა კომენტარს, რათა იყოს უხეშად გასაგები, ჩოპ
კოდი: JS.
$ (დოკუმენტი) .რადი (ფუნქცია () (
თუ ($. Cookie ("Num_open_ul")) (/ / შეამოწმეთ, თუ არსებობს Cookies- ში შესვლისას
თუ ($. Cookie ("Num_open_ul")! \u003d 0) (// და ეს ჩანაწერი არ არის 0
var number_eq \u003d parseint ($ cookie ("num_open_ul") - 1);
$ ("Navigation_body"). eq (number_eq) .Show ("ნავიგაცია H2.Navigation_head: პირველი"). AddClass ("Active_navigation");
}
};
$ ("# ნავიგაცია H2.Navigation_head"). დაწკაპეთ (ფუნქცია (/ / / როდესაც დაჭერით, ეს ფუნქცია იმუშავებს
თუ (! $ (ეს). Next (). (": ხილული"))
$ ("div.navigation_body"). ძმა ("div.navigation_body"). Slideup (500); / / თუ სხვები გაიხსნა, დახურულია ყველაფერი, გარდა მიმდინარე
}
$ (ეს). next ("div.navigation_body"). Slidetoggle (500) .Siblings ("div.navigation_body"). Slideup (500);
$ (ეს) .toggleClass ("Active_navigation"). ძმა ("# ნავიგაცია H2.Navigation_head"). Removeclass ("Active_navigation"); / / ღია დასამატებელი კლასის შეცვლა სტილი
SettimeOut (Fncookie, 600); / / ჩანაწერი Cookie ერთად დაგვიანებით, ისე, რომ სკრიპტი მოახერხა დასრულების სამუშაო (500 MS სიჩქარე, დაგვიანებით, 600ms)
});
ფუნქცია FnCookie () (// ჩაწერის ფუნქცია თავად
var number_open_ul \u003d 0;
var i \u003d 0;
$ ("div.navigation_body"). თითოეული (ფუნქცია () (
I ++;
თუ ($ (ეს) .ისი (": ხილული"))
Number_open_ul \u003d i;
}
$ .Cookie ("Num_open_ul", Number_open_ul, (იწურება: 3, Path: "/")); // მაღაზია 3 დღის განმავლობაში მთელი საიტი.
});
}
});
ანუ, ახლა, თუ მომხმარებელი გახსნილია მენიუში, დატოვა საიტი და წავიდა მას შემდეგ რამდენიმე დღის შემდეგ, მენიუ კვლავ ღიაა.
კარგად, საბოლოოდ, ჩვენ გვაქვს პატარა შტრიხკოდი: რეალურად, cSS- სტილები. თქვენ ნამდვილად აკეთებთ თქვენს გემოვნებას, მაგალითად, მე მივიღე მზად დიზაინი ერთ-ერთი პროექტით
კოდი: CSS.
#Navigation (
ზღვარი: 80px ავტო;
სიგანე: 250px;
}
#Navigation H2, #navigation h2.navigation_head (
ფონტის ზომა: 18px;
შრიფტის წონა: თამამი;
ფონის ფერი: # ffb6c1;
ფონის გამოსახულება: -Webkit-Gradient (Linear, 50% 0.50% 100%, ფერადი გაჩერება (0%, # FFE9E9), ფერადი გაჩერება (100%, # FFB6C1));
ფონის გამოსახულება: -Webkit-Linear-Gradient (# FFE9E9, # FFB6C1);
ფონის გამოსახულება: -MOZ-Linear-Gradient (# FFE9E9, # FFB6C1);
ფონის გამოსახულება: -ო-ხაზოვანი-გრადიენტი (# FFE9E9, # FFB6C1);
ფონის გამოსახულება: ხაზოვანი-გრადიენტი (# FFE9E9, # FFB6C1);
Padding: 5px 3px 6px 3px;
მარგინი: ავტო;
პოზიცია: ნათესავი;
}
#Navigation h2.navigation_head: შემდეგ (
პოზიცია: აბსოლუტური;
მარჯვენა: 5px;
ფერი: # 550000;
შინაარსი: "CSSB";
}
#Navigation H2: Hover, #navigation H2.Navigation_head: Hover (
კურსორი: მაჩვენებელი;
}
Active_navigation (
Background-Image: -Webkit-Gradient (Linear, 50% 0.50% 100%, ფერადი გაჩერება (0%, # FFB6C1), ფერადი გაჩერება (100%, # FFE9E9))! მნიშვნელოვანია;
ფონის გამოსახულება: -Webkit-Linear-Gradient (# FFB6C1, # FFE9E9)! მნიშვნელოვანია;
ფონის გამოსახულება: -MOZ-Linear-Gradient (# FFB6C1, # FFE9E9)! მნიშვნელოვანია;
ფონის გამოსახულება: -ო-ხაზოვანი-გრადიენტი (# FFB6C1, # FFE9E9)! მნიშვნელოვანია;
ფონის გამოსახულება: ხაზოვანი-გრადიენტი (# FFB6C1, # FFE9E9)! მნიშვნელოვანია;
}
. Action_navigation: შემდეგ (
პოზიცია: აბსოლუტური;
მარჯვენა: 5px;
შინაარსი: "CSSD"! მნიშვნელოვანია;
}
.Navigation_body (
ჩვენება: არა;
}
#Navigation ul (
ზღვარი: 0;
Padding: 0;
სიის სტილის ტიპი: არა;
}
* Html #navigation ul li (
სიმაღლე: 1%;
}
#Navigation div.navigation_body ul li (
ზღვარი მარცხნივ: 10px;
}
#Navigation a (
შრიფტის ოჯახი: "Times New Roman";
ჩვენება: ბლოკი;
ფერი: # 918871;
Padding: 3px;
ფონის ფერი: # FFE3E0;
სასაზღვრო ბოლო: 1px მყარი #FF;
ტექსტის გაფორმება: არა;
}
#Navigation a: hover (
ფერი: # 585858;
ფონის ფერი: # FFB6CC;
}
თუ ვინმეს ყურადღება გაამახვილა, აქვე შევეცადე კონტენტის ქონების გამოყენება: + - დახურული / ღია მენიუმაგრამ შეგიძლიათ დაამატოთ გამოსახულება ან სხვა დიზაინი. მაგალითის ნახვა, რაც ჩვენ გავაკეთეთ, შეგიძლიათ
როგორც ყოველთვის, მზად ვარ კითხვების მოსმენა და ვცდილობ მათ უპასუხოს. ყველა საუკეთესო, ყველა საუკეთესო.
ამ გაკვეთილში, ჩვენ გაჩვენებთ, თუ როგორ უნდა შექმნათ გვერდითი ჩამოსაშლელი მენიუ კი უბრალო ნავიგაციისთვის. ასეთი მენიუ არის პოპულარული ტენდენცია თანამედროვე ვებ დიზაინში. ამ ტიპის მენიუ ბევრ საიტებზე გამოიყენება. მასთან ერთად, შეგიძლიათ მიიღოთ ქაოსის მოშორება პროექტის გვერდებზე, უფრო იკითხება, ყურადღება გამახვილეთ მთავარ შინაარსზე მომხმარებლების ყურადღების ცენტრში.
ეს არის შესანიშნავი გზა მინიმალიზმის მისაღწევად, ყურადღების გადასატანი ფაქტორების გარეშე. დღეს ჩვენ შევქმნით ასეთ მენიუს თავს.
ნავიგაციის მენიუს შესაქმნელად, პირველ რიგში წაიკითხეთ პარამეტრები:
პირველი თქვენ უნდა ჩამოტვირთოთ ნორმალიზაცია .css და კონფიგურაცია ნაგულისხმევი ბრაუზერის სტილის, დარწმუნდით, რომ მენიუ გამოიყურება იგივე ყველა ბრაუზერში. მენიუს პუნქტებთან ერთად arrow- ის ჩვენება, ჩვენ გამოვიყენებთ Fontawesome- ს. მენიუში კლასების გადართვა, დატვირთვის jQuery და გადაადგილება მთელი მომხმარებლის jquery კოდი script.js. ეს უკანასკნელი ბმული ვებ-პროექტის მთავარი მაგიდაა.
ხატულა ჰამბურგერი
ჰამბურგერის ხატი არის საიტის ნავიგაციის საერთო ატრიბუტი. ხშირად ის ქმნის ხატის შრიფტის გამოყენებით, როგორიცაა ფონტავესომა, მაგრამ ამ გაკვეთილში ჩვენ დავამატებთ რამდენიმე ანიმაციას, ამიტომ ჩვენ შევქმნით მას ნულიდან. ჩვენი ჰამბურგერი ხატი არის span tag შემცველი სამი კლასის div, ნაჩვენები სახით ჰორიზონტალური ზოლები.
Styles ასე გამოიყურება:
Toggle-Button (პოზიცია: ფიქსირებული; სიგანე: 44px; სიმაღლე: 40px; padding: 4px; გარდამავალი: 25s; z- ინდექსი: 15;) -ბარი (პოზიცია: აბსოლუტური, სასაზღვრო რადიუსი: 2px; სიგანე: 80%; გარდამავალი: 5s;) .ტოგგ-ს ღილაკი (სასაზღვრო: 4px მყარი # 555; საზღვრის ქვედა: არა; 0;) .თოგის ღილაკი .Menu-Bar-Middle (სიმაღლე: 4px; ფონის ფერი: # 555; ზღვარი-ზედა: 7px; ზღვარი-ქვედა: 7px; ზედა: 4px;) .Toggle-Button .Men-Bar -ბოთტომ (სასაზღვრო: 4px მყარი # 555; სასაზღვრო-ზედა: არცერთი: არცერთი: 22px;) ) .Button-Open .Menuu-Bar-Middle (Transforme: Translate (230px); გარდამავალი :1s .1s Ease-in; opacity: 0;) .Button-Open .Mon-Bar-Bott თარგმნა (8px, -7px); გარდამავალი: 5s;)
ხატი აქვს ფიქსირებულ პოზიციას და არ შეცვლის გვერდს. ასევე აქვს Z- ინდექსი 15, რაც იმას ნიშნავს, რომ ის ყოველთვის იქნება სხვა ელემენტებზე. შედგება სამი ბარით, რომელთაგან თითოეული იზიარებს სხვა სტილებს. აქედან გამომდინარე, ჩვენ გადავდივართ თითოეულ ბარი კლასში. დანარჩენი სტილის გადაადგილება ცალკე კლასები. Magic ხდება, როდესაც ჩვენ დავამატებთ სხვა კლასს span tag, რომელიც ღიაა. ჩვენ დავამატებთ მას გამოყენებით jQuery შემდეგნაირად:
$ (დოკუმენტი) .რატომ (ფუნქცია () (Var $ togglebutton \u003d $ ("Toggle-Button"); $ togglebutton.on ("დაწკაპუნება", ფუნქცია () ($ (ეს). );));););
მათთვის, ვინც არ იცნობს jQuery - ჩვენ ინიციალიზაცია ცვლადი $ Togglebutton, რომელიც შეიცავს ჩვენი ხატი. ჩვენ გადარჩენა ცვლადი გარეშე საჭიროება javaScript- ის გამოყენებით. შემდეგ ჩვენ ვქმნით ღონისძიების მსმენელს, რომელიც ითვალისწინებს ხატულაზე. ყოველ ჯერზე მომხმარებლის დაწკაპუნებით ჰამბურგერის ხატი, ღონისძიების მსმენელი იწყებს ToggleClass () ფუნქციას, რომელიც კონცენტრირებულია კლასში. Button-Open.
როდესაც კლასი. Button-Open ემატება, ჩვენ შეგვიძლია გამოვიყენოთ ის, რომ შეცვალოთ მეთოდები. ჩვენ ვიყენებთ CSS3 თარგმანის () და როტაცია () ფუნქციები ისე, რომ ზედა და ქვედა ზოლები როტაცია 45 გრადუსს და შუა ბარი გადავიდა მარჯვნივ და გაქრა. აქ არის ის, რაც ანიმაცია შეიძლება კონფიგურირებული იყოს:
ნავიგაციის მენიუ
ახლა, რომ თქვენ გაქვთ ჰამბურგერი ხატი, მოდით ეს სასარგებლო და შექმნას ჩამოსაშლელი მენიუ, როდესაც თქვენ დააჭირეთ მას. ეს არის ის, თუ როგორ გამოიყურება მენიუს მარკირება:
ახლა ჩვენ არ ვცხოვრობთ ამ მენიუს თითოეულ სტილში, ნაცვლად ფოკუსირება მნიშვნელოვანი მომენტები. უპირველეს ყოვლისა, ეს არის div და class.menu-wrap. შეხედეთ თავის სტილებს:
მენიუ-გადატანა (ფონის ფერი: # 6968ab; პოზიცია: ფიქსირებული; სიმაღლე: 100%; სიგანე: 280px; ზღვარი მარცხნივ: -280px; შრიფტის ზომა: 1EM; შრიფტი-წონა: 700 გარდამავალი: .25s; Z- ინდექსი: 10;)
პოზიცია ფიქსირდება, ასე რომ, როდესაც სენსორული მენიუ გვერდი ყოველთვის რჩება იგივე პოზიციაზე. სიმაღლე 100% საშუალებას იძლევა მენიუ გვერდზე ყველა ვერტიკალური სივრცის დაკავება. გთხოვთ გაითვალისწინოთ, რომ მენიუს სიგანე ნეგატიურ რიცხვს აქვს უარყოფითი რიცხვი. ეს იმას ნიშნავს, რომ მენიუ გაქრება ნახულობით. კიდევ ერთხელ ხილული, ჩვენ შევქმნით სხვა toggler კლასს jQuery. ჩვენი javaScript ფაილი ასე გამოიყურება:
$ (დოკუმენტი) .რატომ (ფუნქცია () (Var $ togglebutton \u003d $ ("გადართვა- ღილაკს"), $ menuwrap \u003d $ ("მენიუ-გადატანა"); $ togglebutton.on ("Click" ($ (ეს) .ToggleClass ("ღილაკი ღია"); $ menuwrap.toggleClass ("მენიუ-შოუ");););
დაამატეთ კიდევ ერთი $ menuwrap ცვლადი, რომელიც შეიცავს მენიუს ჭურვი. გამოიყენეთ იგივე ღონისძიების დამმუშავებელი, რომელიც ადრე შევქმენით. მხოლოდ ამ დროს ჩვენ გადავცემთ ორ კლასს: ერთი ღილაკი და ერთი მენიუს ჭურვი. კლასების მარცხენა სფეროს ღირებულება არის 0, ის დაამატებთ ჩრდილის ეფექტს.
მენიუ-შოუ (ზღვარი-მარცხნივ: 0; ყუთი-ჩრდილი: 4px 2px 15px 1px # b9adad;)
Submenu და ბმულები
თქვენ შეიძლება შეამჩნევთ, რომ ერთ-ერთ სიაში ერთ-ერთში არის კლასი Menu-item- ჰყავს შვილები, რომლებიც შეიცავს submenu. გარდა ამისა, span tag მოთავსებულია Class.Sidebar-Menu-Arrow- თან ერთად.
sPAN ჰყავს :: ფსევდო-ელემენტის შემდეგ და შეიცავს შანტავენ arrow. By Default, Submenu არის დამალული და იქნება ხილული მხოლოდ მაშინ, როდესაც დაჭერით arrow. აქ არის ის, თუ როგორ შეგვიძლია ამის გაკეთება jQuery:
$ (დოკუმენტი) .რატომ (ფუნქცია () ("Sidebararrow \u003d $ (" Sidebar-Menu-Arrow "); $ SideBararrow.Click (ფუნქცია (). Next (). Slidetoggle (300);) );););
როდესაც ჩვენ დააჭირეთ arrow, ჩვენ მოვუწოდებთ ფუნქციას, რომ თავის მხრივ, მიზნად ისახავს მომდევნო პუნქტის დაუყოვნებლივ შემდეგ span (ჩვენს შემთხვევაში ეს არის submenu) და ხდის ჩანს. ფუნქცია ჩვენ ვიყენებთ არის slidetoggle. იგი იწვევს პუნქტს გამოჩნდება და გაქრება. ფუნქცია ჩვენს მაგალითში აქვს ერთი პარამეტრი - ანიმაციის ხანგრძლივობა.
მენიუს ელემენტი მაგალითზე აქვს hover ეფექტი. იგი შექმნილია გამოყენებით :: ფსევდო-ელემენტის შემდეგ. კოდი ასე გამოიყურება:
მენიუ-Sidebar Li\u003e A :: შემდეგ (შინაარსი: "; ჩვენება: ბლოკი; სიმაღლე: 0.15EM; პოზიცია: აბსოლუტური; ზედა: 100%; სიგანე: 102%; Translate (-50%) ფონის გამოსახულება: ხაზოვანი-გრადიენტი (მარჯვნივ, გამჭვირვალე 50.3%, # FFFA3B 50.3%); გარდამავალი: ფონური პოზიცია .2S .1S .1s .1s Ease-Out; ფონის ზომა: 200% ავტომატური; A: Hover :: მას შემდეგ, რაც (ფონის პოზიცია: -100% 0;)
:: შემდეგ ფსევდო-ელემენტს შეიცავს ბლოკის დონის ელემენტს თითოეული ბმულის ბოლო სიგანე და 0.15EM სიმაღლე. გამოიყურება ეს ყველაფერი, როგორც ხაზგასმული. თავისებურება ის არის, რომ ჩვენ არ ვართ მხოლოდ ფონური ფერის გამოყენებით ხაზი, ჩვენ ვიყენებთ ხაზოვანი-გრადიენტი () ფუნქციას ფონზე გამოსახულებაზე. მიუხედავად იმისა, რომ ეს ფუნქცია განკუთვნილია ფერადი გრადიენტების შესაქმნელად, ჩვენ შეგვიძლია შევცვალოთ ფერი სასურველი ინტერესის მითითებით.
მენიუ-Sidebar Li\u003e A :: შემდეგ (მარჯვნივ, გამჭვირვალე 50.3%, # FFFA3B 50.3%);););
ნახევარი ხაზი გამჭვირვალეა და მეორე ნახევარი ყვითელია. ფონზე ფონური 200%, ჩვენ გაორმაგდება სიგანე ჩვენი ბლოკი. ახლა გამჭვირვალე ნაწილი იღებს მთელ სიგანეს მითითებას, ხოლო ყვითელი ნაწილი მარცხნივ გადადის და უხილავი ხდება. ჩვენ შევცვლით ფონზე პოზიციას, როდესაც -100% -ით. ახლა ყვითელი ნაწილი ხდება ხილული და გამჭვირვალე - დამალული.
გამჭვირვალე ნაწილის ნაცვლად, შეგიძლიათ გამოიყენოთ ნებისმიერი სხვა ფერი. თქვენ ასევე შეგიძლიათ ექსპერიმენტი gradients.
თითოეული ელემენტი, რომელიც აშშ-ს მიერ არის გათვალისწინებული. თქვენ შეგიძლიათ შექმნათ ასეთი მენიუ ნებისმიერი დიზაინის საიტის გამოყენებით TemplateMonster კოლექციიდან. როგორც ხედავთ, უფრო ადვილია, ვიდრე წარმოიდგინეთ. წარმატებებს გისურვებთ პროფესიული და მოსახერხებელი საიტების შექმნაში!
