Კომპიუტერები, Პროგრამული უზრუნველყოფა
Როგორ გააკეთოს ჩამოსაშლელი CSS მენიუები
დღეს ჩვენ განვიხილავთ კითხვაზე "როგორ შევქმნა ჩამოსაშლელი CSS მენიუები?". აქვე უნდა ითქვას, ერთბაშად რომ ამ ერთეულზე გაკეთდება გარეშე დამაკავშირებელი ნებისმიერი დამატებითი სახსრები. რომ არის, მენიუ შეიქმნება მხოლოდ CSS და HTML.
სასწავლო
კარგად ესმით, თუ რა არის ის სტატიაში, თქვენ უნდა ცოტა გაეცნოს თეორიული მასალა. მაგრამ თუ თქვენ იცნობს ფსევდო-კლასი, შეგიძლიათ გამოტოვოთ ეს პუნქტი. ასე რომ, უნდა შეიქმნას ვერტიკალური ჩამოსაშლელი CSS მენიუები, ჩვენ გვჭირდება ელემენტს, როგორც «: hover». ფსევდო «: hover» შეიძლება დაეკისროს რაიმე HTML tag. ეს გაძლევთ საშუალებას განსაზღვროს იმ მომენტში, როდესაც ნივთის Hover თქვენი მაუსის. მაგალითად, ჩვენ არ დანიშნა ქონება: «a: hover {color: red;}». ამ ჩანაწერში ნიშნავს, რომ როდესაც თქვენ hover მაუსის გამოდის წითელი შინაარსი ნებისმიერი tag . აღსანიშნავია, რომ ეს ფსევდო ელემენტს ასევე ინაქტივირებული. სხვათა შორის, «: hover» უკვე დაკავშირებული მსგავსი ელემენტები. მაგრამ ამ ჩვენ შევქმნით ფსევდო CSS ჩამოსაშლელი მენიუ.
ინსტრუქცია
პირველ რიგში, მოდით გავიგოთ, რა არის ჩამოსაშლელი მენიუ. ამ განსაზღვრების ქვეშ იღებს ბევრი სხვადასხვა მეთოდები მშენებლობის სხვადასხვა ფორმატისთვის. ამ შემთხვევაში, ჩვენ ანალიზი სტრუქტურა, რომელიც შედგება რამდენიმე მუდმივად ჩანს ნივთები და რამდენიმე დამატებითი (დამალული). მოდით დასრულდება თეორია და დაიწყოს პრაქტიკაში.
- ჩვენ ვქმნით განლაგება ჩვენს მენიუში. ამისათვის, HTML კოდი მარკირება. შექმნა წყობილი სიაში:
-
- < / ul>. რაღაც მსგავსი უნდა გამოიყურებოდეს თქვენი ჩამოსაშლელი მენიუ. CSS ჩაერიოს შემდეგ. ამ შემთხვევაში მთავარი სია შედგება სამი ძირითადი და ორი ერთვის.
- დამალვა ქვემენიუში. ამისათვის ჩვენ ვიყენებთ სტილების, განსაზღვრავს შემდეგი თვისებები: ul ul {display: none;} ეს იქნება ამოიღონ ელემენტები მეორე სიაში ეკრანზე.
- მენიუს შექმნა CSS, ვარდნა ქვემოთ ძირითადი სია. კასკადური სტილების დაწერა შემდეგი წესით: ul li: hover ul {display: block;}. ამ ჩანაწერში ნიშნავს, რომ როდესაც თაგვის დასრულდა ელემენტს li, რომელიც მდებარეობს ul სიაში ჩანს ეკრანზე ul (თან ერთვის). ერთი შეხედვით, ასეთი სქემა ჩანდეს რთული და გაუგებარია. სინამდვილეში, ყველაფერი ძალიან მარტივია.
- გამოიყენეთ ეს განლაგება თავს ჩასმა tags
- თქვენი ტელეფონი. თქვენ შეგიძლიათ შეცვალოთ ნომერი სიის ელემენტების.
დეკორატიული ცვლილებები
როგორც კი მთავარ მენიუში განლაგება მზად არის, თქვენ შეგიძლიათ გააგრძელოთ რეგისტრაცია. ალბათ, ბევრი, პირველ რიგში სურვილი, თავი დაეღწია მარკერებზე სია ერთეულზე. ეს კეთდება გამოყენებით ერთი ქონება CSS, კერძოდ სია სტილის ტიპის. თქვენ უნდა დაამატოთ შემდეგი ჩანაწერი: li {სია სტილის ტიპის: none;}. მაშინ თქვენ შეგიძლიათ ჩაწეროთ ჩარჩო და ფონზე. სასაზღვრო და ფონზე დაგეხმაროთ ამ. ალბათ ზოგიერთი არ მინდა ჩამოსაშლელი მენიუ გამოჩნდება, როგორც დამატებითი სია, უბიძგებს ამავე ძირითადი ელემენტები. დაფიქსირება ამ, შეგიძლიათ პოზიციონირება იგი. ამისათვის, კასკადური სტილების დავწეროთ შემდეგი ჩანაწერი: ul ul {პოზიცია: აბსოლუტური; მარცხენა: 15px; მარჯვნივ: 15px; დაბრუნება: 15px; bottom: 15px;}. რა თქმა უნდა, ის ღირებულებები, თქვენ უნდა გამოიყენოთ თქვენი საკუთარი. დამოკიდებულია სადაც თქვენ გვინდა, რომ ჩამოსაშლელი მენიუები, CSS შესთავაზებს სხვა მრავალი ფუნქციები, რომელიც შეიძლება დაამატოთ სხვადასხვა ეფექტები და დაამშვენებს ჩვენი სიები.
დასკვნა
კიდევ ერთხელ აღსანიშნავია, მშენებლობა მენიუ განლაგება. დაავალოს CSS წესები გამოიყენება ამ შემთხვევაში ჩართული მნიშვნელობა, მაგალითად, ul ul. თუ თქვენ ხართ დოკუმენტის შეხვდება სხვა მსგავსი სტრუქტურა, არ შეიძლება დიდი პრობლემები. ამ სიტუაციაში, თქვენ უნდა გამოვიყენოთ კონკრეტული მიზნით, მაგალითად, სელექციონერები და პირადობის მოწმობები. აღნიშნული მუხლი განლაგება ჩამოსაშლელი მენიუ შექმნილია გაეცნოს ზოგადი დიზაინი. დანარჩენი მუშაობა ემყარება თქვენი shoulders.
Similar articles
Trending Now