عمودی CSS مینو: یہ اپنے آپ کر

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

بنیادی اقدامات

ایک سادہ پیدا کرنے کے لئے عمودی مینو CSS، آپ کو مندرجہ ذیل اقدامات کی ضرورت ہے:

1. سب سے پہلے، لنکس (کوڈ HTML استعمال کرتے ہوئے)، جن میں سے مینو ہو جائے گا کی ایک فہرست کا تعین. انہیں ایک نام دیں، مثال کے طور پر، مندرجہ ذیل ہیں:

1. ہوم.
2. ہماری تاریخ.
3. رہنمائی.
4. خدمات.
5. رابطے.

آپ سی ایس ایس کی مدد سے مرضی کے طور پر 2. پھر لنکس اسٹائل.

ہم لکھ ، HTML کوڈ my_Vmenu.html فائل میں رکھنے اور اسے براؤزر میں نظر آئے گا کہ کس طرح دیکھتے ہیں:

یہ ہماری مینو کی بنیاد (کنکال) ہے. # 1، # 2، وغیرہ ریفرنس کی طرف سے تبدیل کیا جانا چاہئے. دیکھو کس طرح یہ ایک براؤزر میں لگ رہا ہے. تصویر آپ کی طرح نہیں ہوں گے. اب ہم ایک مکمل عمودی CSS ڈاؤن مینو بنانے کے لئے، انداز کے عناصر کو بیان کرنا شروع ہونا چاہئے.

تفصیل سٹائل

آپ کو اس سائٹ کے اس طرح کے ایک اہم عنصر کے ظہور کو بہتر بنانے کے لئے چاہتے ہیں سب کچھ مقرر کیا ہے جس میں ایک فائل my_Vmenu.css، بنائیں. یہاں کے کوڈ، عمودی CSS ڈاؤن مینو زندہ کرے گا جس کا تعارف ہے. یہ اور نئی فائل میں لکھنے، اور پھر ہم کو قریب لے دی جاتی ہے کہ مرکزی لائنوں کے معنی غور کریں گے.

تفصیلی وضاحت کا استعمال کیا stylesheet میں

اب ہمارے CSS عمودی مینو کی تفصیلات پر غور:

فہرست طرز قسم آپ مارکر کی فہرست کو دور کرنے کی اجازت دیتا ہے. مارجن اور بھرتی کے لئے "0" مقرر کرتے ہوئے فہرست میں اضافی بھرتی ہٹا دیں. HTML کوڈ سے دیکھا جا سکتا ہے، ہمارے مینو ایک فہرست ہے، اور سٹائل سی ایس ایس کا استعمال کرتے ہوئے وضاحت کر رہے ہیں.

UL # my_Vmenu - مکمل فہرست کے مجموعی انداز.

UL # my_Vmenu لی ایک - ٹیگ لی درمیان طرز لنکس.

UL # my_Vmenu لی ج: ہور - ایک لوگوں پر hovers جب ایک وقت میں مینو اشیاء کے زیر غور قسم کی ایک وضاحت.

UL # my_Vmenu لی ایک بالشت - متن کی تفصیل (عنوان مینو).

کہ my_Vmenu.css my_Vmenu.html فائلوں اور ایک ہی ڈائریکٹری میں محفوظ کیا جانا چاہیے یاد رکھیں. تاہم، وہ مختلف فولڈرز میں واقع ہو سکتا ہے، لیکن پھر یہ my_Vmenu.css کرنے my_Vmenu.html فائل کے راستے میں رجسٹر کرنے کے لئے اہم ہے. کیونکہ اس مسئلہ میں نئے آنے والوں کو اکثر محتاط رہیں.

انداز ایک HTML فائل میں سر ٹیگز کے درمیان مربوط ہونا ضروری ہے. menu_1.png اور menu_2.png - یہ معمول کی حالت اور ہور میں تصویر مینو شے کے لئے تصویر ہے.

یہ تصاویر کے لئے ایک الگ فولڈر میں تصاویر کو بچانے کے جو my_images نام، لیکن اس کے بعد سی ایس ایس کوڈ کو ایڈجسٹ کرنے کے لئے بہتر ہے. ان تصاویر کو دکھایا گیا ہے جہاں لکھیں، وہ اس ڈائریکٹری میں ہیں: URL (my_images / menu_1.png) اور یو آر ایل (my_images / menu_2.png).

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

ہمارے عمودی مینو

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