CSS ကိုနှင့်အဘယ်သူမျှမပုံများနှင့်အတူတဲဘ်တပ်ထား Navigation ဖန်တီးနည်း

by ဂျနီဖာ Kyrnin

06 ၏ 01

CSS ကိုနှင့်အဘယ်သူမျှမပုံများနှင့်အတူတဲဘ်တပ်ထား Navigation ဖန်တီးနည်း

CSS ကို 3 Menu ကိုတဲဘ်တပ်ထား။ J ကို Kyrnin အားဖြင့်ပစ်ခတ်မျက်နှာပြင်

ဝဘ်စာမျက်နှာများပေါ်တွင် navigation စာရင်းတစ်ခု၏ပုံစံဖြစ်ပြီး, တဲဘ်တပ်ထားအညွှန်းတစ်ခုအလျားလိုက်စာရင်းကဲ့သို့ဖြစ်၏။ ဒါဟာ CSS နဲ့အလျားလိုက်တဲဘ်တပ်ထားအညွှန်းကိုဖန်တီးရန်မျှမျှတတလွယ်ကူပေမယ့် CSS ကို 3 ကျွန်တော်တို့ကိုသူတို့ကိုပင်ပိုကောင်းသလိုကြည့်ရှုစေရန်အနည်းငယ်ပိုပြီး tools များပေးသည်။

ဒီသင်ခန်းစာဟာ CSS ကိုတဲဘ်တပ်ထား menu ကိုဖန်တီးရန်လိုအပ် HTML နဲ့ CSS အားဖြင့်သင်တို့ကိုယူပါလိမ့်မယ်။ အဲဒါကိုကြည့်ရှုမည်ကိုဘယ်လိုကြည့်ဖို့ကိုလင့်ထားသောစာမျက်နှာများပေါ်တွင်ကလစ်နှိပ်ပါ။

ဤသည်တဲဘ်တပ်ထား menu ကဒါဟာအလွယ်တကူပိုပြီး tabs များ add သို့မဟုတ်သူတို့ကိုစာသားပြောင်းပေးဖို့ edited နိုင်ပါတယ်ရုံက HTML နဲ့ CSS 2 နဲ့ CSS ကို 3 အဘယ်သူမျှမပုံရိပ်တွေကိုအသုံးပြုသည်။

Browser ကိုပံ့ပိုးမှု

ဒီ tab menu ကို major browser အားလုံးကအလုပ်လုပ်ပါလိမ့်မယ်။ Internet Explorer ဟာ rounded corner နဲ့မပြပါလိမ့်မယ်, ဒါပေမယ့်မဟုတ်ရင်ပြုလုပ်မယ့် Firefox, Safari နဲ့ Opera, Chrome နဲ့တူ tabs များပြသပါလိမ့်မယ်။

06 ၏ 02

သင့်ရဲ့ Menu ကိုစာရင်းရေးရန်

အားလုံးအညွှန်း menus တွေနှင့် tabs များကယ့်ကိုကိုယ့်အနေနဲ့နံပါတ်စဉ်မပါတဲ့ list ဖြစ်ကြသည်။ ဒါကြောင့်သင်ပြုချင်သောပထမဦးဆုံးအရာသင်သည်သင်၏တဲဘ်တပ်ထားအညွှန်းသွားချင်ဘယ်မှာမှလင့်များတစ်ခုနံပါတ်စဉ်မပါတဲ့စာရင်းရေးဖြစ်ပါတယ်။

ဒီသင်ခန်းစာသင်တစ်ဦးကစာသားအယ်ဒီတာ၌သင်တို့၏ HTML ကိုရေးသားခြင်းနှင့်သင်ဘယ်မှာသင်၏ဝဘ်စာမျက်နှာပေါ်တွင်သင်၏ menu ကိုများအတွက် HTML ကိုနေရာသိသောနေယူဆနေသည်။

ဤကဲ့သို့သောသင့်ရဲ့နံပါတ်စဉ်မပါတဲ့စာရင်းရေးရန်:

