سي ايس ڊي ۽ ڪابه تصويرون سان ٽيبل ٿيل نيويگيشن ڪيئن ٺاهيو

01 جو 06

سي ايس ڊي ۽ ڪابه تصويرون سان ٽيبل ٿيل نيويگيشن ڪيئن ٺاهيو

ويب صفحن تي نيووي هڪ فهرست جي صورت ۾ آهي، ۽ ٽيب ٿيل نيويگيڪ وانگر افقي فهرست جيان آهي. سي ايس آئي سان افقي ٽيبل بيڊ نيويگيشن ٺاهڻ لاء اهو آسان آهي، پر سي ايس ڊي 3 اسان کي ڪجھ وڌيڪ اوزار ڏيکاري ٿو ته انهن کي ڏسڻ ۾ وڌيڪ بهتر آهي.

هي سبق توهان CSS سيب ٿيل مينيو ٺاهڻ لاء HTML ۽ CSS جي ذريعي وٺي ويندا. انهي لنڪ تي ڪلڪ ڪيو انهي کي ڏسڻ لاء ڪيئن ڪئين نظر ايندو.

هي ٽيبل ٿيل مينيو ڪي تصويرون ، صرف HTML ۽ سي ايس ايس 2 ۽ سي ايس 3 استعمال ڪري ٿو. اهو وڌيڪ موبل شامل ڪرڻ يا ان ۾ متن تبديل ڪرڻ سان آساني سان ايڊٽ ڪيو ويندو.

برائوزر جي مدد

اهو ٽيب مينيو سڀني وڏين برائوزرن ۾ ڪم ڪندو. انٽرنيٽ هڻندڙ گول گول ڪنارن کي نه ڏيکاريندو، پر ٻي صورت ۾، اهو صرف فائرس فڪس، سفاري، اوپيرا، ۽ Chrome وانگر ٽيبل ڏيکاريندو.

02 جو 06

پنهنجو مکيه فهرست لکو

سڀ نگارن جي مينڊيٽ ۽ ٽيب حقيقت ۾ صرف هڪ اڻ ترتيب ڏنل فهرست آهن. انهي کان پهريان توهان جيڪي ڪرڻ چاهيو ٿا، هڪ اڻ لسٽ ڪيل فهرست لسٽ آهي، جتي توهان چاهيو ته توهان جي ٽيبيو نيويگيگريشن وڃڻ وڃو.

اهو سبق ڀريل آهي ته توهان پنهنجي HTML کي هڪ ٽيڪسٽ ڊائريڪٽر ۾ لکي سگهو ٿا ۽ توهان کي پنهنجي ويب پيج تي پنهنجي مينيو جي لاء HTML کي ڪهڙو ڄاڻو ٿا.

پنهنجي اڻ کٽيل فهرست لسٽ ڪريو جيئن ته:

• طبقو = "tablist">
  • CSS 3
  • id = "موجوده"> ٽيب
  • لاء
  • ماڻهون

  توهان اهو نوٽيس ڪنداسين ته ڪوڊ ٻه شيون ڪال ڪريو: class = "tablist" ۽ id = "موجوده". پهرين گهري ٿي . جيڪڏهن توهان ٽيبلسٽ ڪلاس کي توهان جي غير ترتيب ڏنل فهرست تي نه وجهي، ٽيب ڪم نه ڪندو. ٻيو نمبر اختياري آهي. رک ڏيو id = "موجوده" جنھن تي توھان جو ٽيب جيڪو توھان چاھيو ٿو ان تي صفحي تي پھچي. آئون اڪثر هن صفحي کي اجاگر ڪرڻ لاء استعمال ڪريان ٿو پر مان توهان تي آهيان، پر توهان ان کي سڀ کان اهم ٽيب کي اجاگر ڪرڻ لاء استعمال ڪري سگهو ٿا. يا توهان ان کي مڪمل طور ختم ڪري سگهو ٿا.

03 جو 06

توهان جي انداز جي سيٽنگ تبديل ڪرڻ شروع ڪريو

توهان يا ته هڪ عام طرز شيٽ يا داخلي انداز واري شيٽ استعمال ڪري سگهو ٿا. نمونو مينيو صفحي واري صفحي ۾ اندروني انداز شيٽ جي استعمال ڪندو آهي.

پهرين اسين پنهنجو پاڻ کي اٽل ڪنداسين

اهو ڪٿي آهي اسان اسان طبقي جي ٽيبلسٽ استعمال ڪندا آهيون. بلڪه توهان يو ايل ٽيگ کي اسٽائل ڪريو، جنهن جو انداز توهان جي صفحي تي اڻ ترتيب ڏنل فهرستن جي هجي، توهان کي صرف يو ايل ڪلاس انداز ڪرڻ گهرجي. ٽيبلسٽ، تنهن ڪري پهريان توهان جي سي ايس ايس ۾ پهرين داخل ٿيڻ گهرجي:

.tablist {}

آئون توهان جي وقت کان اڳ ۾ گھمڻ بڙڙي ()) اڳيان رکندو آهيان، تنهنڪري آئون ان کي بعد ۾ نه وساريندس.

جڏهن ته اسان ٽئب مينسٽ جي فهرست لاء غير ترتيب ڏنل فهرست ٽيگ استعمال ڪري رهيا آهيون، پر اسين ڪنهن کي گوليون يا انگن ۾ جڙڻ نٿا چاهيون. تنهنڪري پهريون انداز توهان کي شامل ڪيو وڃي. فهرست جو انداز: ڪابه؛ اهو برائوزر ٻڌائي ٿو ته اهو هڪ فهرست آهي، جڏهن ته اڳوڻي انداز واريون شئي واري فهرست ناهي (جهڙوڪ گولٽس يا نمبر).

ان کان پوء، توهان پنهنجي فھرست جي ڊيچ کي مقرر ڪرڻ لاء جڳهه کي ميٽ ڪرڻ چاهيو جيڪي توهان ان کي ڀرڻ چاهيو ٿا. مون پنهنجي ڊيگهه لاء 2em چونڊيو آهي، جيئن ته معياري فائيل سائيز جي ڊيگهه آهي، ۽ ٽيبل جي لکت واري اڌ يا مٿي ڏنل اڌ ڄاڻ ڏي ٿو. اوچائي: 2em؛ پر توهان پنهنجي چوٿين کي هر سائيز تي پسند ڪري سگهو ٿا. يو ٽي ٽيگ خودڪار طور چوٽي جي 100 سيڪڙو وٺي وينديون، تنهنڪري جيڪڏهن توهان کي اهو ڪنٽينٽٽر کان ننڍو هجڻ گهرجي، توهان کي چوٽي ٻاهر نڪري سگهو ٿا.

آخرڪار، جيڪڏهن توهان جي ماسٽر طرز شيٽ کي ايل ۽ اوپي ٽيگ لاء اڳوڻو ڪونهي، توهان کي ان ۾ داخل ڪرڻ چاهيندا. انهي جو مطلب آهي ته توهان توهان جي او ايل تي سرحدون، مارجن، ۽ ختم ڪرڻ گهرجي. لڳائڻ: 0؛ حاڪمن: 0؛ سرحد: ٻيو؛ جيڪڏهن توهان پهريان ئي يو ايس ٽيگ ريٽ ڪيو آهي، توهان پنهنجي ڊزائن سان پڪڙيل ڪجهه مجنن، پيڊنگ، يا سرحد تبديل ڪري سگهو ٿا.

توهان جي آخري فائيل. ڪسٽمسٽ ڪلاس کي هن طرح ڏسڻ گهرجي:

.بسٽ فهرست {لسٽم جو انداز: ٻيو؛ اوچائي: 2em؛ لڳائڻ: 0؛ حاڪمن: 0؛ سرحد: ٻيو؛ }

04 جو 06

LI فهرست لسٽ ۾ تبديلي آڻيندي

هڪ دفعو توهان پنهنجي اڻ بي ترتيب ڪيل فهرست کي نظر انداز ڪيو آهي، توهان کي ان جي اندر ٽي ٽيگ جو اندازو ڪرڻو پوندو. ٻي صورت ۾، اهي عملا هڪ معياري لسٽ وانگر ڪندو ۽ توهان جي ٽيب کي صحيح رکڻ جي بغير ايندڙ قطار ڏانهن هر طرف منتقل ٿيندا.

پهريون، پنهنجي انداز جي ملڪيت قائم ڪريو:

.tablist li {}

پوء توهان پنهنجي ٽيب کي فٽ ڪرڻ چاهيو ته اهي اهي افقي جهاز تي لڪائين. سچل: ڇڏي؛

۽ ٽيب جي وچ ۾ ڪجهه حدن کي شامل ڪرڻ نه وساريو، تنهن ڪري اهي گڏجي گڏ نه ٿا ڪن. ڪمن جي حد: 0.13em؛

توھان جي جھلڪن ھن جھڙي ڏسڻ گھرجي:

.tablist li {float: left؛ ڪمن جي حد: 0.13em؛ }

05 جي 06

ٽيبل ٺاهڻ سي ايس 3 سان ٽيب وانگر ڏسو

