ვერტიკალური მენიუ css ხატებით. საპასუხო ჰორიზონტალური მენიუ სუფთა CSS3-ით

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

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

1 . ასე მიდის ნაგულისხმევად ან პორტალში შესვლისას.

2 . ჩვენ უკვე ვუყურებთ მობილური მოწყობილობიდან, მაგრამ ჯერ არ გამოგვიძახებია მენიუში.

3 . აქ ჩვენ დავაწკაპუნეთ და ნაჩვენები იყო ყველა მოთხოვნილი მოთხოვნა.

დავიწყოთ ინსტალაცია:

განყოფილება (
სიგანე:100%;
მაქსიმალური სიგანე: 1198 პიქსელი;
ზღვარი: 0px ავტო;
ჩვენება: მაგიდა;
პოზიცია:ნათესავი;
}

სათაური (
სიგანე:100%;
ჩვენება: მაგიდა;
ფონის ფერი: #175812;
ზღვარი-ქვედა: 50 პიქსელი;
}

#kamtukagnpos(
float: მარცხენა;
შრიფტის ზომა: 25px;
ტექსტის ტრანსფორმაცია: დიდი;
ფერი: #fffab2;
შრიფტის წონა: 600;
padding: 19.8px 0px;
}

#kamtukagnpos:hover (
ტექსტი-ჩრდილი: 0px 0px 6px rgba(255, 250, 250, 0.67);
}

ნავი (
სიგანე: ავტომატური;
float:right;
}

Nav ul(
ჩვენება: მაგიდა;
float:right;
}

ნაული (
float:მარცხნივ;
}

სახელი ul li: last-child(
padding-right:0px;
}

ნაული ა (
ფერი: #e4f2ff;
შრიფტის ზომა: 19px;
padding: 24px 19px;
ჩვენება: inline-block;
ტექსტი-ჩრდილი: 0 1px 0 #2e2f2e;
}

Nav ul li a:hover (
ფონის ფერი: #143a06;
ფერი: #fff9c8;
გარდამავალი: ყველა 0.7s ease 0s;
ტექსტი-ჩრდილი: 0 1px 0 #282b28;
}

Nav ul li a:hover i (
ფერი: #fdf7c9;
გარდამავალი: ყველა 0.7s ease 0s;
ტექსტი-ჩრდილი: 0 1px 0 #1c1d1c;
}

ნავ ულ ლი ა ი (
padding-right: 9px;
ფერი: #f4faff;
გარდამავალი: ყველა 0.7s ease 0s;
ტექსტი-ჩრდილი: 0 1px 0 #202120;
}

Navigation-menusaita ul(
ჩვენება: მაგიდა;
სიგანე: 24 px;
}

ნავიგაცია-მენუსაიტა ულ ლი(
სიგანე:100%;
სიმაღლე: 3px;
ფონის ფერი:#e9f0f7;
margin-bottom:4px;
}

Navigation-menusaita ul li:last-child(
margin-bottom:0px;
}

შეყვანა, ლეიბლი (
ჩვენება: არცერთი;
}

@media მხოლოდ ეკრანი და (მაქს. სიგანე: 1440 პიქსელი)(
განყოფილება (
მაქს-სიგანე:95%;
}
}

@media მხოლოდ ეკრანი და (მაქს. სიგანე: 980 პიქსელი)(
სათაური (
padding:20px 0px;
}

#kamtukagnpos(
padding: 0px;
}

შეყვანა (
პოზიცია: აბსოლუტური;
ზედა: -9999px;
მარცხენა: -9999px;
ფონი: არცერთი;
}

შეყვანა:fous(
ფონი: არცერთი;
}

ლეიბლი (
float:right;
padding: 8px 0px;
ჩვენება: inline-block;
კურსორი: მაჩვენებელი;
}

შეყვანა: შემოწმებული ~ nav(
ჩვენება: ბლოკი;
}

ნავი (
ჩვენება: არცერთი;
პოზიცია:აბსოლუტური;
მარჯვენა: 0px;
ზედა: 53 პიქსელი;
ფონის ფერი:#174810;
padding: 0px;
z-ინდექსი:99;
}

Nav ul(
სიგანე: ავტომატური;
}

ნაული (
float:არცერთი;
padding: 0px;
სიგანე:100%;
ჩვენება: მაგიდა;
}

ნაული ა (
ფერი:#f7f2f2;
შრიფტის ზომა: 15 პიქსელი;
padding:10px 20px;
ჩვენება: ბლოკი;
საზღვარი-ქვედა: 1px მყარი rgba(204, 197, 197, 0.1);
}

Nav ul li a i (
ფერი:#f9f5d5;
padding-right:13px;
}
}

@media მხოლოდ ეკრანი და (მაქს. სიგანე: 480 პიქსელი) (
განყოფილება (მაქსიმალური სიგანე: 90%;)
}

@media მხოლოდ ეკრანი და (მაქს. სიგანე: 360 პიქსელი) (
ლეიბლი (შეფუთვა: 5px 0px;)
#kamtukagnpos(შრიფტის ზომა: 20px;)
ნავი (ზედა: 47 პიქსელი;)
}

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

HTML კოდი

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

• 
  
  
  ველოსიპედები
  
  


• 
  
  
  მოტოციკლები
  
  


• 
  
  
  ავტობუსები
  
  


• 
  
  
  მანქანები
  
  


• 
  
  
  ვერტმფრენები
  
  

ტეგებს შორის დაკავშირების შემდეგ თავიხატის შრიფტი შრიფტი გასაოცარია- მენიუ ასე გამოიყურება.

CSS სტილები

დასაწყისისთვის Google ფონტიჩვენ ავირჩევთ მიმზიდველ შრიფტს, რომელიც მხარს უჭერს კირილიცას, თუ ვერტიკალური მენიუ რუსულ ენაზეა.

დააკოპირეთ არჩეული შრიფტის კავშირის კოდი და ჩასვით თავზე CSSფაილი.

@import url ("https://fonts.googleapis.com/css?family=Marck+Script");

სელექტორში სხეულიჩაწერეთ არჩეული შრიფტის სახელი და დააყენეთ მისი ზომა.

სხეული (
ზღვარი: 0;
padding: 0;
font-family: "Marck Script", sans-serif;
შრიფტის ზომა: 20px;
}

ჩვენ განვათავსებთ ჩვენს მენიუს ბრაუზერის ფანჯარასთან შედარებით, ზემოდან 10%-ით და მარცხნიდან 20%-ით უკან დახევით. რა თქმა უნდა, ეს ნომრები აღებულია ჭერიდან.

Ul(
პოზიცია: აბსოლუტური;
ზედა: 10%;
მარცხენა: 20%;
}

ჩვენ ვაფიქსირებთ მენიუს სიგანეს 200 პიქსელზე.

სიგანე: 200px;

ჩვენ მივაღწიეთ სიის მენიუს ელემენტებს. მარკერების ამოღება ნივთებიდან ლი.

ული (
list-style: არცერთი;
}

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

Border-top: 1px მყარი #131313;
საზღვარი-ქვედა: 1px მყარი #131313;
ზღვარი: -1px 0;

არ არის საკმარისი გვერდითი ჩარჩოები და გამყოფები ხატებსა და ბმულების სახელებს შორის.

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

ული ა (
ჩვენება: ბლოკი;
}

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

საზღვარი მარჯვნივ: 1px მყარი #131313;
ტექსტი-დეკორაცია: არცერთი;
ფერი: #131313;

მარცხენა ჩარჩო ჯერ კიდევ აკლია.

ტეგები სპანი- ბლოკის ელემენტები, რომლებიც შეიცავს ტექსტს, ასე რომ სპანიაჩვენეთ იგი როგორც შიდა ბლოკის ელემენტი.

Ulli span (
პოზიცია: ნათესავი;
ჩვენება: inline-block;
}

ჩვენ გვჭირდება პირველი სპანი, რომლის შიგნით იქნება ხატულა, დააყენეთ სტილი, რომელიც განსხვავდება მეორესგან სპანი. ამ მიზნით პირველი სპანიაღნიშნეთ ფსევდოკლასით - span:nth-child(1)და ცალკე სტილი. დააყენეთ მარჯვენა და მარცხენა ჩარჩო და სიგანე.

Ul li a span:nth-child(1) (
სიგანე: 30px;
საზღვარი-მარცხენა: 1px მყარი #131313;
საზღვარი-მარჯვნივ: 1px მყარი #131313;
}

ხატები განთავსდება შუაში 10 პიქსელიანი მინდვრებით ყველა მიმართულებით.

ტექსტის გასწორება: ცენტრში;
padding: 10px;

ხატები იქნება მუქი ფერის, 20 პიქსელის ზომით, წითელ ფონზე.

ფერი: #131313;
შრიფტის ზომა: 20px;
ფონი: #f44336;

მეორე ფსევდო კლასში საჭიროა მხოლოდ ველების დაყენება.

Ul li a span:nth-child(2) (
padding: 10px;
}

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

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

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

1. ვერტიკალური მენიუ სათაურით

მარტივი ელეგანტური დიზაინის ვარიანტი. შესაფერისია ვებსაიტზე სტილის კატეგორიებისთვის. მაუსის დაჭერისას, სიის ელემენტი ცვლის ბმულის ფერს.

2. ვერტიკალური მენიუ "მეტროს რუკის" სტილში

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

• სიის ელემენტი
  • ჩადგმული სიის ელემენტი
  • ჩადგმული სიის ელემენტი
  • ჩადგმული სიის ელემენტი
• სიის ელემენტი
• სიის ელემენტი

3. ვერტიკალური მენიუ ჰოვერის ეფექტებით

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

ფერი: თეთრი; )

4. ვერტიკალური მენიუ ხატებით

* (ყუთის ზომა: საზღვრის-box; ზღვარი: 0;). ვიჯეტი (შეფუთვა: 20 პიქსელი; კონტური: 5 პიქსელი მყარი #f1f1f1; ფონი: #fff; საზღვრის რადიუსი: 5 პიქსელი; შრიფტი-ოჯახი: "Roboto", sans- სერიფი; -სტილი: არცერთი; 250 პიქსელი; margin-bottom: 0; padding-bottom: 0. .widget a (text-decoration: none; ფერი: #616a6b; ჩვენება: inline-block;) : 20px vertical-align:bottom:#dd3333:fore (content:"\f0d0";) .widget li:nth-child(3):fore (content:"\; f0cd";) .ვიჯეტი li:nth-child(4): ადრე (შიგთავსი:" \f028";).ვიჯეტი li:nth-child(5): ადრე (შიგთავსი:"\f03d";)

5. ვერტიკალური მენიუ სურათებით

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