အတန်းအစား = "tablist">
- CSS ကို 3
- အိုင်ဒီ = "လက်ရှိ"> တဲပ်များ
- ဘို့
- menus
အတန်းအစား = "tablist" နှင့်အိုင်ဒီ = "လက်ရှိ": သင်ကကုဒ်အရာနှစ်ခုထွက်ခေါ်ဆိုကြောင်းသတိထားမိပါလိမ့်မယ်။ ပထမဦးဆုံးအလိုအပ်ပါသည်။ သင်သည်သင်၏နံပါတ်စဉ်မပါတဲ့ list အပေါ် tablist လူတန်းစားကိုမထားကြဘူးလျှင်, tabs များအလုပ်မလုပ်လိမ့်မည်မဟုတ်ပါ။ ဒုတိယ optional ကိုဖြစ်ပါတယ်။ သင်သည်ထိုစာမျက်နှာပေါ်တွင်မီးမောင်းထိုးပြခံရဖို့ချင်ပါတယ်ကိုမဆို tab ကိုအပေါ်အိုင်ဒီ = "လက်ရှိ" ထားပါ။ ငါများသောအားဖြင့်ကိုယ့်အပေါ်င့်သောစာမျက်နှာကိုမီးမောင်းထိုးပြရန်ဤသုံးပါ, ဒါပေမယ့်သင်ကအရေးအပါဆုံး tab ကိုမီးမောင်းထိုးပြတာကကိုသုံးနိုင်သည်။ သို့မဟုတ်သင်လုံးဝကဖယ်ရှားနိုင်သည်။

06 ၏ 03

သင့်ရဲ့ပုံစံစာရွက်တည်းဖြတ်ခြင်း Start

သငျသညျတခုဖြစ်စေသုံးနိုငျ external style sheet သို့မဟုတ် ပြည်တွင်းရေး style sheet ။ နမူနာ menu ကိုစာမျက်နှာစာရွက်စာတမ်းများ၏ ရဲ့ internal style sheet ကိုအသုံးပြုသည်။

ပထမဦးစွာကျနော်တို့ ul အတွင်းသဘော Style လိမ့်မယ်

ကျနော်တို့က HTML ကိုညအတန်း tablist ကိုအသုံးပြုဖို့နေရာအရပ်ဖြစ်၏။ အဲဒီအစားသင့်ရဲ့စာမျက်နှာပေါ်မှာရှိသမျှနံပါတ်စဉ်မပါတဲ့စာရင်း style မယ်လို့ရသော ul tag ကို, styling ထက်, သငျသညျကိုသာ ul လူတန်းစား style သငျ့သညျ။ သင့်ရဲ့ CSS ကိုအတွင်းပထမဆုံး entry ကိုဒါ tablist ဖြစ်သင့်:

.tablist {}

ငါ (}) ရှေ့တွင်အချိန်အဆုံးသတ် curly သတ္တုအထိမ်းအချုပ်ထဲမှာထားလို, ဒါကြောင့်ငါနောက်မှမမေ့မလြော့ပါ။

ကျနော်တို့က tab ကိုမီနူးစာရင်းများအတွက်နံပါတ်စဉ်မပါတဲ့ list tag ကိုအသုံးပြုနေပေမယ့်ကျနော်တို့အတွက်တွားတတ်သောတိရစ္ဆာန်မျိုးကိုမဆိုကျည်ဆံတွေသို့မဟုတ်နံပါတ်များကိုမလိုချင်ကြဘူး။ သင်ထည့်သင့်ပါတယ်ပထမဦးဆုံးစတိုင်ဖြစ်ပါတယ်ဒါကြောင့်။ နေစဉ်တွင် list-style: none; ဒါဟာစာရင်းတစ်ခုဖွင့်စဉ်က (ကျည်ဆံတွေသို့မဟုတ်နံပါတ်များကိုလိုမျိုး) မျှ Pre-စိတ်ပိုင်းဖြတ်စတိုင်များနှင့်အတူစာရင်းတစ်ခုဖွင့်သော browser ကိုပြောပြသည်။

