ایچ ٹی ایم ایل ، سی ایس ایس ، اور جاوا اسکرپٹ کے ساتھ موبائل مینو بار بنانے کا طریقہ

بلاشبہ ، آپ سی ایس ایس فریم ورک جیسے TailWind یا BootStrap کا استعمال کرتے ہوئے ٹوگل کرنے والا موبائل مینو بنا سکتے ہیں۔

لیکن اس کے پیچھے کیا تصور ہے؟ اور آپ ان سی ایس ایس فریم ورک پر انحصار کیے بغیر شروع سے کیسے بنا سکتے ہیں؟

خود اوپر کرنے سے آپ کو حسب ضرورت مکمل کنٹرول مل جاتا ہے۔ لہذا ، مزید اڈو کے بغیر ، اپنی پسندیدہ پروگرامنگ زبان کا استعمال کرتے ہوئے ٹوگل کرنے والا موبائل مینو بنانے کا طریقہ یہاں ہے۔

اگر آپ نے پہلے ہی ایسا نہیں کیا ہے تو ، اپنا پروجیکٹ فولڈر کھولیں اور اپنی پروجیکٹ فائلیں (HTML ، CSS ، اور جاوا اسکرپٹ) بنائیں۔

ذیل میں ، آپ کوڈ کی مثالیں دیکھیں گے جو آپ کو تینوں اقسام کے لیے درکار ہیں۔ اور اگر آپ نے پہلے ہی نہیں کیا ہے تو ، ڈاؤن لوڈ کرنے پر غور کریں۔ کوڈ سیکھنے کے لیے یہ ایپس پڑھنے سے پہلے

ہم شروع کریں گے۔ HTML:

  
  
  
 Mobile Navigation Menu  
  
  
  
     
  
  
  
  
  
     
  
  Home   
  About   
  Contact

سی ایس ایس:

/*This section demarcation is solely for the purpose of the tutorial*/  
 section{  
 width: 800px;  
 height: 600px;  
 margin-top: 50px;  
 margin-left: 250px;  
 border: solid black 1px;  
 background: #e6e3dc;  
 }  
  /*position the divs container in your DOM*/   
 #toggle-container{  
 display: grid;  
 width: fit-content;  
 margin-left: 720px;  
 margin-top: 10px;  
 }  
  /*Stack the three divs above each other. Then set a height and width for them.*/   
 #one, #two, #three{  
 background: black;  
 width: 30px;  
 height: 3px;  
 margin-top: 5px;  
 }  
 .toggle-content{  
 display: none;  
 margin-left: 700px;  
 margin-top: 20px;  
 }  
 .toggle-content a{  
 display: block;  
 text-decoration: none;  
 color: black;  
 font-size: 30px;  
 }  
 .toggle-content a:hover{  
 color: blue;  
 }  
  /*Display the class instance created by JavaScript in block*/   
 .displayed{  
 display: block;  
 }

جاوا اسکرپٹ شامل کریں:

نیٹ فلکس مجھے کیوں لات مارتا رہتا ہے؟

var toggler = document.getElementById('toggle-container');  
var toggleContents = document.getElementById('toggle-content');  
document.addEventListener('click', function(){  
  //Apply a class intance to each navigation and set display to toggle:   
 toggleContents.classList.toggle('displayed');  
});

جب آپ مینو بار پر کلک کرتے ہیں تو ورکنگ آؤٹ پٹ کیسا لگتا ہے:

مینو ٹوگل کرنے کے قابل ہے ، لہذا بار پر کلک کریں - یا صفحے کے اندر کہیں بھی - نیویگیشن کو چھپا دیتا ہے۔

جب آپ اپنے ویب پیج کے اندر کہیں بھی کلک کرتے ہیں تو آپ کا براؤزر مواد کو چھپانے کی حمایت نہیں کرسکتا ہے۔ آپ ایونٹ ٹارگٹ اور جاوا اسکرپٹ لوپ کا استعمال کرکے اسے مجبور کرنے کی کوشش کر سکتے ہیں۔ آپ اپنے جاوا اسکرپٹ میں درج ذیل بلاک آف کوڈ شامل کرکے ایسا کر سکتے ہیں۔

  //Add a click event to your webpage:   
window.onclick = function(event) {  
  //Target the click event on the menu bar to allow the webpage body to track it:   
 if (!event.target.matches('#toggle-container')) {  
 var dropdowns = document.getElementsByClassName('toggle-content');  
  //Hide the navigations by looping through each of them:   
 for (var i = 0; i  var dropped = dropdowns[i];  
 if (dropped.classList.contains('display')) {  
 dropped.classList.remove('display');  
 }  
 }  
 }  
}

تو آپ نے ابھی کیا کیا اس کا خلاصہ یہ ہے: آپ نے استعمال کرتے ہوئے تین لائنیں بنائیں۔ div HTML کا ٹیگ آپ نے ان کی اونچائی اور چوڑائی کو ایڈجسٹ کیا اور انہیں اپنے DOM میں رکھا۔ پھر آپ نے جاوا اسکرپٹ کا استعمال کرتے ہوئے ان کو ایک کلک ایونٹ دیا۔

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

متعلقہ: ایچ ٹی ایم ایل ، سی ایس ایس اور جاوا اسکرپٹ میں نیومورفک ڈیزائن کے رجحانات۔

تاہم ، باقی سی ایس ایس آپ کی ترجیح پر منحصر ہے۔ لیکن مثال کے طور پر سی ایس ایس کے ٹکڑوں میں سے ایک کو آپ کو اندازہ لگانا چاہیے کہ آپ کس طرح سٹائل کریں۔

اپنی ویب سائٹ بناتے وقت مزید تخلیقی حاصل کریں۔

بصری طور پر دلکش ویب سائٹ بنانے کے لیے کچھ تخلیقی صلاحیتوں کی ضرورت ہوتی ہے۔ اور ایک صارف دوست ویب سائٹ آپ کے سامعین کو ایک کمزور ویب سائٹ کے مقابلے میں تبدیل کرنے کا زیادہ امکان رکھتی ہے۔

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

بانٹیں بانٹیں ٹویٹ ای میل۔ 15 ونڈوز کمانڈ پرامپٹ (CMD) کمانڈز جو آپ کو معلوم ہونی چاہئیں۔

کمانڈ پرامپٹ اب بھی ونڈوز کا ایک طاقتور ٹول ہے۔ یہاں سب سے زیادہ مفید CMD احکامات ہیں جو ہر ونڈوز صارف کو جاننے کی ضرورت ہے۔

اگلا پڑھیں۔ متعلقہ موضوعات۔

پروگرامنگ۔
ایچ ٹی ایم ایل
سی ایس ایس
جاوا اسکرپٹ۔
کوڈنگ ٹپس۔

مصنف کے بارے میں ایدیسو اومیسولا۔(94 مضامین شائع ہوئے)

ادوو کسی بھی سمارٹ ٹیک اور پیداوری کے بارے میں پرجوش ہے۔ اپنے فارغ وقت میں ، وہ کوڈنگ کے ساتھ کھیلتا ہے اور جب وہ بور ہوتا ہے تو شطرنج بورڈ پر سوئچ کرتا ہے ، لیکن اسے تھوڑی دیر میں معمول سے الگ ہونا بھی پسند ہے۔ لوگوں کو جدید ٹیکنالوجی کے راستے دکھانے کا ان کا جذبہ انہیں مزید لکھنے کی ترغیب دیتا ہے۔

Idowu Omisola سے مزید

ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

سبسکرائب کرنے کے لیے یہاں کلک کریں۔

اپنا ٹوگل کرنے والا موبائل مینو کیسے بنائیں

اپنی ویب سائٹ بناتے وقت مزید تخلیقی حاصل کریں۔

ہماری نیوز لیٹر کو سبسکرائب کریں