Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

জেকুয়েরি ব্যবহার করে 'মুটুলের হোমপেজের' মত একটি ন্যাভিগেশন ইফেক্ট তৈরি করুন

by
Read Time:7 minsLanguages:

Bengali (বাংলা) translation by Bint Salim (you can also view the original English article)

আপনি নিশ্চয়ই জানেন যে, আজকাল অনেক প্রতিযোগিতামূলক লাইব্রেরী আছে। যদিও আমি জেকুয়েরীকেই প্রাধান্য দিয়ে থাকি, কিন্তু যেইভাবে MooTools –এ মেনুসমুহ কাজ করে তা আমি সর্বদাই পছন্দ করি। তাই এই টিউটোরিয়ালে আমরা মুটুলের মত একই রকম ইফেক্ট তৈরি করবো...কিন্তু এটা করবো জেকুয়েরী দিয়ে!


ডেমো এবং সোর্স কোড



ধাপ ১

চলুন, এবার একটি সহজ উলম্ব ন্যাভিগেশনের জন্য প্রয়োজনীয় HTML লেখার মাধ্যমে শুরু করি। প্রাথমিক কাঠামোর জন্য, আশা করি আপনি বুঝতেই পারছেন, আমরা একটি অনানুক্রমিক লিস্ট <ul> ব্যবহার করবো যার ID নাম হবে "sliding-navigation"। একইসাথে, আমরা কিছু লিংক যুক্ত করবো এবং প্রত্যেকটি < li > আইটেমের জন্য "sliding-element" নামে একটি ক্লাস নাম দিবো।

একইসাথে আমি একটি টাইটেল এলিমেন্ট যোগ করবো। এটা একটি দরকারী বিষয় কারণ অনেক ওয়ার্ডপ্রেস ব্লগের সাইডবারেই টাইটেল থাকে (যেমন, আর্কাইভ)। তাই এটা দেখতে মোটামুটি নিচের মত হবেঃ


ধাপ ২

এখন, চলুন একটি HTML ডকুমেন্ট তৈরি করি, যেখানে আমাদের এইমাত্র সম্পন্ন করা কাজগুলো রাখবো। নতুন আরেকটি HTML ফাইল তৈরি করুন এবং এটার নাম দিন demo.html। তারপর, এই ফাইলটি আপনার পছন্দের টেক্সট এডিটরে খুলুন এবং নিচের কোডটি প্রবেশ করানঃ

এখানে বেশ কিছু বিষয় দ্রষ্টব্যঃ

  1. আমাদের demo.html ফাইলে !DOCTYPE ডিক্লেরেশন সেট করা হয়েছে XHTML 1.0 Strict। এটা প্রয়োজনীয় নয়, কিন্তু আমি ডকুমেন্টটিকে যতটা সম্ভব বেসিক রাখতে চেয়েছি।
  2. আপনি হয়তোবা লক্ষ্য করেছেন যে, <link> ট্যাগে style.css নামে একটি ফাইলের রেফারেন্স দেয়া হয়েছে। যদিও এখানে এমন কোনও ফাইলই নেই। তবে, চিন্তার কিছু নেই, এটা পরের ধাপেই আসবে।
  3. পরিশেষে, আমি আমার নেভিগেশন ব্লকটি একটি < div > এলিমেন্টের মাঝে রেখেছি। এটাকে বলা হয় নেস্টেড HTML ব্লক। আমরা পরবর্তীতে এটা পেইজের কোন স্থানে ন্যাভিগেশন ব্লকটি থাকবে তা ঠিক করতে ব্যবহার করবো।

ধাপ ৩

এখন আমাদের HTML ফাইল তৈরি হয়েছে এবং কাজ করছে, এবার চলুন কিছুটা স্টাইল যোগ করি। মনে রাখবেন যে, আমাদের HTML ডকুমেন্টে যেই CSS ফাইলের সাথে পয়েন্টিং করা হয়েছে তার নাম হচ্ছে styles.css। তাই চলুন, styles.css নামে একটি ফাইল তৈরি করি এবং যেখানে HTML ফাইল আছে সেখানেই তা সংরক্ষণ করি। আগের ধাপে আমরা যেমন করেছিলাম, আপনার পছন্দের টেক্সট এডিটরে এই ফাইলটি খুলুন এবং নিন্মোক্ত কোডটি প্রবেশ করান:


ধাপ ৪

এই পর্যায়ে এসে আপনার demo.html পেইজটি অনেকটা নিচের মত দেখাবে:

Demo PreviewDemo PreviewDemo Preview

তাই, এখনই jQuery ব্যবহার করার উপযুক্ত সময়। কিন্তু শুরু করার আগে আমাদের আরও কিছু জিনিষ করতে হবেঃ

  1. সর্বাধুনিক jQuery সংস্করণটি ডাউনলোড করুন।
  2. sliding_effect.js নামে একটি নতুন ফাইল তৈরি করুন এবং HTML ও CSS ফাইল যেই ডাইরেক্টরিতে আছে সেই একই ডাইরেক্টরিতে তা সংরক্ষণ করুন।
  3. সবশেষে এই ফাইল দুটি আপনার HTML ডকুমেন্টের < head > অংশে প্রবেশ করান।

এখন, আপনার HTML ফাইলের <head> অংশটি এমন দেখাবে:


ধাপ ৫