ထိုအခါသင်ကဖြည့်ချင်သောအာကာသကိုက်ညီရန်သင့်စာရင်း၏အမြင့်သတ်မှတ်နိုင်သည်။ ငါကို double စံစာလုံးအရွယ်အစားရဲ့အဖြစ်, ငါ့အမြင့်အဘို့အ 2em ကို ရွေးချယ်. , နှင့် tab ကို၏စာသားအထက်နှင့်အောက်တွင်ဖော်ပြထားသောထက်ဝက်ခန့်တစ်ခု em ပေးသည်။ အမြင့်: 2em; ဒါပေမယ့်သင်ချင်ပါတယ်ဘာပဲအရွယ်အစားရန်သင့် width ကိုသတ်မှတ်နိုင်သည်။ သင်ကလက်ရှိကွန်တိန်နာထက်သေးငယ်ဖြစ်ချင်မဟုတ်လျှင်, သင် width ကိုထွက်စွန့်ခွာနိုင်အောင် ul tags များအလိုအလြောကျ, width ကို 100% အထိယူပါလိမ့်မယ်။

သင့်ရဲ့လျှင်နောက်ဆုံးအနေနဲ့ မာစတာစတိုင်စာရွက် ul နှင့် ol tags များအဘို့ရလာဒ်ကဒိရှိသည်ပါဘူး, သင်၌သူတို့ကိုမထားချင်ပါလိမ့်မယ်။ ဒါကသင့် ul အပေါ်နယ်နိမိတ်, မာဂျင်နှင့် padding ကိုကို turn off သင့်ကြောင်းဆိုလိုသည်။ padding ကို: 0; margin: 0; နယ်စပ်: none; သငျသညျထားပြီး ul tag ကို reset ကြလျှင်, သင်သည်သင်၏ဒီဇိုင်းနှင့်အတူကိုက်ညီသောအရာတစ်ခုခုဖို့မာဂျင်, padding ကို, ဒါမှမဟုတ်နယ်စပ်ပြောင်းလဲနိုင်သည်။

သင့်ရဲ့နောက်ဆုံး .tablist လူတန်းစားဤကဲ့သို့သောကြည့်ရှုသင့်ပါတယ်:

.tablist {list-style: none; အမြင့်: 2em; padding ကို: 0; margin: 0; နယ်စပ်: none; }

06 ၏ 04

အဆိုပါ LI စာရင်းပစ္စည်းများတည်းဖြတ်ခြင်း

သင်သည်သင်၏နံပါတ်စဉ်မပါတဲ့ list style အမျိုးမျိုးဖွင့်ပြီးတာနဲ့သင်ကအတွင်းရှိ LI tags များ style ဖို့လိုအပ်ပါတယ်။ ဒီလိုမှမဟုတ်ရင်သူတို့မှန်မှန်ကန်ကန်သင့်ရဲ့ tabs များအားမရစရာမလိုဘဲတစ်ဦးစံစာရင်းနှင့်လာမည့်လိုင်းမှတစ်ဦးချင်းစီအပြောင်းအရွေ့များကဲ့သို့ပြုမူပါလိမ့်မယ်။

ပထမဦးစွာသင့်ရဲ့စတိုင်ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကို set up:

.tablist li {}

ထိုအခါသင်သည်ထိုသူတို့အလျားလိုက်လေယာဉ်ပေါ်တက်တန်းစီဒါကြောင့်သင့်ရဲ့ tabs များ float ချင်တယ်။ float: left;

ထိုအခါ tabs များအကြားအချို့ရဲ့ margin ကိုထည့်သွင်းဖို့မေ့လျော့ကြဘူး, ဒါကြောင့်သူတို့ကအတူတကွပေါင်းစည်းကြပါဘူး။ margin-ညာဘက်: 0.13em;

သင့်ရဲ့ li စတိုင်များဤကဲ့သို့သောကြည့်ရှုသင့်ပါတယ်:

.tablist li {float: left; margin-ညာဘက်: 0.13em; }

06 ၏ 05

CSS ကို 3 နှင့်အတူတဲပ်များမျှော်လိုပဲတဲပ်များပြုလုပ်ခြင်း

