როგორ მოვახდინოთ მოცურების მენიუ

Სარჩევი:

როგორ მოვახდინოთ მოცურების მენიუ
როგორ მოვახდინოთ მოცურების მენიუ

ვიდეო: როგორ მოვახდინოთ მოცურების მენიუ

ვიდეო: როგორ მოვახდინოთ მოცურების მენიუ
ვიდეო: Slide Out Navigation | HTML, CSS & JavaScript 2024, მაისი
Anonim

ვებსაიტისა და პროგრამული უზრუნველყოფის განვითარების ერთ-ერთი ყველაზე მნიშვნელოვანი ასპექტი მენიუს შექმნაა. ლამაზი მოცურების მენიუ მრავალი ვებსაიტის მფლობელისა და პროგრამისტის ნიშნად რჩება. ეს შეიძლება გაკეთდეს CSS და Expression Web ინსტრუმენტების გამოყენებით.

როგორ შევქმნათ მოცურების მენიუ
როგორ შევქმნათ მოცურების მენიუ

ინსტრუქციები

Ნაბიჯი 1

გახსენით Expression Web და გადადით Style Management- ზე, რომ დაიწყოთ მოცურების მენიუს შექმნა და დააჭირეთ ღილაკს New Style. დაასახელეთ ახალი სტილის არჩევა ul li. დარწმუნდით, რომ გენერირებულ ფაილს აქვს ჩამოსაშლელი.css გაფართოება. მოცურების მენიუს შესაქმნელად, მიუთითეთ შესაბამისი პოზიცია ეკრანზე. განსაზღვრეთ მენიუს თითოეული ელემენტის სიგანე და წაშალეთ ზედმეტი წერტილები, რომლებიც შეიძლება მათ წინ იყოს.

ნაბიჯი 2

გაუშვით Layout ვარიანტი და დააყენეთ Display ატრიბუტი. მიეცით მას შესაბამისი Inline მნიშვნელობა ეკრანზე გასწორებისთვის. დააყენეთ Float ატრიბუტი მარცხნივ და დააჭირეთ ღილაკს Apply. სიის ყველა ელემენტი დააყენეთ ერთ ხაზზე. მათი სისუფთავე წესრიგის შესანარჩუნებლად და გადაფარვის გარეშე, დააყენეთ Width ატრიბუტი Position- ით 150 px სახით. დარწმუნდით, რომ სიაში ყველა ელემენტი იგივე ზომისაა. ამოიღეთ წერტილები თითოეული ელემენტის წინ, სიაში ატრიბუტისკენ გადასვლისას და სიის ტიპის None- ზე დაყენება. დააჭირეთ ღილაკს "კარგი", რომ მიიღოთ ცვლილებები და ამოქმედდეს.

ნაბიჯი 3

შეცვალეთ სტილი და შრიფტის ზომა ul li- სთვის. გადადით სტილის მართვაზე და დააწკაპუნეთ ღილაკზე მარჯვენა ღილაკი, აირჩიეთ სტილის შეცვლა. თქვენ უკვე ნაცნობ დიალოგურ მენიუს ნახავთ. გადადით შრიფტზე, აირჩიეთ Font-family და მიუთითეთ ეს ატრიბუტი Helvetica, Arial, Sans-serif. შეცვალეთ შრიფტის ზომა და დააყენეთ 0, 9. დააყენეთ Text-transform ატრიბუტი ზედაზე. სიმაღლე - პოზიცია ატრიბუტში მიუთითეთ მენიუს ელემენტების ზუსტი სიმაღლე 30 px მნიშვნელობის დაყენებით.

ნაბიჯი 4

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

გირჩევთ: