<
  • Главная
Статьи

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

  1. სუფთა CSS / HTML წვეთი მენიუდან ამ tutorial ჩვენ კლასიკური ჰორიზონტალური მენიუ სუფთა CSS. მას აქვს ხატები სიები. როდესაც პუნქტს მიუთითებს, ეს შეუფერხებლად იცვლება ღილაკის ფერისა და ტექსტის შეცვლაზე, ჩრდილში არის დამატებული. Drop-down სიები შეიძლება გაკეთდეს მრავალ დონის და მთავარია ყველა საკმაოდ უბრალოდ განხორციელდა სუფთა CSS3. ამ გაკვეთილის გაგრძელება აქ - ნაწილი 2 მობილური ვერსია ჰორიზონტალური მენიუ ". იხილეთ კალამი POyzbW დენისის მიერ @Dwstroy ) კოდეპენ . გაკვეთილის გამოყენება: ჩვენება: flex; ტრანზიციის გამოყენება; პოზიცია პოზიციებზე. HTML ჰორიზონტალური მენიუ სტრუქტურა
  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>

<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 მარტივია; } dws-menu> ul li {display: block;  / * პერმალინკი - ეს გრადიენტი: http://colorzilla

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

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



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью