سلائڈ آؤٹ مینو بنائیں

Sep 12, 2025
کيسے

بہتر بنانے کا ایک بڑا طریقہ صارف کا تجربہ آپ کی سائٹ پر سلائڈ آؤٹ مینو شامل کرنا ہے؛ یہ صارفین کو تلاش کرنے کے لئے آنکھوں کو پکڑنے والا راستہ بناتا ہے جو وہ چاہتے ہیں - جہاں کہیں بھی وہ صفحے پر ہوسکتے ہیں - اور اس کا مطلب یہ ہے کہ انہیں سب سے اوپر نیوی تک واپس جانے کی ضرورت نہیں ہے.

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

01. دستاویز کی شروعات

پہلا قدم صفحہ دستاویز کی وضاحت کرنا ہے. اس پر مشتمل ایک HTML کنٹینر ویب پیج کی نمائندگی کرتا ہے، جس میں سر اور جسم کے حصے شامل ہیں. جبکہ سر سیکشن بیرونی سی ایس ایس اور جاوا اسکرپٹ وسائل کو لوڈ کرنے کے لئے استعمال کیا جاتا ہے، جسم کا سیکشن مرحلہ # 2 میں پیدا ہونے والی نظر آنے والی صفحہ مواد کو ذخیرہ کرنے کے لئے استعمال کیا جاتا ہے. 

 اور ایل ٹی؛! ڈیکٹائپ ایچ ٹی ایم ایل اور جی ٹی؛
& lt؛ ایچ ٹی ایم ایل اور جی ٹی؛
& lt؛ سر اور جی ٹی؛
& lt؛ عنوان اور جی ٹی؛ فہرست مینو اور ایل ٹی؛ / عنوان اور جی ٹی؛
& lt؛ لنک REL = "Stylesheet" کی قسم = "ٹیکسٹ / سی ایس ایس" میڈیا = "اسکرین" href = "styles.css" / & gt؛
& lt؛ سکرپٹ SRC = "Code.js" & gt؛ & lt؛ / script & gt؛
& lt؛ / سر اور جی ٹی؛
& lt؛ جسم اور جی ٹی؛
*** مرحلہ 2
& lt؛ / جسم اور جی ٹی؛
& lt؛ / ایچ ٹی ایم ایل اور جی ٹی؛

02. صفحہ مواد

صفحہ کا مواد ایک نیویگیشن کنٹینر کے ساتھ ساتھ سرنگ عنوان پر مشتمل ہوتا ہے. یہ نیوی گیشن روابط کی ایک سیریز اسٹور کرتا ہے اور اسے 'ڈیٹا-عمل' خاصیت کو تفویض کیا گیا ہے. یہ یہ خاصیت ہے جو کنٹینر اور اس کے عناصر کو اسٹائل اور فعالیت کو لاگو کرنے کے لئے جاوا اسکرپٹ اور سی ایس ایس کی طرف سے استعمال کیا جائے گا. 

 & lt؛ H1 اور GT؛ فہرست مینو اور ایل ٹی؛ / H1 اور GT؛
& lt؛ نیوی ڈیٹا-ایکشن = "توسیع" اور جی ٹی؛
  & lt؛ اسپین اور جی ٹی؛ & amp؛ # 9776؛ & lt؛ / span & gt؛
  & lt؛ ایک href = "#" & gt؛ صفحہ 1 & lt؛ / & gt؛
  & lt؛ ایک href = "#" & gt؛ صفحہ 2 & lt؛ / & gt؛
  & lt؛ ایک href = "#" & gt؛ صفحہ 3 & lt؛ / & gt؛
& lt؛ / naw & gt؛

