1. სუფთა CSS / HTML წვეთი მენიუდან ამ tutorial ჩვენ კლასიკური ჰორიზონტალური მენიუ სუფთა CSS. მას აქვს...
2. ჩვენ ვხუმრობთ ჰორიზონტალურ მენიუში მიუთითებს.
3. აღწერეთ CSS / HTML წვეთი მენიუ

სუფთა CSS / HTML წვეთი მენიუდან

ამ tutorial ჩვენ კლასიკური ჰორიზონტალური მენიუ სუფთა CSS. მას აქვს ხატები სიები. როდესაც პუნქტს მიუთითებს, ეს შეუფერხებლად იცვლება ღილაკის ფერისა და ტექსტის შეცვლაზე, ჩრდილში არის დამატებული. Drop-down სიები შეიძლება გაკეთდეს მრავალ დონის და მთავარია ყველა საკმაოდ უბრალოდ განხორციელდა სუფთა CSS3.

ამ გაკვეთილის გაგრძელება აქ - ნაწილი 2 მობილური ვერსია ჰორიზონტალური მენიუ ".

იხილეთ კალამი POyzbW დენისის მიერ @Dwstroy ) კოდეპენ .

გაკვეთილის გამოყენება:

• ჩვენება: flex;
• ტრანზიციის გამოყენება;
• პოზიცია პოზიციებზე.

HTML ჰორიზონტალური მენიუ სტრუქტურა

პირველი, ჩაწერეთ მარკირება ჰორიზონტალური მენიუს ქვემოთ. ჩვენ გავაუმჯობესებთ გარემოს განვითარებას ჩემს შემთხვევაში, ეს არის PhpStorm, შექმნა index.html ფაილი, განსაზღვროთ ჩარჩო html: 5, შეცვალეთ lang ერთად ru.

ყველა მეტა წაიშლება კოდირების გარდა, მე დავწერ ჩემს ტერმინს " ტომ მენიუ ".

სხეულს შორის ჩვენ ვწერთ სათაურს და ის არის ბლოკი, რომელიც კლასს .dws-menu რომელიც შეიცავს ჩვენს მენიუში. შემდეგი, სტრუქტურა იქნება შემდეგი, ჩვენ შევქმნით სიებს თანხის ხუთი ცალი. თითოეული სიაში იქნება ბმული href = "#" ატრიბუტით. შემდეგ მე წავალ ხატი კლასში.

<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ header>

ჩვენ მიმართეთ ვრცელდება.

მოდით დავწეროთ მენიუს ნივთების დასახელება ( სახლი, პროდუქტები, მომსახურება, სიახლეები, კონტაქტები ).

შემდეგ, ამოირჩიეთ ხატები. გადადით საიტზე, ჩვენ შეარჩევს ხატები ამ მენიუს ელემენტი:

<i class = "fa fa- home "> </ i> <i class = "fa fa- shopping cart "> </ i> <i class = "fa fa cogs "> </ i> <i კლასის <fa fa- th-list > </ i> <i class = "fa fa- კონვერტი- open "> </ i>

ჩამოტვირთეთ არქივი საიტიდან ხატებით, ამოიღეთ მისი შინაარსი თქვენს კომპიუტერში, დააკოპირეთ ფონტების საქაღალდე და CSS საქაღალდე თქვენი განვითარების გარემოში.

ფონტების საქაღალდე შეიცავს ხატულა შრიფტებს და CSS საქაღალდე შეიცავს მათ სტილებს. შეკუმშული სტილები შეიძლება ამოღებულ იქნას შრიფტი- awesome.min, ჩვენ აკავშირებს uncompressed font-awesome.css.

In index.html ჩვენ აკავშირებს ხატები, და ჩვენ რეგისტრაცია თითოეული პუნქტის საკუთარი ხატი სტილი ( სახლში , სავაჭრო-კალათა , cogs , th- სია , კონვერტში ღია ).

ჩვენ ძირითადი ჩარჩო გავაკეთეთ, შევქმნათ submenu შემდეგ ძირითადი სტილი, და ახლა ჩვენ შევქმნით ფაილი, სადაც ჩვენ აღწერს ძირითადი სტილის ჰორიზონტალური მენიუ style.css და დააკავშირებს მას index.html. შეამოწმეთ, რომ სტილის დაკავშირება, შექმნის img საქაღალდე, მასში მე დავსვა თვითნებური სურათის ფონზე. მოდით დავწეროთ სურათის კავშირი ფონზე.

სხეული {background-image: url ("../ img / ep_naturalwhite.png"); }

როგორც ვხედავთ, ყველაფერი არის ნაჩვენები და შემდეგ გავაგრძელებთ სტილის აღწერას.

უპირველეს ყოვლისა, მოდით გადავარჩინოთ ყველა შიგთავსი, რომლითაც შესაძლებელია სხვადასხვა ბრაუზერის დაყენება:

.dws-menu * {margin: 0; padding: 0; }

