Менюи CSS амудӣ: худат кор даст

Баъзе webmasters намехоҳем, ки ба вақти инкишоф аз сифр унсурҳои оддӣ, ки аллакай вуҷуд доранд. Онҳо боварӣ доранд, ки ҳеҷ нуқтаи дар лоѓарии вақти худро дар бораи чизе, ки дер он ҷо мерасад. Дар асл, барои касоне, ки танҳо донандаи HTML ва CSS, муҳим аст, ки ба худ як чизҳои зиёде доранд, фаҳмиши хуби кори худ. Ин амал ба менюи. Эҷоди як менюҳо CSS амудӣ. Он танҳо дар HTML ва CSS асос, бе истифодаи ботов ва Пинҳон. Ҳар менюи рӯйхати пайвандҳоеро, ки боиси саҳифаҳои сомонаи аст.

қадамҳои асосӣ

Барои сохтани оддӣ меню амудӣ CSS, ба шумо лозим аст, ки чораҳои зерин:

1. Якум, муайян феҳристи пайвандҳо (бо истифодаи рамзи HTML), ки аз он меню хоҳад буд. Онҳоро ном бибаред, барои мисол, ба таври зерин аст:

1. Home.
2. таърихи мо.
3. Роҳнамо.
4. Хизматрасониҳо.
5. Тамос.

2. Пас аз ороиши пайвандҳо ки шумо бо ёрии CSS орзумандам.

Мо нависед рамзи HTML, ки дар парванда my_Vmenu.html нигоҳ кунед ва бубинед, ки чӣ тавр он дар браузери назар хоҳад кард:

Ин дар асоси (кузова) меню мо мебошад. # 1, # 2 ва ғайра бояд аз тарафи истинод иваз карда шаванд. Бингар, ки чӣ гуна он дар як браузер назар. Дар тасвире, ки шумо нахоҳад кард мехоҳам. Акнун мо бояд сар ба тасвир унсурҳои сабки, барои задани пурра менюҳо CSS амудӣ.

Тавсифи сабкҳои

Эҷоди як файли my_Vmenu.css, ки ҳама чизро ба шумо мехоҳед, ки ба беҳтар намудани пайдоиши чунин унсури муҳими сомонаи муқаррар карда мешавад. Дар ин ҷо коди, ҷорӣ намудани он хоҳад менюи CSS амудӣ зинда гардонидани аст. Ин нависед файли нав, ва он гоҳ мо як бор наздиктар мегиранд назар маънои хатҳои асосии онро, ки дода мешавад.

Тавсифи муфассали варақаро истифода бурда мешавад

Ҳоло тафсилоти CSS меню амудӣ мо дида мебароем:

Рӯйхати-сабки навъи ба шумо имкон медиҳад, ки ба хориҷ рӯйхати нишонгузорҳо. Бо муқаррар намудани «0» ба маржа ва padding хориҷ padding иловагӣ дар рӯйхат. Тавре ки мумкин аст аз рамзи HTML дар дида, Менюи мо як рӯйхати аст, ва сабкҳои истифода CSS муайян карда мешавад.

ул # my_Vmenu - сабки умумии тамоми рӯйхат интихоб кунед.

ул # my_Vmenu Li як - пайвандҳо сабки байни Li теги аст.

ул # my_Vmenu Ли а: Hover - тавсифи намуди таҳти баррасии адад меню дар як вақт, вақте ки яке бар мардум беҳуш.

ул # my_Vmenu Li як муддати - тавсифи матн (менюи унвони).

Дар хотир доред, ки файлҳои my_Vmenu.css my_Vmenu.html ва бояд дар феҳристи ҳамин нигоҳ дорад. Бо вуҷуди ин, ки онҳо метавонанд дар ҷузвдонҳо гуногун ҷойгир мебошанд, лекин баъд аз он муҳим аст, ки ба қайд гирифта, дар роҳи файли my_Vmenu.html ба my_Vmenu.css. Эҳтиёт бошед, зеро ки муҳиме ба ин масъала зуд-зуд.

Style бояд байни тегҳои сардори дар як HTML-файл пайваст мешавад. menu_1.png ва menu_2.png - ин расм барои менюи расм дар давлати муқаррарӣ ва Hover аст.

Ин беҳтар аст, ки ба захира кардани тасвирҳо дар ҷузвдони алоҳидаро барои тасвирҳо, номи онро my_images, лекин он вақт овозро рамзи CSS аст. Нависед, ки ин тасвирҳо нишон дода мешаванд, ки онҳо дар ин феҳрист мебошанд: URL (my_images / menu_1.png) ва URL (my_images / menu_2.png).

Дар қисми боқимондаи хосиятҳои тасвир рамзи CSS, аз фаҳмидан осон. намуди меню мо муайян мекунанд. Ин осон аст, ки ба зикр намуд, ки паҳнои ва баландии адад муайян барои моддаҳои ҳамин дар давлати муқаррарӣ, ва вақте ки шумо, чолокона муш дар болои онҳо. Андозаи ҳарф 18px, padding ба indentation аз чапу гуногуни номҳои ҷои муайян мекунад. Намоиши ба шумо муқаррар воҳиди намоиш ба танзим паҳнои ва padding.

Менюи амудии мо

Тавре ки шумо мебинед, ки менюи CSS амудӣ эҷод осонӣ. Дар асоси маълумоти дониш, Шумо метавонед, ки онро зебо ва љолиб ба меҳмонон ба веб-сайти худ хоҳад буд! Истифода баред, тасаввуроти худро, ва он гоҳ менюи услубӣ пурра сомонаи Шумо.