هن طرز جي شيٽ ۾ ڳري کڻڻ جي تمام گهڻي ڪرڻ لاء، آئون بي ترتيب اڻ لسٽ ۾ لنڊن کي ھدف ڪري رهيو آهيان. برائوزر کي تسليم ڪيو ويو آهي ته لنڪ ٻين ويب پيج تي وڌيڪ ويب پيج تي وڌيڪ آهن، تنهن ڪري اهو پراڻين برائوزر جيڪي هور رياستن وانگر شيون عمل ڪرڻ لاء آسان آهي جيڪڏهن توهان انهن لنگر لنڪس (لنڪس) ۾ ڳنڍيندا آهيو. تنهنڪري پهرين پنهنجو اندازو خاصيتون لکندو.

.tablist تي ھڪ {} .tablist تي ھڪ: hover {}

ڇو ته اهي ٽيب هڪ اپليڪيشن ۾ ٽيب وانگر عمل ڪرڻ گهرجي، توهان کي ٽيبل جي سڄي علائقي ڪلڪ ڪرڻ لائق نه آهي، نه صرف منسلڪ متن. هن کي ڪرڻ لاء، توهان کي عام " ان لائن " رياست مان هڪ ٽيگ ايڪس کي دٻايو آهي . ڏيکاريو: بلاڪ؛ (جيڪڏهن توهان فرق جي باري ۾ وڌيڪ ڄاڻڻ ۾ دلچسپي رکو ٿا ، ان لائين آئوٽ واري بلاڪ ٽائون پڙهو.)

پوء، توهان جي ٽيبن کي هڪ ٻئي سان سمجهه ڪرڻ لاء هڪ آسان طريقو آهي، پر اڃا تائين متن جي چوٿين کي فڪس ڪرڻ واري دڙي کي صحيح ۽ کاٻي پيڊنگ ساڳيو آهي. مون انڊنگ جي آڌار تي ملڪيت استعمال ڪئي هئي مٿين ۽ تري ۾ 0 ۽ دڙي ۽ کاٻي پاسي 1em تائين قائم ڪن. ٻرندڙ: 0 1em؛

مون انهي لنڪ جي لڪير کي ختم ڪرڻ جو انتخاب ڪيو آهي، انهي ڪري ته ٽيب لنڪس وانگر گهٽ نظر اچن ٿا. پر جيڪڏهن توهان جا ناول انهي طرفان پريشان ٿي وڃن، هن لڪير کي ٻاهر ڪڍي ڇڏيندا. ڪچهري جي جوڙجڪ: ڪابه؛

ٽيب جي چوڌاري پولنگ سرحد ٺاهي، انهن کي انهن وانگر ٽيب نظر ايندي. آئون سرحد جي آڳاٽي ملڪيت استعمال ڪيو هو سرحد جي چوڌاري سڀني ڪنارن جي چوڌاري سرحد سرحد: 0.06 ايم ٽنڊو # 000؛ ۽ پوء سرحد جي هيٺيون ملڪيت استعمال ڪئي وڃي ته ان کي هيٺان کان هٽايو وڃي. سرحد-تري: 0؛

ان کان پوء مون مون کي ڪجهه ترتيبن جي رنگن جي رنگ، رنگ ۽ پس منظر رنگ ۾ ڪيو. انهن شالين تي سيٽ ڪريو جيڪي توهان جي سائيٽ سان ملن ٿا. فٽٽ: بيلو 0.88em / 2 ملي آرٽل، جينويو، هيلو ويسٽا، سئن سيرف؛ رنگ: # 000؛ background-color: #ccc؛

مٿين سڀني شالن جي چونڊيندڙن ۾ وڃڻ گهرجي. ليبل لسٽ ۾، اهو قاعدو اهو آهي ته اهي عام طور تي لنگر ٽڪرين کي متاثر ڪندا آهن. پوء ٽيبل ٺاهڻ لاء وڌيڪ ڪلڪ ڪرڻ سان ڪلڪ ٿيو، توهان کي ڪجهه رياست جي اصول شامل ڪرڻ گهرجي. فهرست لسٽ ۾: hover.

مون کي متن ۽ پس منظر جو رنگ تبديل ڪرڻ چاهيو ته ٽيب پاپ ٺاهيو جڏهن توهان ان کي مڇي ڇڏيندا آهيو. پس منظر: # 3cf؛ رنگ: #fff؛

۽ مون برائوزررن ۾ هڪ ٻي ياد ڏياريندڙ شامل ڪيو آهي جنهن سان آئون توهان کي لنڪ نه رهڻ چاهيندا آهن. لکت جي سجاڳي: ٻيو؛ هڪ ٻيو عام طريقو اهو آهي ته توهان کي ٽئب تي مڇو جڏهن هيٺ ايندڙ ڦري کي ڦيرايو ويندو آهي. جيڪڏهن توهان اهو ڪرڻ چاهيو ٿا، ان کي ٽيڪسٽ-سجاڳي ۾ تبديل ڪريو: هيٺيون؛

پر ڇا ڊي ايس 3 ڪٿي آهي؟

