سی ایس ایس اور کوئی تصویر کے ساتھ ٹیبڈ نیویگیشن کیسے بنائیں

01 کے 06

سی ایس ایس اور کوئی تصویر کے ساتھ ٹیبڈ نیویگیشن کیسے بنائیں

ویب صفحات پر نیویگیشن ایک فہرست کی ایک شکل ہے، اور ٹیبلڈ نیوی گیشن افقی فہرست کی طرح ہے. سی ایس ایس کے ساتھ افقی tabbed نیویگیشن تخلیق کرنے کے لئے یہ آسان ہے، لیکن سی ایس ایس 3 ہم انہیں مزید بہتر بنانے کے لئے چند مزید آلات فراہم کرتا ہے.

یہ سبق آپ CSS کے ٹیبلڈ مینو بنانے کے لئے HTML اور CSS کے ذریعے لے جائے گا. اس لنک پر کلک کریں کہ یہ کس طرح نظر آئے گا دیکھنے کے لئے کلک کریں.

یہ ٹیبڈ مینو کوئی تصاویر ، صرف ایچ ٹی ایم ایل اور سی ایس ایس 2 اور سی ایس ایس کا استعمال نہیں کرتا 3. یہ زیادہ ٹیبز کو شامل کرنے یا ان میں متن کو تبدیل کرنے کے لئے آسانی سے ترمیم کیا جا سکتا ہے.

براؤزر سپورٹ

یہ ٹیب مینو تمام بڑے براؤزر میں کام کرے گا. انٹرنیٹ کے ایکسپلورر گول کونوں کو نہیں دکھائے گا، لیکن دوسری صورت میں، یہ فائر فاکس، سفاری، اوپیرا، اور کروم جیسے ٹیب دکھائے گا.

02 کے 06

اپنی مینو کی فہرست لکھیں

تمام نیویگیشن مینو اور ٹیب واقعی ایک غیر ترتیب شدہ فہرست ہیں. لہذا آپ جو کرنا چاہتے ہیں، وہ آپ کے ٹیبڈ نیوی گیشن جانے کے لۓ لنکس کی غیر ترتیب شدہ فہرست لکھتے ہیں.

یہ سبق یہ ہے کہ آپ اپنے ایچ ٹی ایم ایل ایک ٹیکسٹ ایڈیٹر میں لکھ رہے ہیں اور آپ جانتے ہیں کہ آپ کے ویب صفحہ پر آپ کے مینو کے لئے ایچ ٹی ایم ایل کو کہاں جانا ہے.

اپنی بے ترتیب کردہ فہرست لکھیں:

• کلاس = "ٹیبل لسٹ">
  • سی ایس ایس 3
  • id = "current"> ٹیبز
  • کے لئے
  • مینو

  آپ کو یہ پتہ چلتا ہے کہ کوڈ دو چیزوں کو کال کریں: کلاس = "ٹیبل لسٹ" اور id = "موجودہ". سب سے پہلے کی ضرورت ہے . اگر آپ ٹیبل لسٹ کلاس آپ کی غیر ترتیب شدہ فہرست پر نہیں ڈالتے ہیں، تو ٹیب کام نہیں کریں گے. دوسرا اختیاری ہے. بتائیں = "موجودہ" جس بھی کسی بھی ٹیب پر آپ اس صفحے پر روشنی ڈالنا چاہتے ہیں. میں عام طور پر اس کا استعمال کرتا ہوں کہ اس صفحے کو اجاگر کرنے کے لئے میں ہوں، لیکن آپ اس کا استعمال سب سے زیادہ اہم ٹیب کو اجاگر کرنے کے لئے کرسکتے ہیں. یا آپ اسے مکمل طور پر نکال سکتے ہیں.

03 کے 06

اپنے انداز شیٹ میں ترمیم شروع کریں

آپ یا تو بیرونی طرز شیٹ یا داخلی سٹائل شیٹ استعمال کرسکتے ہیں. نمونہ مینو صفحہ <سر> دستاویز میں داخلی سٹائل شیٹ کا استعمال کرتا ہے.

سب سے پہلے ہم اپنی مرضی کے مطابق خود مختار کریں گے

یہ ہے کہ ہم کلاس ٹیبل لسٹ استعمال کرتے ہیں. ایچ ٹی ایم ایل میں. بلکہ UL ٹیگ کو اسٹائل کرنے کے بجائے، جو آپ کے صفحے پر تمام غیر ترتیب شدہ فہرستوں کو سٹائل کرے گا، آپ کو صرف یو ایل کلاس سٹائل کرنا چاہئے. ٹیبل لسٹ تو آپ کے سی ایس ایس میں پہلا اندراج ہونا چاہئے:

.tablist {}

میں آخر سے گھوبگھرتا گھومنے والا کڑا (}) میں ڈالنا چاہتا ہوں، لہذا میں اسے بعد میں نہیں بھولوں گا.

جب ہم ٹیب مینو فہرست کے لئے غیر ترتیب شدہ فہرست ٹیگ استعمال کررہے ہیں، لیکن ہم نہیں چاہتے ہیں کہ کسی گولیاں یا تعداد میں جڑیں. لہذا آپ کو پہلے انداز میں شامل کرنا چاہئے. فہرست طرز: کوئی نہیں؛ یہ براؤزر کو بتاتی ہے کہ یہ ایک فہرست ہے، یہ پہلے سے طے کردہ سٹائل (جیسے گولیاں یا نمبر) کے ساتھ ایک فہرست نہیں ہے.

اس کے بعد، آپ اپنی فہرست کی اونچائی کو اس جگہ سے ملنے کے لئے مقرر کرسکتے ہیں جسے آپ چاہتے ہیں اسے پورا کرنا ہوگا. میں نے اپنی اونچائی کے لئے 2em کا انتخاب کیا ہے، کیونکہ اس کا معیاری فونٹ سائز دوگنا ہے، اور ٹیب کے متن سے اوپر اور اس کے نیچے آدھے ایم کو دیتا ہے. اونچائی: 2em؛ لیکن آپ اپنی چوڑائی کو جو بھی سائز چاہتے ہیں اسے مقرر کر سکتے ہیں. یو ایل ٹیگز خود بخود 100 فیصد چوڑائی لے جائیں گی، لہذا جب تک کہ آپ کو موجودہ کنٹینر سے چھوٹا نہیں ہونا چاہئے، آپ چوڑائی سے باہر نکل سکتے ہیں.

آخر میں، اگر آپ کے ماسٹر سٹائل شیٹ میں UL اور OL ٹیگ کے لئے presets نہیں ہے تو، آپ ان کو ڈالنے کے لئے چاہتے ہیں. اس کا مطلب ہے کہ آپ کو آپ کے یو ایل پر سرحدیں، مارجن اور بھرتی بند کرنا چاہئے. بھرتی: 0؛ مارجن: 0؛ سرحد: کوئی نہیں اگر آپ نے پہلے سے ہی یو ایل ٹیگ کو دوبارہ ترتیب دیا ہے تو، آپ کو مارجن، بھرتی، یا کسی حد تک سرحد تبدیل کرسکتے ہیں جو آپ کے ڈیزائن سے فٹ بیٹھتے ہیں.

آپ کے حتمی .بسٹائل فہرست کو اس طرح نظر آنا چاہئے:

ٹیبل لسٹ {فہرست سٹائل: کوئی نہیں؛ اونچائی: 2em؛ بھرتی: 0؛ مارجن: 0؛ سرحد: کوئی نہیں }

04 کے 06

LI فہرست اشیاء میں ترمیم کریں

ایک بار جب آپ نے اپنی غیر ترتیب شدہ فہرست کو سٹائل کروانے کے بعد، آپ کو اس کے اندر لائ ٹیگ کرنے کی ضرورت ہے. دوسری صورت میں، وہ ایک معیاری فہرست کی طرح کام کریں گے اور آپ کے ٹیب کو صحیح طریقے سے رکھنے کے بغیر اگلے سطر میں ہر اقدام کریں گے.

سب سے پہلے، اپنی طرز کی جائیداد قائم کریں:

.tablist li {}

اس کے بعد آپ اپنے ٹیبز کو فلوٹ کرنا چاہتے ہیں تاکہ وہ افقی ہوائی جہاز پر جائیں. فلوٹ: بائیں؛

اور ٹیبز کے درمیان کچھ حد میں شامل کرنے کے لئے مت بھولنا، لہذا وہ ایک ساتھ ضم نہیں کرتے ہیں. مارجن - دائیں: 0.13 ایم؛

آپ کی طرزیں اس طرح نظر آتی ہیں:

ٹیبل لسٹ لی {فلوٹ: بائیں؛ مارجن - دائیں: 0.13 ایم؛ }

05 سے 06

ٹیبز کو سی ایس ایس 3 کے ساتھ ٹیب کی طرح دیکھو

اس طرز شیٹ میں بھاری لفٹنگ کے زیادہ تر کرنے کے لئے، میں غیر ترتیب شدہ فہرست کے اندر لنکس کو نشانہ بنا رہا ہوں. براؤزر کو یہ تسلیم کرتا ہے کہ لنکس دیگر ٹیگ کے مقابلے میں ویب صفحہ پر زیادہ کام کرتی ہیں، لہذا اگر آپ انہیں لنگر ٹیگ (روابط) سے منسلک کرتے ہیں تو پرانے ریاستوں کو ہور ریاستوں جیسے چیزوں کا اطلاق کرنا آسان ہے. لہذا سب سے پہلے آپ کے سٹائل کی خصوصیات لکھتے ہیں:

.tablist li a {} .tablist li a: hover {}

کیونکہ یہ ٹیبز کو ایک ایپلی کیشنز میں ٹیب کی طرح کام کرنا چاہیے، آپ چاہتے ہیں کہ ٹیب کے پورے علاقے پر کلک کرنے کے قابل نہ ہوں، نہ صرف منسلک متن. ایسا کرنے کے لئے، آپ کو اس کے عام " ان لائن " ریاست سے ایک بلاک عنصر میں ٹی ٹی کو تبدیل کرنا ہوگا. ڈسپلے: بلاک؛ (اگر آپ فرق کے بارے میں مزید جاننے میں دلچسپی رکھتے ہیں تو، بلاک-لیول بمقابلہ ان لائن عناصر پڑھیں .)

اس کے بعد، آپ کے ٹیبز کو ایک دوسرے کے ساتھ ہم آہنگ کرنے کا ایک آسان طریقہ ہے، لیکن ٹیکسٹ کی چوڑائی کو ابھی تک فکس کرنے کے لۓ فلیکس دائیں اور بائیں بازو بنانا ہے. میں پیڈنگ آٹھویںٹ پراپرٹی کا استعمال کرتا تھا اوپر اور نیچے 0 اور دائیں اور بائیں 1 منٹ تک مقرر کرنے کے لئے. بھرتی: 0 1em؛

میں نے بھی لنکس کی فہرست کو دور کرنے کا انتخاب کیا ہے، تاکہ ٹیبز لنکس کی طرح کم نظر آئے. لیکن اگر آپ کے ناظرین اس کی طرف سے الجھن ہوسکتے ہیں تو، اس لائن کو چھوڑ دیں. لنک سجاوٹ: کوئی نہیں؛

ٹیبز کے ارد گرد ایک پتلی سرحد ڈال کر، یہ انہیں ٹیبز کی طرح نظر آتی ہے. میں نے سرحدی آتشبازی کی جائیداد کا استعمال کیا تھا جس میں سرحد کے تمام چاروں طرف سرحد کی حد رکھی گئی: 0.06 ملین ٹھوس # 000؛ اور پھر نیچے سے نیچے سے نکالنے کے لئے سرحد کے نیچے جائیداد کا استعمال کیا. سرحد کے نیچے: 0؛

پھر میں نے ٹیبز کے فونٹ، رنگ اور پس منظر کا رنگ کچھ ایڈجسٹمنٹ بنا دیا. ان شیلیوں کو اپنی سائٹ سے مماثل کریں. فونٹ: بولڈ 0.88 ایم / 2 ایم آریل، جیناوا، ہیلیویٹیکا، سیر سیرف؛ رنگ: # 000؛ پس منظر کا رنگ: #ccc؛

مندرجہ ذیل شیلیوں میں سے ہر ایک کو منتخب کرنے والے میں شامل ہونا چاہئے. فہرست میں، حکمرانی تاکہ وہ لنگر عام طور پر ٹیگ کو متاثر کریں. پھر ٹیبز زیادہ کلک کرنے کے قابل ہونے کے لۓ، آپ کو کچھ ریاستی حکمرانی شامل کرنا چاہئے. ٹیبل لسٹ میں ایک: ہور.

جب آپ اس پر ماؤس کرتے ہیں تو ٹیب پاپ بنانے کے لئے میں متن اور پس منظر کا رنگ تبدیل کرنا چاہتا ہوں. پس منظر: # 3cf؛ رنگ: #fff؛

اور میں نے براؤزروں کو ایک اور یاد دہانی بھی شامل کی ہے جسے میں چاہتا ہوں کہ وہ لنک قائم نہیں رہیں. ٹیکسٹ سجاوٹ: کوئی نہیں؛ ایک اور عام طریقہ یہ ہے کہ آپ کو ٹیب کے اوپر ماؤس جب ان کے ماؤس پر نظر آئیں. اگر آپ ایسا کرنا چاہتے ہیں تو، اسے ٹیکسٹ سجاوٹ میں تبدیل کریں: ان لائن؛

لیکن سی ایس ایس 3 کہاں ہے؟