এখন, আমরা একটি নির্দিষ্ট ফাংশন তৈরি করবো, যা স্লাইডিং ইফেক্টটিকে কার্যক্ষম করে তুলবে। এই ফাংশনে পাঁচটি প্যারামিটার আছে (navigation_id, pad_out, pad_in, time, এবং multiplier) এবং এগুলোকে নিচের মত করে ব্যবহার করুন:

  1. navigation_id: এটা নেভিগেশনের আইডি নাম, যেটাতে থাকা এলিমেন্টগুলোর উপর ইফেক্টটি প্রয়োগ হবে।
  2. pad_out: ন্যাভিগেশনের কোনও লিঙ্কের উপর মাউস কার্সর নিয়ে যাওয়ার ফলে তা কত পিক্সেল বামে সরে যাবে, তা ঠিক করে থাকে।
  3. pad_in: ন্যাভিগেশনের উপর মাউস কার্সর না থাকলে একটি লিংক কত পিক্সেল ভিতরে চলে যাবে তা ঠিক করে।
  4. time: এটা (মিলিসেকেন্ডে) একটি পেইজ লোড হওয়ার পর লিঙ্কগুলো ঠিক কতটুকু সময়ে নির্দিষ্ট জায়গায় অবস্থান করবে তা ঠিক করে।
  5. multiplier: মাল্টিপ্লায়ারের কাজ হচ্ছে একটি উপাদানকে স্ক্রিনের স্লাইডে নির্দিষ্ট পরিমানে বৃদ্ধি বা হ্রাস করা। অন্য কথায়, যদি মাল্টিপ্লাইয়ার ১ হয়, তবে সব লিঙ্ক উপাদান স্ক্রিনে সমান সময় অন্তর স্লাইডের মধ্যে প্রবেশ করবে। যাইহোক, এটা যদি ০ এর কম হয়, তবে পরবর্তী লিংক উপাদান সমূহ দ্রুততর হবে, অন্যদিকে ১ এর বেশি হলে তার বিপরীত ব্যপারটি ঘটবে।

তাহলে, এবার আপনার sliding_effect.js ফাইলটি খুলুন এবং নিন্মোক্ত কোডটি প্রবেশ করানঃ


ধাপ ৬

আমাদের যা করতে হবে তা হচ্ছে, পেইজ লোড হওয়ার পর স্ক্রিপ্ট টিকে কল করা। এজন্য, দুই জায়গায় নিচের কোড স্নিপেট দুটি রাখা যায়। এটাকে হয় sliding_effect.js ফাইলের ভিতর লিখতে হবে (এই টিউটোরিয়ালের জন্য আমি এই অপশনটিই পছন্দ করেছি) অথবা HTML এর ভিতর <script> ট্যাগ ব্যবহার করে এটাকে কল করতে হবে। ট্যাগ ব্যবহার করে এটাকে কল করতে হবে। অন্যভাবেও, একই কোড ব্যবহার করতে হবে, নিচের মত করেঃ


ধাপ ৭

সবশেষে আমরা পেইজে কিছুটা স্টাইল যোগ করবো, যাতে এটা দেখতে কিছুটা সুন্দর দেখায়। প্রথমে আমি নিচের মত করে একটি ইমেজ ব্লক তৈরি করবোঃ

ইমেজটিতে কিছুটা হালকা গ্রেডিয়েন্ট, একটি হাইলাইট লাইন আছে এবং 190px প্রশস্ত যেটাকে আমরা "background.jpg" নামে ডাকতে পারি। এটাকে আমাদের বামদিকে স্থাপন করবো যাতে বাটন স্লাইডটি এটার নীচে থাকে। একইসাথে আমরা পেইজে একটি হেডিং টাইটেল যোগ করবো। তাহলে আমাদের  HTML টি দেখতে নিচের মত হবে:

লক্ষ্য করুন, আমি ইমেজটিকে "navigation-block" এলিমেন্টের ভিতর রেখেছি এবং এটার জন্য "hide" নামে একটি ID দিয়েছি। একই সাথে, আমি একটি হেডিং এলিমেন্ট এবং সাব টাইটেল যুক্ত করেছি। এবার আমরা styles.css ফাইলে কিছু এক্সট্রা CSS যুক্ত করবো নিচের মত করে:

তাই এবার আমরা প্রথমে <h2> এলিমেন্টের ভিতর, "display:none" ব্যবহার করে HTML টেক্সটটিকে অদৃশ্য করে দিবো এবং ব্যকগ্রাউন্ড ইমেজ হিসেবে কিছু সুন্দর টেক্সট সেট করবো যা আগেই তৈরি করে রেখেছি।

একইসাথে লক্ষ্য করুন যে, "navigation-block” এলিমেন্টটি একটি সঠিক অবস্থানে আছে, তাই আমরা "hide" ইমেজটিকে বাম দিকে ঠেলে দিতে পারি। এর ফলে ট্যাবগুলো এটার নিচ থেকে বেরিয়ে আসবে।

পরিশেষে, আমাদের ট্যাবে কিছুটা সম্পূর্ণতা এনে দিতে আমরা একটি সুন্দর ব্যাক গ্রাউন্ড ইমেজ যোগ করবো যেটা এমন একটি আলোকছায়া তৈরি করবে: 


সম্পন্ন

এবং আমরা শেষ করলাম!

চূড়ান্ত ইফেক্টটি দেখুন।

HTML / Images / JS ডাউনলোড করুন

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.