جيڪڏهن توهان کي ڌيان ڏنو ويو آهي، توهان شايد محسوس ڪيو آهي ته انداز ۾ ڪو به سي ايس 3 شيلون استعمال نه ڪيو ويو آهي. هي هڪ انٽرنيٽ ايڪسپلورر سميت، جديد ڪني برائوزر ۾ ڪم ڪرڻ جو فائدي آهي. پر اهو اهو نه ٿو ته خانو بڪس کان وڌيڪ ٽيبل وانگر نظر اچي ٿو. هڪ سي ايس 3 3 انداز ڪال سرحدي ريڊيو شامل ڪرڻ سان (۽ اهو اهو برائوزر-مخصوص ڪالون سان لاڳاپيل آهي) توهان هڪ ڪنائل مينيلا فولڊر تي ٽئب وانگر ڏسڻ لاء کنڊر گول ڪيو.

توهان جي شئي واريون .ٽبلسٽ ۾ ڪنهن حڪمراني ۾ شامل ڪيو وڃي ٿو: -web-border-top-right-radius: 0.50em؛ ويڪرائي-سرحد-مٿي-کاٻي پاسي-ريڊيو: 0.50em؛ -موزيد سرحد-ريگوسس-تياري: 0.50em؛ -مدار سرحد-ريگيوس-چوري: 0.50em؛ سرحد-مٿان-ريڊي ريڊس: 0.50em؛ سرحد-مٿي-بائیں ريڊس: 0.50em؛

اهي آخري فائنل جا قاعدا آهن جن مان لکي چڪو آهيان:

.tablist li a {نمائش: بلاڪ؛ ٻرندڙ: 0 1em؛ لکت جي سجاڳي: ٻيو؛ سرحد: 0.06 ايم ڪروڙ # 000؛ سرحد-تري: 0؛ فٽٽ: بيلو 0.88em / 2 ملي آرٽل، جينويو، هيلو ويسٽا، سئن سيرف؛ رنگ: # 000؛ background-color: #ccc؛ / * سي ڊي 3 عناصر * ويبڪٽي-سرحد-چوٽي-دائي رائيم: 0.50em؛ ويڪرائي-سرحد-مٿي-کاٻي پاسي-ريڊيو: 0.50em؛ -موزيد سرحد-ريگوسس-تياري: 0.50em؛ -مدار سرحد-ريگيوس-چوري: 0.50em؛ سرحد-مٿان-ريڊي ريڊس: 0.50em؛ سرحد-مٿي-بائیں ريڊس: 0.50em؛ }. ويب سائيٽ تي هڪ: hover {background: # 3cf؛ رنگ: #fff؛ لکت جي سجاڳي: ٻيو؛ }

انهن شالن سان، توهان وٽ ٽيبل ٿيل مينيو آهي جيڪو سڀني وڏين برائوزر ۾ ڪم ڪندو آهي ۽ سي ايس 3 3 مطابق برائوزرز ۾ سٺو پيچيد ٿيل ٽيب وانگر لڳندو آهي. اڳيون صفحو توهان کي هڪ وڌيڪ اختيار ڏئي ٿو جيڪو توهان وڌيڪ لباس ٺاهڻ لاء استعمال ڪري سگهو ٿا.

06 جي 06

موجوده ٽيب کي دٻايو

HTML ۾ مون ٺاهيو، يو ايل هڪ فهرست جي عنصر هڪ سڃاڻپ سان هو. اهو توهان کي اجازت ڏي ٿو هڪ لائائي مان باقي مختلف انداز ۾. سڀ کان وڌيڪ عام صورتحال ٺاهڻ لاء موجوده ٽئب ڪجھ طريقي سان اٿي ٿو. انهي جي سوچڻ لاء هڪ ٻيو طريقو اهو آهي ته توهان انهن ٽيبن کي صاف ڪرڻ چاهيندا جيڪي جاندار نه آهن. توھان وري تبديلي ڪندا جتي مختلف صفحن تي آھي.

آئون ٻئي طريقي سان # سموري اي ٽيگ سان گڏ ئي # سمارٽ اي: هور اسٽيا آھن، اھي ٻئي ھڪڙو مختلف آھن. توھان رنگ کي تبديل ڪري سگھو ٿا، پس منظر رنگ، ان جي اونچائي، انهي عنصر جو چوٿون ۽ چوڪڻ. پنهنجي ڊزائن ۾ ڪي به تبديليون ٺاهي ٺاهيو.

.بسٽ فهرست لي # موجوده a {پس منظر-رنگ: # 777؛ رنگ: #fff؛ }. ڪاربل لي # موجوده ھڪ: hover {background: # 39C؛ }

۽ توهان ڪيو آهي! توهان پنهنجو ويب سائيٽ لاء ٽيبل ٿيل مينيو ٺاهي ڇڏيو آهي.