კარგი HTML კოდისა და CSS მარტივი წესების დახმარებით შეგიძლიათ შექმნათ ლამაზი მენიუ, რომლის შეცვლა და დამატება შეიძლება მარტივად. მარკირების ენისა და კასკადური სტილის ცხრილების გამოყენებით შეგიძლიათ დარწმუნდეთ, რომ მენიუები გამართულად მუშაობს ყველა ბრაუზერში.
ინსტრუქციები
Ნაბიჯი 1
პირველი, შექმენით თქვენი მენიუს ძირითადი სტრუქტურა. გახსენით ტექსტის რედაქტორი და შექმენით დანომრილი სია ქვემენიუში, რომელიც მოქმედებს როგორც მშობელთა სიის ერთეული. Მაგალითად:
-
პირველი ელემენტი
- ჩამოსაშლელი ელემენტი
- ვარდნა 2
ნაბიჯი 2
შეინახეთ გენერირებული სია ცალკე html ფაილში. შემდეგ, შექმენით ფაილი.css გაფართოებით და შეიყვანეთ სტილის ფურცლის ყველა პარამეტრი.
ნაბიჯი 3
ამოიღეთ ნებისმიერი ბალიშები და ტყვიები, რომლებიც გამოიყენება ტყვიების სიაში და დააყენეთ მენიუს სიგანე CSS ინსტრუმენტების გამოყენებით: ul {list-style: none;
სიგანე: 200px; }
ნაბიჯი 4
დააყენეთ სიაში ყველა პუნქტის ფარდობითი პოზიცია პოზიციის ატრიბუტის გამოყენებით: ul li {პოზიცია: ნათესავი; }
ნაბიჯი 5
შემდეგ, თქვენ უნდა მოაწყოთ ქვემენიუ, რომლის თითოეული ელემენტი გამოჩნდება მშობელი მენიუს მარჯვნივ იმ მომენტში, როდესაც მაუსის მაჩვენებელი იქნება ელემენტზე: li ul {position: absolute;
მარცხნივ: 199px;
ზედა: 0;
ჩვენება: არცერთი; } მარცხენა ატრიბუტი ერთი პიქსელით ნაკლებია მენიუს სიგანეზე. ეს საშუალებას აძლევს ამომხტარი ელემენტების ინტელექტულად განთავსებას, ორმაგი საზღვრების შექმნის გარეშე. ჩვენების ატრიბუტი გამოიყენება ქვემენიუს დამალვისთვის გვერდის გახსნისას.
ნაბიჯი 6
ბმულების სტილის განთავსება, როგორც გსურთ, შესაბამისი css ვარიანტების გამოყენებით. ჩართეთ ეკრანი: ბლოკის პარამეტრი ისე, რომ თითოეულმა ბმულმა დაიკავოს მთელი თავისი ადგილი.
ნაბიჯი 7
იმისათვის, რომ მენიუ გამოჩნდეს კურსორის ზევით (hover), უნდა მიუთითოთ კოდი: li: hover ul {display: block; }
ნაბიჯი 8
დააყენეთ დამატებითი პარამეტრები ბმულების საჩვენებლად და საგნების ჩამონათვალის მიხედვით.
ნაბიჯი 9
ამომხტარი მენიუ მზად არის. ახლა რჩება ატრიბუტის ჩასმა.html ფაილში: ამომხტარი მენიუ