ဒီစတိုင်စာရွက်ထဲတွင်လေးလံရုတ်သိမ်းအများစုလုပ်ဖို့ငါနံပါတ်စဉ်မပါတဲ့ list အတွင်းလင့်များပစ်မှတ်ထားတာပါ။ browsers လင့်များသည်အခြား tags များထက်ဝဘ်စာမျက်နှာပေါ်တွင်ပိုမိုလုပ်ဆောင်ကြောင်းအသိအမှတ်ပြုရန်, ဒါကြောင့်သင်ကကျောက်ဆူး tag ကို (←လင့်များ) မှသူတို့ကို attach လျှင်မောက်စ်တင်ပြည်နယ်များကဲ့သို့အမှုအရာတို့ကိုလိုက်နာရန်ဟောင်းများကို browser များရရှိရန်ပိုမိုလွယ်ကူပါတယ်။ ဒါကြောင့်ပထမဦးဆုံးသင့်ရဲ့စတိုင်ဂုဏ်သတ္တိများရေးရန်:

.tablist li တစ် {} .tablist li တစ်ဦး: မောက်စ်တင် {}

ဤအ tabs များလျှောက်လွှာအတွက် tabs များကဲ့သို့အပြုမူသင့်တယ်သောကြောင့်, သငျသညျမဟုတျဘဲရုံနှင့်ဆက်စပ်စာသားကိုနှိပ်ဖြစ်ရန်အတွက် tab ကိုတစ်ခုလုံးကိုဧရိယာချင်တယ်။ ဒီလိုလုပ်ဖို့, သင် "ပုံမှန်ဖွင့်ကြောင့်ထံမှတစ်ဦးက tag ကိုပြောင်းဖို့ရှိသည် inline တစ်ဦးသို့" ပြည်နယ် ပိတ်ပင်တားဆီးမှုဒြပ်စင် ။ display: block ကို; (သင်ခြားနားချက်အကြောင်းပိုမိုသိရှိခြင်းအတွက်စိတ်ဝင်စားတယ်ဆိုရင်ဖတ် Inline Element တွေကို vs. Block-အဆင့် ။ )

ထို့နောက်စာသားရဲ့ width fit မှအချင်းချင်းတယောက်ကိုတယောက်နှင့်အတူအချိုးကျပေမယ့်နေဆဲ Flex ဖြစ်ဖို့သင့် tabs များအတင်းရန်လွယ်ကူသောလမ်းလက်ျာနှင့်လက်ဝဲ padding ကိုတူညီအောင်ဖို့ဖြစ်ပါတယ်။ ငါထိပ်နှင့်အောက်ခြေ 0 နှင့်လက်ျာသတ်မှတ်ထားဖို့ padding ကိုအတိုကောက် property ကိုအသုံးပြု 1em ဖို့ထွက်လာခဲ့တယ်။ padding ကို: 0 1em;

ကျွန်မကိုလည်း tabs များလင့်များတူသောလျော့နည်းကြည့်ရှုနိုင်အောင်, link ကိုမျဉ်းသားဖယ်ရှားပစ်ရန်ရွေးချယ်ခဲ့သည်။ ဒါပေမယ့်သင့်ရဲ့ပရိသတ်ကိုကြောင်းအားဖြင့်ရောထွေးစေခြင်းငှါလျှင်, ဒီလိုင်းထုတ်စွန့်ခွာ။ link ကို-အလှဆင်: none;

အဆိုပါ tabs များပတ်ပတ်လည်ပါးလွှာသောနယ်စပ်ချပြီးအသုံးပြုပုံကြောင့်သူတို့ကို tabs များတူစေသည်။ ငါသည်ခပ်သိမ်းသောလေးနှစ်ဖက်နယ်စပ်တဝိုက်နယ်စပ်ထားရန်နယ်စပ်အတိုကောက် property ကိုအသုံးပြုကြသည်: 0.06em အစိုင်အခဲ # 000; ထို့နောက်အသုံးပြုသော နယ်စပ်-အောက်ခြေ အောက်ခြေကနေဖယ်ရှားပစ်ရန်ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှု။ နယ်စပ်-အောက်ခြေ: 0;