03. سی ایس ایس کی شروعات

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

 ایچ ٹی ایم ایل، جسم {
  ڈسپلے: بلاک؛
  چوڑائی: 100٪؛
  اونچائی: 100٪؛
  پس منظر: # 000؛
  رنگ: #fff؛ }

04. نیویگیشن سیٹ اپ

نیویگیشن فکسڈ پوزیشننگ کے ساتھ اور ہر ایک کے اوپر زین انڈیکس کے ساتھ ظاہر کرنے کے لئے ہے تاکہ یہ مکمل اسکرین کا احاطہ کرنے کے لئے ظاہر ہوسکتا ہے کہ اس کے باوجود صارف کو طومار کیا گیا ہے. یہ ابتدائی طور پر اسکرین کی نظر آتی ہے. ایک ٹرانسمیشن کی حکمرانی ایک دوسرے کی مدت کے دوران کسی بھی تبدیلی کو متحرک کرنے کے لئے لاگو کیا جاتا ہے. 

 نیویارک {
  ڈسپلے: بلاک؛
  پوزیشن: فکسڈ؛
  باکس-سائز: سرحدی باکس؛
  اوپر: 0؛
  بائیں: -100VW؛
  Z-index: 9999؛
  Padding: .5em 1em .5em 1em ؛؛
  چوڑائی: 100VW؛
  اونچائی: 100vh؛
  متن سیدھا: مرکز؛
  پس منظر: سرخ؛
  منتقلی: تمام 1s؛ }

05. نیوی اوپن اور آئکن

نیویگیشن کی بائیں پوزیشن صفر پر مقرر کی جاتی ہے جب ایک 'کھلی' کلاس کو لاگو کیا گیا ہے، پچھلے مرحلے میں متحرک منتقلی کی وضاحت کی جاتی ہے. نیویگیشن کا پہلا بچہ توسیع آئکن ہے، جس میں سکرین کے بائیں جانب کے مرکز میں ہمیشہ نظر آنے والے فکسڈ پوزیشننگ کا استعمال ہوتا ہے. 

 nav.open {
  بائیں: 0؛
}
نیوی *: پہلا بچہ {
  پوزیشن: فکسڈ؛
  Padding: 1em؛
  کرسر: پوائنٹر؛
  بائیں: 0؛
  اوپر: 50vh؛
  واضح کریں: دونوں؛ }

06. نیویگیشن روابط

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

 نیوی ایک {
  ڈسپلے: بلاک؛
  فونٹ سائز: 4em؛
  رنگ: # 000؛
  فونٹ - خاندان: ایریری؛
  متن سجاوٹ: کوئی بھی نہیں؛
  مارجن-اوپر: .2EM؛
}

07. جاوا اسکرپٹ سننے والا

'code.js' کہا جاتا ہے ایک نئی فائل بنائیں. یہ قدم انتظار کر رہا ہے جب تک کہ صفحے پر لوڈ ہو چکا ہے، جس پر یہ 'توسیع' کے لئے 'ڈیٹا-عمل' کی خاصیت کے ساتھ تمام نیویگیشن کے پہلے بچے کے لئے تلاش کرتا ہے. یہ پہلا بچہ، کھلی آئکن ہونے والا، ایک 'کلک' ایونٹ سننے والا لاگو ہوتا ہے، جس پر عنصر کو عنصر کرنے یا 'کھلی' کلاس لاگو نہیں ہے. 

 ونڈو. Addevent لسٹینر ("لوڈ"، فنکشن () {
  var nodes = دستاویز.querySelectorall ('nav [ڈیٹا-ایکشن = "توسیع"] *: پہلا بچہ')؛
  کے لئے (var i = 0؛ i & lt؛ nodes.lugh؛ i ++) {
  نوڈس [i]. Addeventlistener ("کلک کریں"، فنکشن () {
  اگر (یہ. parnetnode.classname == "کھولیں") یہ. parentnode.classname = ""؛
  اور یہ. parentnode.classname = "کھولیں"؛
  })؛
  }
})؛
***

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین ویب ڈیزائنر کے 274 میں شائع کیا گیا تھا. مسئلہ 274 خریدیں یا یہاں ویب ڈیزائنر کو سبسکرائب کریں .

متعلقہ مضامین:

  • اوپر ویب نیویگیشن رجحانات
  • عظیم صارف کے تجربے کے 10 قواعد
  • اپنی سائٹ پر بصری اشارہ شامل کریں

کيسے - انتہائی مشہور مضامین

فوٹوشاپ میں ایک پرت پلٹائیں: ایک مکمل گائیڈ

کيسے Sep 12, 2025

ڈبل دیکھنا یہ تصویر اصل کے ساتھ فلپ اور مرکب کیا گیا ہے (تصویری کریڈ�..

3D ماڈیلرز کے لئے کریکٹر شیٹس: 15 اوپر تجاویز

کيسے Sep 12, 2025

(تصویری کریڈٹ: داہلیا کھودور) کردار شیٹ اس سبق میں دن کا حکم ہیں، �..

آپ کے ٹویٹر بائیو میں فونٹ کو کس طرح تبدیل کرنے کے لئے

کيسے Sep 12, 2025

ٹویٹر پر بہت سے لوگ ہیں - 261 ملین ٹویٹر اکاؤنٹس آخری بار جب ہم نے چیک کیا. ..

ایکسپو کے ساتھ ملکیت کا تعین شروع کریں

کيسے Sep 12, 2025

مقامی ردعمل ایک پلیٹ فارم ہے جو آپ کو جاوا اسکرپٹ کا استعمال کرتے..

ایک مستند منگا مزاحیہ پٹی کیسے بنائیں

کيسے Sep 12, 2025

صفحہ 1 کا 2: صفحہ 1 صفحہ 1 صفحہ 2. جبکہ سٹ�..

پینٹنگ میں آواز کس طرح پہنچانے کے لئے

کيسے Sep 12, 2025

جبکہ روایتی، اب بھی تصویر (ملٹی میڈیا انٹرایکٹوٹی کے علاوہ) میں آواز دک�..

پیارے پالتو جانوروں کی پورٹریٹ پینٹ

کيسے Sep 12, 2025

ہماری مکمل بلی پورٹریٹ پینٹنگ پالتو جانور اور ڈرائنگ جا�..

اپنے ویکٹر علامت (لوگو) کو 2D سے 3D سے لے لو

کيسے Sep 12, 2025

اس سبق میں، ہم دیکھ رہے ہیں کہ آپ اپنے ویکٹر پر مبنی علامات کو Illustrator اور..

اقسام