اگر آپ توجہ دے رہے ہیں تو، آپ نے شاید محسوس کیا ہے کہ طرز شیٹ میں استعمال نہیں کیا جاتا سی ایس ایس 3 شیلیوں. اس کے پاس کسی بھی جدید براؤزر میں کام کرنے کا فائدہ ہے، بشمول انٹرنیٹ ایکسپلورر. لیکن یہ ٹیبز کو مربع بکسوں سے زیادہ کچھ نہیں لگتی ہے. ایک سی ایس ایس 3 سٹائل کال سرحد ریڈیو کو شامل کرکے (اور یہ براؤزر کے مخصوص کالز سے متعلق ہے) آپ کو ایک منیلا فولڈر پر ٹیب کی طرح دیکھنے کے لئے کناروں کی گولیاں بنا سکتے ہیں.

اس اصول کو جو آپ کو ایک حکمرانی میں شامل ہونا چاہئے. ایک ویب سائٹ کے مطابق: ویب سائٹ - سرحد - اوپر دائیں ریڈیو: 0.50em؛ ویب سرحد سرحد - سب سے اوپر بائیں ریڈیو: 0.50em؛ موومنٹ - ریڈیو ریڈیو ٹاپ: 0.50 ایم؛ -موز سرحد-ردعمل-تکلیف: 0.50em؛ سرحدی چوٹی دائیں ریڈیو: 0.50em؛ سرحدی چوٹی بائیں ریڈیو: 0.50em؛

یہ میں نے لکھا آخری طرز عمل کے قوانین ہیں:

ٹیبل لسٹ میں ایک {ڈسپلے: بلاک؛ بھرتی: 0 1em؛ ٹیکسٹ سجاوٹ: کوئی نہیں؛ سرحد: 0.06 ایم ٹھوس # 000؛ سرحد کے نیچے: 0؛ فونٹ: بولڈ 0.88 ایم / 2 ایم آریل، جیناوا، ہیلیویٹیکا، سیر سیرف؛ رنگ: # 000؛ پس منظر کا رنگ: #ccc؛ / * سی ایس ایس 3 عناصر * / ویب کٹ سرحد - اوپر دائیں ریڈیو: 0.50em؛ ویب سرحد سرحد - سب سے اوپر بائیں ریڈیو: 0.50em؛ موومنٹ - ریڈیو ریڈیو ٹاپ: 0.50 ایم؛ -موز سرحد-ردعمل-تکلیف: 0.50em؛ سرحدی چوٹی دائیں ریڈیو: 0.50em؛ سرحدی چوٹی بائیں ریڈیو: 0.50em؛ } .ٹوٹل فہرست میں: ہور {پس منظر: # 3cf؛ رنگ: #fff؛ ٹیکسٹ سجاوٹ: کوئی نہیں؛ }

ان شیلیوں کے ساتھ، آپ کے پاس ایک ٹیبڈ مینو ہے جس میں تمام بڑے براؤزرز میں کام کرتا ہے اور سی ایس ایس 3 کے مطابق براؤزرز میں اچھا پرنٹ ٹیب کی طرح لگ رہا ہے. اگلا صفحہ آپ کو ایک اور اختیار فراہم کرتا ہے جو آپ اس سے بھی زیادہ لباس پہننے کے لئے استعمال کرسکتے ہیں.

06 کے 06

موجودہ ٹیب کو نمایاں کریں

ایچ ٹی ایم ایل میں میں نے پیدا کیا، یو ایل نے ایک شناختی عنصر کا ایک ID کے ساتھ تھا. اس سے آپ کو ایک LI کو باقی جگہ سے مختلف انداز فراہم کرنے کی اجازت دیتا ہے. سب سے زیادہ عام صورت حال موجودہ ٹیب کسی طرح سے باہر کھڑا کرنا ہے. اس کے بارے میں سوچنے کا ایک اور طریقہ یہ ہے کہ آپ ان ٹیبوں کو بھوری کرنا چاہتے ہیں جو زندہ نہیں ہیں. پھر آپ کو مختلف صفحات پر آئی ڈی کہاں تبدیل کر دیا ہے.

میں # ایک ہی ٹیگ کے ساتھ ساتھ #current A: ہور سٹا دونوں سٹائل تاکہ دونوں تھوڑا سا مختلف ہیں. آپ اس عنصر کے رنگ، پس منظر کا رنگ، حتی اونچائی، چوڑائی اور بھرتی کو تبدیل کرسکتے ہیں. جو کچھ بھی آپ کے ڈیزائن میں احساسات کو سمجھتا ہے اسے بنائیں.

ٹیبلٹ لی # موجودہ ایک {پس منظر کا رنگ: # 777؛ رنگ: #fff؛ } .ٹوب لسٹ میں # موجودہ ایک: ہور {پس منظر: # 39C؛ }

اور تم کر رہے ہو! آپ نے ابھی اپنی ویب سائٹ کے لئے ٹیبڈ مینو تیار کیا ہے.