ထိုအခါအကြှနျုပျသ tabs များ၏ font ကိုအရောင်နှင့်နောက်ခံအရောင်တချို့ချိန်ညှိဖန်ဆင်းတော်မူ၏။ သင့်ရဲ့ site ကိုကိုက်ညီသောစတိုင်များဤသတ်မှတ်မည်။ ဖောင်: ရဲရင့် 0.88em / 2em Arial, Geneva, helvetica, sans-serif; အရောင်: # 000; background-color: #ccc;

သူတို့ယေဘုယျအတွက်ကျောက်ဆူး tags များကိုထိခိုက်သောကြောင့်အထက်ပါစတိုင်များအပေါငျးတို့သ selector .tablist li တစ်ဦး, စိုးမိုးရေးအတွက်သွားရသင့်ပါတယ်။ မောက်စ်တင်: ထိုအခါ tabs များကပိုနှိပ်ပေါ်လာအောင်, သငျသညျအနညျးငယျပြည်နယ်စည်းမျဉ်း .tablist li တစ်ဦးကိုထည့်သွင်းသင့်ပါသည်။

ငါလာသောအခါသူကကျော်သငျသညျကြွက်က tab ကိုပေါ့ပ်စေရန်စာသားနဲ့နောက်ခံများ၏အရောင်ကိုပြောင်းလဲလို။ နောက်ခံ: # 3cf; အရောင်: #fff;

ငါ link ကိုမျဉ်းသားမဟုတ်ရှိနေဆဲချင်သော browser များရန်နောက်ထပ်သတိပေးချက်ပါဝင်သည်။ text-decoration: none; နောက်ထပ်ဘုံနည်းလမ်း tab ကိုကျော်ကျောအခါသင် mouse ကိုပေါ်မျဉ်းသားကိုဖွင့်ဖို့ဖြစ်ပါတယ်။ သင်လုပ်ဖို့လိုလျှင်-အလှဆင်စာပို့နိုင်ရန်ပြောင်းလဲ: မဉျြးသား, အလေးအနကျပွော;

သို့သော်အဘယ်မှာရှိ CSS ကို 3 ပါသလဲ

သငျသညျသတိထားရမှာခဲ့တာလျှင်, သင်ဖြစ်ကောင်းစတိုင်စာရွက်များတွင်အသုံးပြု 3 စတိုင်များဆို CSS ကိုရှိခဲ့ကြပြီမဟုတ်ကြောင်းသတိပြုမိပါတယ်။ ဤသည်က Internet Explorer အပါအဝင်မည်သည့်ခေတ်သစ်ဘရောက်ဇာထဲမှာအလုပ်လုပ်များ၏အားသာချက်ရှိပါတယ်။ သို့သော်က tabs များစတုရန်းသေတ္တာများထက်ပိုမိုဘာမှတူအောင်လုပ်မထားဘူး။ (က Browser-တိကျတဲ့ဖုန်းခေါ်ဆိုမှုဆက်စပ်ရဲ့) တစ်ဦး CSS ကို 3 စတိုင်ခေါ်ဆိုခနယ်စပ်-အချင်းဝက်ထည့်သွင်းခြင်းအားဖြင့်သင်အနားကပိုနေတဲ့မနီလာ folder ကိုအပေါ် tabs များကဲ့သို့အကြည့်ဖို့, ဝိုင်းစေနိုင်သည်။

သင် .tablist li မှစည်းကမ်း add သင့်စတိုင်များနေသောခေါင်းစဉ်: -webkit-border-top-Right-အချင်းဝက်: 0.50em; -webkit-border-top-လက်ဝဲ-အချင်းဝက်: 0.50em; -moz-border-အချင်းဝက်-topright: 0.50em; -moz-border-အချင်းဝက်-topleft: 0.50em; နယ်စပ်-top-Right-အချင်းဝက်: 0.50em; နယ်စပ်-top-လက်ဝဲ-အချင်းဝက်: 0.50em;

