ჰორიზონტალური css მენიუ ხატებით. ვერტიკალური მენიუ CSS ჰორიზონტალურ მენიუში html და css ხატებით

არსებობს უამრავი მზა გადაწყვეტა ასეთი პანელების შესაქმნელად jQuery დაგეხმარებათ, გარდა პლაგინებისა და მოდულებისა ვებსაიტების მართვის სხვადასხვა სისტემებისთვის.
ეს ყველაფერი კარგია, მაგრამ შესაძლებელია თუ არა CSS-ის გამოყენება ძირითადი სლაიდ პანელების განსახორციელებლად? აბსოლუტურად შესაძლებელია! ალე ყურადღებით))) ვუყურებ მათ, რომ ყველა ბრაუზერი არ უჭერს მხარს CSS3-ის ამჟამინდელ ძალას.

ცოტა ხნის წინ, "მთის დანახვა", გადაწყვეტილება და რობოტის კონდახი. ერთ-ერთი პირველი კომენტარი ასეთი იყო: „მაინც გადავიტანოთ...“. Რატომაც არა? მოდით)).

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

HTML განლაგება

მოდით საბოლოოდ გავაანალიზოთ პანელის შეცვლა, რის შედეგადაც გამოიყენება სტანდარტული ნიშანი ():

არის ჩამრთველი დოკუმენტის ზედა ნაწილში, ან უბრალოდ ტეგის შემდეგ . ჩვენ ვწერთ დამალულ ატრიბუტს, რომელიც პირდაპირ მიუთითებს ამ ელემენტის „კაკვების“ მდებარეობაზე, ასევე უნიკალურ იდენტიფიკატორს, მაგალითად, id="nav-toggle", ტეგის for ატრიბუტთან დასაკავშირებლად. , რომელიც ყალიბდება და გამოსახულია პანელის გადართვის ღილაკის სახით.

მსგავსად burner ნაცვლად ლულის პანელი vikoristuvuv tag