Advertisement
  1. Code
  2. Front-End
Code

রেস্পন্সিভ ডিজাইনের জন্য একটি স্লাইডিং ন্যাভিগেশন তৈরি

by
Difficulty:BeginnerLength:ShortLanguages:

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

এই টিউটোরিয়ালে, আপনি JavaScript এবং CSS দিয়ে বানাবেন একটি বিস্তারযোগ্য সাইড ন্যাভিগেশন মেনু। ফাইনাল প্রোডাক্ট নিচে প্রদর্শিত হলঃ

Sliding Side Navigation Menu

মার্কাপ

শুরু করার জন্য, চলুন আমাদের সাইড মেনুতে কিছু মার্কাপ যোগ করিঃ

এখানে আপনি দেখতে পাবেন আমরা একটি সাইড মেনু ডিভ তৈরি করেছি যার ক্লাস sidenav । এরপর আমরা যোগ করবো আসল ন্যাভিগেশন <nav> ট্যাগ, এবং আমরা আমাদের সাইড মেনু আইকন হিসেবে ব্যবহার করছি একটি SVG।

আইকনের onclick এট্রিবিউট এবং ক্লোজ বাটন কিছু JavaScript ট্রিগার করবে, যা আমরা পরবর্তীতে যোগ করব।

মনে রাখবেন আপনার ওয়েবসাইটের সমস্ত কন্টেন্ট div id="main" এর ভিতরে রাখবেন যাতে এটি ডানদিকে স্লাইড করে।

JavaScript

পরবর্তী, চলুন এখন JavaScript যোগ করে openNav এবং closeNav ফাংশন তৈরি করি।

CSS

পরিশেষে, CSS দিয়ে আমাদের সাইড মেনু এবং লিঙ্কগুলির জন্য পেইজের শৈলি করা প্রয়োজনঃ 

নোটঃ body {overflow-x: hidden;} নিশ্চিত করে যাতে একটি আনুভূমিক স্ক্রল প্রদর্শিত না হয় যখন এটি বিদ্যমান CSS এ ব্যবহার করা হচ্ছে।

আপনি এখন এক নজর দেখে নিতে পারেন আপনার মেনুটি এবং ব্রাউজারে এটি ব্যবহার করে দেখুন।

jQuery ব্যবহার

আপনি যদি সাইড মেনুর JavaScript টি jQuery তে করতে চান, আপনি এটি করতে পারবেন আমার পুর্বে দেওয়া JavaScript টি নিচের দেওয়া অধ্যায়ের সাথে প্রতিস্থাপন করেঃ

স্লাইড সরিয়ে ফেলা

মেনু প্রদর্শনের সময় স্লাইড এনিমেশন না চাইলে, কেবল CSS প্রপার্টির transition পরিবর্তন করুন, নিচে যেভাবে সংক্ষেপে দেখানো হলঃ

এটি মেনুকে তৎক্ষণাৎ প্রদর্শিত করবে কোনরুপ বিলম্ব ছাড়াই যা নির্দিষ্ট করে দেওয়া হয়েছে transition এ । আমরা ডিফল্ট ব্যবহার করেছিলাম 0.05s

উপসংহার

সাইড মেনু তৈরি করতে সামান্য কিছু লাইন কোডের প্রয়োজন হয় এবং খুব বেশি রিসোর্সের প্রয়োজন নেই। এছাড়াও যদি পেইজে jQuery থেকে থাকে অন্য কোন কাজের জন্য, কাজটি তবে আরো কম লাইন কোড লিখে করা যাবে এবং আরো কাস্টমাইজ করা যাবে।

কোড রেস্পন্সিভ করে বিভিন্ন ডিভাইসের স্ক্রিন রেজুলেশন এ কাজ করানোর ব্যাপারটি নিছক নির্দিষ্ট ক্ষেত্রে CSS এ মিডিয়া কোয়েরি যোগ করে  পরিবর্তন করার ব্যাপার।

এটিকে আরো এগিয়ে নিতে, আপনি হয়ত আপনার মেনুর স্টাইল CSS ফ্রেমওয়ার্ক Bootstrap অথবা Bulma ব্যবহার করে করতে পারেন। 

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.