ဤရွေ့ကား, ငါသည်ရေးသားခဲ့သည်နောက်ဆုံးစတိုင်စည်းမျဉ်းစည်းကမ်းတွေရှိပါတယ်:

.tablist li တစ် {display: block ကို; padding ကို: 0 1em; text-decoration: none; နယ်စပ်: 0.06em အစိုင်အခဲ # 000; နယ်စပ်-အောက်ခြေ: 0; ဖောင်: ရဲရင့် 0.88em / 2em Arial, Geneva, helvetica, sans-serif; အရောင်: # 000; background-color: #ccc; / * CSS ကို 3 ဒြပ်စင် * / Webkit-border-top-Right-အချင်းဝက်: 0.50em; -webkit-border-top-လက်ဝဲ-အချင်းဝက်: 0.50em; -moz-border-အချင်းဝက်-topright: 0.50em; -moz-border-အချင်းဝက်-topleft: 0.50em; နယ်စပ်-top-Right-အချင်းဝက်: 0.50em; နယ်စပ်-top-လက်ဝဲ-အချင်းဝက်: 0.50em; } .tablist li တစ်ဦး: မောက်စ်တင် {နောက်ခံ: # 3cf; အရောင်: #fff; text-decoration: none; }

ဤအစတိုင်များနှင့်အတူသင်တို့ရှိသမျှသည်အဓိက browser များအတွက်အလုပ်လုပ်တယ်နဲ့ CSS 3 လိုက်နာ browser များအတွက်ကောင်းတဲ့ပုံနှိပ် tabs များတူကြောင်းတဲဘ်တပ်ထား menu ကရှိသည်။ နောက်စာမျက်နှာမှာသင် ပို. ပင် up ပြုလုပ်ဝတ်စားဆင်ယင်ဖို့သုံးနိုငျတစျခုထက်ပို option ကိုပေးသည်။

06 ၏ 06

လက်ရှိ Tab ကိုမီးမောင်းထိုးပြ

ငါဖန်တီး HTML မှာ, အ ul တစ်ဦး၏ ID နှင့်အတူတစျခုစာရင်းဒြပ်စင်ခဲ့ရသည်။ ဤသူသည်သင်တို့အရာကြွင်းလေထဲကနေတဦးတည်း LI တစ်ဦးကွဲပြားခြားနားစတိုင်ပေးဖို့ခွင့်ပြုပါတယ်။ အသုံးအများဆုံးအခြေအနေကလက်ရှိ tab ကိုတချို့လမ်းထွက်ရပ်စေရန်ဖြစ်ပါသည်။ ဒီစဉ်းစားရန်နောက်ထပ်နည်းလမ်းသငျသညျအသကျရှငျကြသည်မဟုတ်သော tabs များထွက် gray ချင်သောကြောင့်ဖြစ်သည်။ အဆိုပါအိုင်ဒီကိုကွဲပြားခြားနားသောစာမျက်နှာများပေါ်တွင်ရှိရာသို့ဖြစ်လျှင်သင်သည်ပြောင်းပေးပါ။

ငါ style က #current တစ်ဦးက tag ကိုအဖြစ် #current တစ်ဦးကနှစ်ဦးစလုံး: မောက်စ်တင် sta နှစ်ဦးစလုံးအနည်းငယ်ကွဲပြားကြသည်နိုင်အောင်။ သင်ကအရောင်, နောက်ခံအရောင်, ထိုဒြပ်စင်တည်းဟူသောအမြင့်, width နဲ့ padding ကိုပြောင်းလဲနိုင်သည်။ သင့်ရဲ့ဒီဇိုင်းသဘောအရလုပ်သမျှအပြောင်းအလဲများကိုလုပ်ပါ။

.tablist li # လက်ရှိနေတဲ့ {background-color: # 777; အရောင်: #fff; } .tablist li # လက်ရှိတစ်ဦး: မောက်စ်တင် {နောက်ခံ: # 39C; }

တဖန်သင်တို့ပြုသောအမှုဖွင့်! သင်ရုံသင့်ရဲ့ website မှာတစ်တဲဘ်တပ်ထား menu ကိုဖန်တီးပါတယ်။