Ვერტიკალური CSS მენიუ: აკეთებს იგი საკუთარ თავს

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

ძირითადი ნაბიჯები

უნდა შექმნათ მარტივი ვერტიკალური მენიუ CSS, თქვენ უნდა შემდეგი ნაბიჯები:

1. პირველი, განსაზღვრავს ბმულების სია (გამოყენებით კოდი HTML), რომლის მენიუში იქნება. მივცეთ სახელი, მაგალითად, ასეთია:

1. მთავარი.
2. ჩვენი ისტორია.
3. უხელმძღვანელებს.
4. მომსახურება.
5. კონტაქტები.

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

ჩვენ წერენ HTML კოდი, შენარჩუნება my_Vmenu.html ფაილი და ნახოთ, თუ როგორ გამოიყურება ბრაუზერში

ეს არის საფუძველი (ჩონჩხი) ჩვენი მენიუ. # 1, # 2, და ა.შ. უნდა შეიცვალოს მითითება. ვნახოთ, როგორ გამოიყურება ბრაუზერში. სურათზე თქვენ არ მოსწონს. ჩვენ ახლა უნდა დავიწყოთ აღწერს ელემენტების სტილი, რათა სრული ვერტიკალური CSS მენიუები.

აღწერა სტილის

შექმენით ფაილი my_Vmenu.css, რომელმაც ყველაფერი გსურთ გააუმჯობესოს გამოჩენა ასეთი მნიშვნელოვანი ელემენტია საიტზე. აქ არის კოდი, დანერგვა, რომელიც აცოცხლებს ვერტიკალური CSS მენიუები. ეს და დაწეროთ ახალი ფაილი, და მაშინ ჩვენ მიიღოს უფრო ახლოს მნიშვნელობით ძირითადი ხაზები, რომლებიც გადაეცა.

დეტალური აღწერილობა გამოიყენება სტილების

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

სია სტილის ტიპის საშუალებას გაძლევთ ამოიღონ სია მარკერები. მიიღწევა "0" ზღვარი და padding ამოიღონ ზედმეტი padding სიაში. როგორც ჩანს HTML კოდი, ჩვენს მენიუში ჩამოთვლილია და სტილის განისაზღვრება გამოყენებით CSS.

ul # my_Vmenu - საერთო სტილი მთელი სია.

ul # my_Vmenu li a - style კავშირების tag li.

ul # my_Vmenu li a: hover - აღწერა ტიპის ფარგლებში განხილვის მენიუს ელემენტი იმ დროს, როდესაც ერთ-ერთი მაჩვენებელი მეტი ადამიანი.

ul # my_Vmenu li მალები - ტექსტი აღწერა (სათაური მენიუ).

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

სტილი უნდა იყოს დაკავშირებული შორის ხელმძღვანელი tags in a html ფაილი. menu_1.png და menu_2.png - ეს არის სურათი, სურათზე პუნქტს ნორმალური სახელმწიფო და hover.

უმჯობესია შეინახოთ სურათი ცალკე საქაღალდეში, სურათებით, დაარქვით my_images, მაგრამ შემდეგ შესწორება CSS კოდი. დაწერეთ სადაც ეს სურათები ნაჩვენები, ისინი ამ დირექტორიაში: url (my_images / menu_1.png) და url (my_images / menu_2.png).

დანარჩენი თვისებები აღწერილია CSS კოდი, უნდა გვესმოდეს, მარტივად. ისინი განსაზღვრავენ გამოჩენა ჩვენი მენიუ. ეს არის მარტივი შეამჩნია, რომ სიგანე და სიმაღლე ნივთები მითითებული იგივე ნივთები ნორმალური სახელმწიფო, და როდესაც თქვენ hover მაუსის მათზე. შრიფტის ზომა 18px, padding განსაზღვრავს წანაცვლება სხვადასხვა მხარეს ადგილის სახელები. ჩვენება გაძლევთ მითითებული ჩვენება ერთეულის მითითებული სიგანე და padding.

ჩვენი ვერტიკალური მენიუ

როგორც ხედავთ, ვერტიკალური CSS მენიუები შეიქმნას ადვილად. On მონაცემების საფუძველზე ცოდნის თქვენ შეძლებთ, რათა ის ლამაზი და მიმზიდველი სია თქვენს საიტზე! გამოიყენეთ თქვენი ფანტაზია, და შემდეგ თანამედროვე მენიუ შეავსებს თქვენს საიტზე.