ایک مرحلہ وار گائیڈ
چاہے آپ کا نیویگیشن مینو سب سے اوپر یا اوپر عمودی قطار میں ایک افقی قطار ہے، یہ اب بھی ایک فہرست ہے. ویب نیوی گیشن ڈیزائن کرتے وقت، اکثر یہ بھولنا آسان ہے کہ نیویگیشن مینو صرف لنکس کی ایک شاندار گروپ ہے. لیکن اگر آپ XHTML + CSS استعمال کرتے ہوئے اپنے نیوی گیشن کا پروگرام کرتے ہیں تو، آپ ایک مینو تشکیل دے سکتے ہیں جو چھوٹے (XHTML) ڈاؤن لوڈ کرنے اور اپنی مرضی کے مطابق کرنے کے لئے آسان ہے (سی ایس ایس).
شروع ہوا چاہتا ہے
نیویگیشن کے لئے ایک فہرست ڈیزائن کرنے کے لئے، آپ کو ایک فہرست استعمال کرنا ہوگا.
یہ ایک غیر ترتیب شدہ فہرست ہے جو نیویگیشن کے طور پر شناخت کی گئی ہے ہو سکتا ہے:
اگر آپ ایچ ٹی ایم ایل پر قریبی نظر آتے ہیں، تو آپ کو یہ پتہ چلتا ہے کہ "ہوم" کے لنک میں آپ کے پاس بھی کوئی شناخت موجود ہے. یہ آپ کو ایک مینو تخلیق کرنے کی اجازت دیتا ہے جو اپنے قارئین کے لئے موجودہ مقام کی شناخت کرتا ہے. یہاں تک کہ اگر آپ اس سائٹ پر بصیرت کی اس نوعیت پر ابھی تک منصوبہ بندی نہیں کرتے ہیں، تو آپ اس معلومات کو بھی شامل کرسکتے ہیں. اگر آپ بعد میں کیو کو شامل کرنے کا فیصلہ کرتے ہیں، تو آپ کو اپنی سائٹ تیار کرنے کے لئے کم کوڈنگ پڑے گا.
کسی بھی سی ایس ایس اسٹائل کے بغیر، یہ XHTML مینو معیاری بے ترتیب فہرست کی طرح لگ رہا ہے. گولیاں ہیں اور فہرست کی اشیاء تھوڑی دیر سے منسلک ہیں. کیونکہ میں جگہ ہولڈر کے لنکس کا استعمال کر رہا ہوں، زیادہ تر براؤزر کلک کرنے والے (زیر التواء اور نیلے رنگ) کے طور پر روابط ظاہر نہیں کریں گے. اگر آپ کو اوپر کے صفحے میں ویب صفحہ میں پیسٹ کریں تو، آپ کی نیویگیشن اس طرح نظر آئے گی:
- گھر
- مصنوعات
- خدمات
- ہم سے رابطہ کریں
یہ بہت بورنگ ہے اور ایک مینو کی طرح زیادہ نظر نہیں آتا ہے. لیکن چند سی ایس ایس شیلیوں کی فہرست میں شامل ہونے کے ساتھ، آپ ایک مینو تشکیل دے سکتے ہیں جو آپ پر فخر کرتی ہے.
عمودی نیویگیشن مینو
ایک عمودی نیویگیشن مینو لکھنے کے لئے بہت آسان ہے کیونکہ یہ ایک عام فہرست کے طور پر اسی طرح دکھاتا ہے: اوپر اور نیچے.
فہرست اشیاء عمودی طور پر صفحے کو ظاہر کرتی ہیں.
جب میں مینو اسٹائل کروں تو، میں باہر سے شروع کرنا چاہتا ہوں اور اس میں کام کرنا چاہتا ہوں. اس کے ذریعہ، میرا مطلب یہ ہے کہ میں سب سے پہلے الل # نیویگیشن سٹائل کرتا ہوں اور پھر لی عناصر اور اس کے بعد لنکس، وغیرہ کو منتقل کرتا ہوں. اس مینو کے لئے، سب سے پہلے آپ مینو کی چوڑائی کی وضاحت کرتے ہیں. اس بات کو یقینی بنائے گا کہ مینو اشیاء لمبے عرصے تک بھی، وہ باقی لے آؤٹ پر زور نہیں دیں گے یا افقی طومار کرنے کا سبب بنیں گے.
ul # نیویگیشن {چوڑائی: 12em؛ }
ایک بار مجھے چوڑائی سیٹ مل گئی ہے، میں فہرست کی اشیاء کے ساتھ کھیل سکتا ہوں. یہ مجھے چیزوں کی طرح (گولیاں سے چھٹکارا حاصل کرنے)، پس منظر کا رنگ، سرحدوں، متن کی سیدھ، اور مارجنوں کو قائم کرنے کی اجازت دیتا ہے.
ul # navigation li {
فہرست طرز: کوئی نہیں؛
پس منظر کا رنگ: # 039؛
سرحدی چوٹی: ٹھوس 1px # 039؛
متن - سیدھ: بائیں؛
مارجن: 0؛
}
فہرست اشیاء کے لئے بنیادی طور پر سیٹ کرنے کے بعد آپ لنکس کے علاقے میں مینو کیسے دیکھتے ہیں کے ساتھ کھیلنا شروع کر سکتے ہیں. پہلی سٹائل UL # نیوی گیشن LI A اور پھر A: لنک، A: دورہ کیا، A: ہور، اور ایک: فعال (اگر آپ چاہتے ہیں). لنکس کے لئے، میں لنکس کو ایک بلاک عنصر بنانا چاہتا ہوں (بجائے پہلے سے طے شدہ آن لائن). یہ انہیں LI کی پوری جگہ لینے کے لئے مجبور کرتا ہے اور وہ ایک پیراگراف کی طرح زیادہ کام کرتا ہے، جس میں انہیں مینو کے بٹن کے طور پر سٹائل آسان بناتا ہے. دوسری چیز جس میں میں ہمیشہ کرتا ہوں اس کو لائن کو خارج کر دیتا ہے (متن سجاوٹ: کوئی نہیں؛)، جیسا کہ اس بٹن کو میرے جیسے بٹن نظر آتے ہیں.
لیکن ظاہر ہے، آپ کا ڈیزائن مختلف ہوسکتا ہے.
ul # navigation li a {
ڈسپلے: بلاک؛
ٹیکسٹ سجاوٹ: کوئی نہیں؛
بھرتی: .25em؛
سرحد کے نیچے: ٹھوس 1px # 39f؛
سرحد کے دائیں: ٹھوس 1px # 39f؛
}
یاد رکھیں کہ ڈسپلے کے ساتھ: بلاک؛ لنکس پر سیٹ کریں، مینو اشیاء کے پورے باکس پر کلک کرنے کے قابل نہیں ہے، نہ صرف حروف. یہ استعمال کرنے کے لئے بھی اچھا ہے. اگر آپ چاہتے ہیں کہ وہ پہلے سے طے شدہ نیلے رنگ، سرخ اور جامنی رنگ سے مختلف ہوں تو لنک کا رنگ (لنک، ملاحظہ کیا، ہور اور فعال) قائم کرنا یقینی بنائیں.
ایک: لنک، ایک: کا دورہ کیا {رنگ: #fff؛ }
ایک: ہور، ایک: فعال {رنگ: # 000؛ }
میں بھی ہور ریاست کو پس منظر کا رنگ تبدیل کرکے تھوڑا سا توجہ دینا چاہتا ہوں.
ایک: ہور {پس منظر کا رنگ: #fff؛ }
اگر آپ عمودی مینو کے مزید مثالیں چاہتے ہیں، تو ذیل کی فہرست سے مشورہ کریں.
- ایک سٹیریو عمودی مینو
- ایک بنیادی عمودی مینو سانچہ
- آپ یہاں ہیں کے ساتھ ایک سٹیریو عمودی مینو
- آپ یہاں ہیں کے ساتھ ایک بنیادی عمودی مینو سانچہ
افقی نیویگیشن مینو
افقی نیوی گیشن مینو تخلیق کرنے والے مینو عمودی نیویگیشن مینو سے تھوڑی زیادہ مشکل ہیں کیونکہ آپ حقیقت یہ ہے کہ ایچ ٹی ایم ایل فہرست عمودی طور پر ظاہر کرنے کے لئے ترجیح دیتے ہیں آفسیٹ کرنا ہے. افقی مینو کے طور پر، سب سے پہلے آپ کی نیویگیشن مینو کی فہرست بنائیں :
افقی مینو تخلیق کرنے کے لئے، آپ عمودی مینو کے ساتھ کیا کرتے ہیں جیسے ہی کام کریں. باہر کے ساتھ شروع کریں اور کام کریں. چونکہ میں چاہتا ہوں کہ میری نیویگیشن بائیں کونے میں شروع ہو، میں نے اس کو بائیں حدود اور چوڑائی کے ساتھ مقرر کیا، اور میں نے اسے بائیں طرف پھینک دیا. آپ چوڑائی کی ترتیب کی عادت میں بھی لینا چاہئے تاکہ آپ کا مینو آپ کے ارادے سے زیادہ یا کم جگہ نہیں لیتا. افقی مینو کے لئے، یہ عام طور پر ڈیزائن کی مکمل چوڑائی ہے. میں نے پوری فہرست میں پس منظر کا رنگ بھی شامل کیا تاکہ اسے آسانی سے پڑھنے کے لۓ آسان بنایا جائے.
ul # navigation {
فلوٹ: بائیں؛
مارجن: 0؛
بھرتی: 0؛
چوڑائی: 100٪؛
پس منظر کا رنگ: # 039؛
}
لیکن افقی نیویگیشن مینو کے راز فہرست فہرست اشیاء میں ہے. فہرست اشیاء عام طور پر عناصر کو بلاک کرتی ہیں، جس کا مطلب یہ ہے کہ ہر ایک سے پہلے اور بعد میں ان کے پاس ایک نیا لائن پڑے گا. بلاک سے ان لائن سے ڈسپلے کو سوئچ کرکے، آپ فہرست عناصر کو ایک دوسرے کے ساتھ افقی طور پر آگے بڑھانے کے لئے مجبور کرتے ہیں.
ال # نیویگیشن لی {ڈسپلے: ان لائن؛ }
میں نے اسی طرح کے لنکس کا علاج کیا جیسا کہ میں نے عمودی نیویگیشن مینو میں ان کے ساتھ سلوک کیا، اسی رنگ اور متن سجاوٹ کے ساتھ. میں نے ایک بار پھر ایک اعلی سرحد میں شامل کیے جانے کے لئے اس بٹن کو مکمل کرنے کے لئے شامل کیا. میں ہٹا دیا گیا ایک ہی چیز ڈسپلے تھا: بلاک؛ جیسا کہ نئے لائنوں کو واپس آ کر افقی مینو کو تباہ کرے گا.
ul # navigation li a {
ٹیکسٹ سجاوٹ: کوئی نہیں؛
بھرتی: .25em 1em؛
سرحد کے نیچے: ٹھوس 1px # 39f؛
سرحدی چوٹی: ٹھوس 1px # 39f؛
سرحد کے دائیں: ٹھوس 1px # 39f؛
}
ایک: لنک، ایک: کا دورہ کیا {رنگ: #fff؛ }
# نیویگیشن پر ایک: ہور {
پس منظر کا رنگ: #fff؛
رنگ: # 000؛
}
آپ یہاں مقام کی معلومات ہیں
ایچ ٹی ایم ایل کا ایک اور پہلو آپریئر شناخت کنندہ ہے. اگر آپ اپنے صارفین کے موجودہ مقام کی نشاندہی کرنے کے لئے اپنے مینو میں ترمیم کرنا چاہتے ہیں، تو صرف اس شناخت کو استعمال کریں کہ مختلف پس منظر کے رنگ یا دیگر انداز کی وضاحت کریں. اس ID کو منسوب کریں کہ دوسرے صفحات پر صحیح مینو شے کو تاکہ موجودہ صفحہ ہمیشہ روشنی ڈالی جائے.
# نیویگیشن لی # آپ کو کوئی {پس منظر کا رنگ: # 09f؛ }
اگر آپ ان شیلیوں کو آپ کے صفحے پر ملاتے ہیں، تو آپ افقی یا عمودی مینو بار بنا سکتے ہیں جو آپ کی ویب سائٹ سے کام کرتی ہے لیکن مستقبل میں اپ ڈیٹ کرنے کے لئے فوری طور پر ڈاؤن لوڈ کرنا اور بہت آسان ہے. XHTML + CSS استعمال کرتے ہوئے اپنی فہرستوں کو ڈیزائن کے لئے بہت طاقتور آلے میں بدل دیتا ہے.
اگر آپ افقی مینو کے مزید مثال چاہتے ہیں، تو ذیل میں مشورہ کریں.
- ایک اسٹائل افقی مینو
- ایک بنیادی افقی مینو سانچہ
- آپ یہاں ہیں کے ساتھ ایک اسٹائل افقی مینو
- آپ یہاں ہیں کے ساتھ ایک بنیادی افقی مینو سانچہ