დააყენეთ ჰედერი 200 მწვერვალზე. და დაავალოს, რომელიც შეგიძლიათ ჩამოტვირთოთ და ცალკე დააკავშირებს საკუთარ თავს საიტზე, მხოლოდ იმ შემთხვევაში, ჩაწერეთ დამატებითი შრიფტები.

header {margin: 200px; შრიფტიანი ოჯახი: კუპრი, Arial, Helvetica, sans-serif; }

მარკერების სიებში დამალვა:

.dws-menu ul, .dws-menu ol {სიის სტილი: არა; }

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

.dws-menu> ul {display: flex; გამართლება-შინაარსი: ცენტრი; }

სათაურში მხოლოდ ზედა ნაწილში დავამატებთ, ჩვენ დავწერთ ზღვარი-ზედა.

header { margin-top: 200px; შრიფტიანი ოჯახი: კუპრი, Arial, Helvetica, sans-serif; }

მოდით შევქმნათ ჩვენი მენიუ, შეიტანეთ ფერის ღილაკები, შრიფტი და ა.შ.

აირჩიეთ ბმულები nav> ul li, და მათ ბლოკირება ელემენტები. დააყენეთ მენიუ ფონზე, ჩაწერეთ შიგთავსი, დააკონკრეტეთ ზომა, ფერი, წაშლა ხაზგასმა და გააკეთეთ სათაურები ასოებით.

.dws-menu> ul li {display: block; ფონზე: # მიღებულია; padding: 15px 30px 15px 40px; შრიფტის ზომა: 14px; ფერი: # 454547; ტექსტური გაფორმება: არა; ტექსტის გარდაქმნა: ზედა; }

შემდეგ განათავსეთ ხატები, დანიშნოს სიები პოზიციაზე: ნათესავი; ხატები შემდგომი განლაგებისათვის:

.dws-menu> ul li {position: relative; }

შემდეგი, ჩვენ ვირჩევთ ხატები, პოზიცია მათ აბსოლუტურად, მიიღოს indentation ზემოდან 15 მწვერვალები, მარცხნივ 12 მწვერვალები, გაზრდის ზომა 18 მწვერვალები.

.dws-menu> ul li> i.fa {position: absolute; დაბრუნება: 15px; მარცხნივ: 12px; შრიფტის ზომა: 18px; }

საზღვრის სახით გამყოფი ხაზის სახით დანიშნოს, აირჩიეთ პირველი LI ელემენტი, დადგენილი საზღვარი. ჩვენ შეარჩიეთ ბოლო ელემენტის LI და მიანიჭეთ მას მსგავსი საზღვარი.

.dws-menu> ul li: პირველი შვილი {border-left: 1px მყარი # b2b3b5; }. dws-menu> ul li: ბოლო შვილი {border-right: 1px solid #babbbd; }

LI- სთვის დლიმიტირების გაკეთება:

.dws-menu> ul li {position: relative; საზღვრის უფლება: 1px მყარი # c7c8ca; }

მენიუ შეიძინა გამოჩენა, მაშინ შეგიძლიათ გააგრძელოთ აღწერა სტილის დროს hover.

ჩვენ ვხუმრობთ ჰორიზონტალურ მენიუში მიუთითებს.

აირჩიეთ ბმულები და შეავსეთ ფერი ბლოკად და მივანიჭეთ ბმულს ფერის ხატი თეთრით. მოდით დავამატოთ კიდევ ერთი მუქი ჩრდილი. გარდამავალი დახმარებით 0.3 წამში ჩვენ შევძლებთ გლუვი გამოჩნდეს:

.dws-menu li a: hover {background: # 454547; ფერი: #ffffff; ყუთი-ჩრდილი: 1px 5px 10px -5px შავი; გარდამავალი: ყველა 0.3s მარტივია; }

და ეს ეფექტი გაქრა შეუფერხებლად, დაამატეთ ეს სტილის ბმული მარტივად:

.dws-menu> ul li {display: block; ფონზე: # მიღებულია; padding: 15px 30px 15px 40px; შრიფტის ზომა: 14px; ფერი: # 454547; ტექსტური გაფორმება: არა; ტექსტის გარდაქმნა: ზედა; გარდამავალი: ყველა 0.3s მარტივია; }

მთავარი მენიუ დასრულდა და შეგიძლიათ გააგრძელოთ submenu- ის და submenus- ის აღწერილობა.

აღწერეთ CSS / HTML წვეთი მენიუ

შესახებ ჩვენ გახსნა index.html და დამატება, მაგალითად, დამატებითი მენიუ პროდუქტები. UL- ს შორის LI- ის სიაში ჩანერგვა და მასში ხუთი სიის განთავსება, რომელიც შეიცავდეს კავშირებს herf = "#" ატრიბუტით.

ul> li * 5> a [href = "#"]

ჩვენ ვცდილობთ მიმართოთ, ჩაწერეთ ნივთები ( ტანსაცმელი, ელექტრონიკა, საკვები, ინსტრუმენტები, ცხოვრება, ქიმია ).

<ul> <li> <a href="#"> ტანსაცმელი </a> </ li> <li> <a href="#"> ელექტრონიკა </a> </ li> <li> <a href = "#"> საკვების </a> </ li> <li> <a href="#"> ინსტრუმენტები </a> </ li> <li> <a href="#"> ცხოვრება. ქიმია </a> </ li> </ ul>

შემდეგ გახსნა style.css და აღწერს submenu სტილის.

ჩვენ შეარჩიეთ მეორე სია და მივუდგეთ მას პოზიციას: აბსოლუტური; , მოდით მითითებული მინიმალური სიგანე 150 მწვერვალები.

/ * ქვე მენიუ * / .dws-menu li ul {position: absolute; მინ-სიგანე: 150px; }

მოდით დავწეროთ სასაზღვრო სიები 1 პიკს.

.dws-menu li> ul li {border: 1px solid # c7c8ca; }

ქვემენიუს ბმულებისთვის 10-ზე მწკრივებს დავამატებთ. ტექსტის ტრანსფორმაციის წაშლა და რამდენიმე ტონის მუქი ფონის გაკეთება: # e4e4e5; .

.dws-menu li> ul li {padding: 10px; ტექსტის გარდაქმნა: არა; ფონზე: # e4e4e5; }

შემდეგ შეიტანეთ სხვა submenu. გადადით მარკირებულ ფაილზე და მაგალითად "ელექტრონიკის" ფორმით ანალოგიის მენიუდან, როგორც ადრე გავაკეთეთ. ჩვენ აღწერს საგნების სასაქონლო პოზიციებს ( კამერები, კომპიუტერები, ტელეფონები ) და შეინახეთ.

<li> <a href="#"> ელექტრონიკა </a> <ul> <li> <a href="#"> კამერები </a> </ li> <li> <a href="#"> კომპიუტერები </a> </ li> <li> <a href="#"> ტელეფონები </a> </ li> </ ul> </ li>

ისინი გამოიყვანეს, მაგრამ მთავარ მენიუში დაიმალა, ახლა პოზიცია: აბსოლუტური; წყობილი UL და გადაადგილება 150 პიკს. მხარეს:

.dws-menu li> ul li ul {position: absolute; მარჯვნივ: -150px; დაბრუნება: 0; }

შემდეგი, ჩვენ ქვემენიუს გამოჩნდება ზედა მენიუს მთავარი ელემენტი, რომლისთვისაც ჩვენ ვამატებთ ჩვენებას: არა; და ამით მალავს ყველა შიდა წერტილს.

/ * ქვე მენიუ * / .dws-menu li ul {position: absolute; მინ-სიგანე: 150px; ჩვენება: არა; }

და მათი გამოჩენა, ჩვენ შერჩევა სიები hover და არიან მათ მიერ ნაჩვენები დახმარებით: ბლოკი; .

.dws-menu li: hover> ul {display: block; }

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

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> მთავარი </a> </ li> <li> <a href="#"> < i კლასის = "fa fa-shopping cart"> </ i> პროდუქტები </a> <ul> <li> <a href="#"> ტანსაცმელი </a> <ul> <li> <a href = "#"> ფეხსაცმელები </a> </ li> <li> <a href="#"> ქურთუკები </a> </ li> <li> <a href="#"> შარვალი </a> < / li> </ ul> </ li> <li> <a href="#"> ელექტრონიკა </a> <ul> <li> <a href="#"> კამერები </a> </ li> <li> <a href="#"> კომპიუტერები </a> </ li> <li> <a href="#"> ტელეფონები </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> სურსათის </a> </ li> <li> <a href="#"> ინსტრუმენტები </ h </ li> <li> <a href="#"> გენ. ქიმია </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> სერვისები </a> <ul > <li> <a href="#"> სერვისი 1 </a> </ li> <li> <a href="#"> სერვისი 2 </a> </ li> <li> <a href = "#"> სერვისი 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> </ Li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> კონტაქტები </a> </ li> </ ul>

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

.dws-menu> ul li {display: block; / * პერმალინკი - ეს გრადიენტი: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * ძველი ბრაუზერები * / background: -moz-linear-gradient (top, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / background: -webkit-linear-gradient (top, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / background: ხაზოვანი გრადიენტი (ქვედა, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / ფილტრი: პროგპი: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / padding: 15px 30px 15px 40px; შრიფტის ზომა: 14px; ფერი: # 454547; ტექსტური გაფორმება: არა; ტექსტის გარდაქმნა: ზედა; გარდამავალი: ყველა 0.3s მარტივია; } .dws-menu li: a hover {/ * პერმაბმული - ეს გრადიენტი: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / ფონი: # e0e1e5; / * ძველი ბრაუზერები * / background: -moz-linear-gradient (top, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / background: -webkit- ხაზოვანი გრადიენტი (ზედა, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / background: ხაზოვანი გრადიენტი (ქვემოთ, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / ფილტრი: პროგპი: DXImageTransform.Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / ფერი: #ffffff; ყუთი-ჩრდილი: 1px 5px 10px -5px შავი; გარდამავალი: ყველა 0.3s მარტივია; }

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

დატოვე კომენტარი: