JQuery সঙ্গে একটি অ্যাকর্ডিয়ন আকারে সাইটের জন্য উল্লম্ব মেনু

মেনু, আপনি জানেন - সাইট অবিচ্ছেদ্য অংশ। জবর নেভিগেট অনলাইন সম্পদ সুদ দর্শক করতে সক্ষম হয়। উপরন্তু, কোনো মেনু একটা গুরুত্বপূর্ণ বৈশিষ্ট্য - তার সংহতি। একটি সরল উল্লম্ব মেনু সহজে HTML এবং CSS এর ব্যবহার করে তৈরি করা। কিন্তু আমরা আরো যেতে: আমাদের jQuery এর সাহায্যে menu- "অ্যাকর্ডিয়ন" তৈরি করা শিখতে যাক।

একটি menu- "অ্যাকর্ডিয়ন" তৈরি করুন

একটি অ্যাকর্ডিয়ন আকারে একটি উল্লম্ব মেনু কি? এই ড্রপ-ডাউন তালিকা, যা একটি সহজ নেভিগেট করতে তৈরি করে এবং একটি আড়ম্বরপূর্ণ সাইটের দেয়। মেনু, এই ভাবে সম্পাদিত, আপনি সাব আইটেম অনেকটা চালু করতে পারবেন। সেগুলির অ্যাক্সেস ঘটে যখন আপনি আপনার পছন্দসই আইটেম উপর মাউস ক্লিক করুন। কেউ বলতে পারেন যে এটা jQuery এর ব্যবহার না করে এই ফ্যাশন একটি সহজ মেনু করতে সম্ভব। হ্যাঁ, এটা। কিন্তু এই বস্তুর স্মার্টফোন অথবা ট্যাবলেট মালিকদের খুব দরকারী হবে না। এর একটি উল্লম্ব মেনু তৈরি করুন, সব মর্মস্পর্শী যাক। তারপর, রঙ একটি নেভিগেশন styling পরিবর্তন, এটা সম্ভব যে কোন সাইট থেকে নকশা সমন্বয় করা হবে।

HTML কোড

সুতরাং, আমাদের উল্লম্ব মেনু তৈরি করতে, আপনাকে প্রথমে এইচটিএমএল-কোড ডায়াল আবশ্যক, যা নিম্নলিখিত পংক্তিগুলি উপস্থিত থাকবে:

Accord_menu.html নামক একটি ফাইলে এই কোড সংরক্ষণ করুন।

আপনি দেখতে পারেন হিসাবে, আমরা একটি unordered তালিকা তৈরি করেছেন। এটা তোলে 3 প্রধান পয়েন্ট নিয়ে গঠিত:

- ফটো;

- ছায়াছবি;

- পুস্তক।

প্রতিটি আইটেম একটি কয়েক অনুচ্ছেদ রয়েছে। # কোথায়, আপনি লিঙ্ক যোগ করতে হবে। এখন এটা শৈলী বর্ণনা করতে গুরুত্বপূর্ণ। এটা সব আপনার ইন্টারনেট রিসোর্স চেহারা উপর নির্ভর করে। সাইটটি তার নকশা মধ্যে harmoniously সংহত আবশ্যক জন্য উল্লম্ব মেনু।

সিএসএস-কোড

শৈলী আপনি কঠিন হওয়া উচিত নয়। আমরা এই উদাহরণে একটি গ্রেডিয়েন্ট ভরাট ব্যবহার শুধু তাই নোট করুন। এখানে সিএসএস-কোড হল:

রঙ সিএসএস ফাইল উল্লেখ করা হয়, আকার চিহ্নিতকারী বাম তালিকায় আইটেম থেকে সরিয়ে ফেলা হয়। এটা কিভাবে প্রতিটি আইটেমের ও উপ-মেনুতে আচরণ করে যখন আপনি এটি উপর কার্সার রেখে নির্ধারিত। উদাহরণস্বরূপ:

# E1fee2 - এই ম্লান সবুজ রং সাব।

# C4f0f7 -golubovaty আলোছায়া সাব যখন আপনি তাদের উপরে কার্সার রাখুন।

ডিসপ্লে সম্পত্তি প্রয়োজনীয় প্যাডিং এবং আকার সমন্বয় ব্লক মান জিজ্ঞাসা। রঙ, আকার, ফন্ট প্রকৃতি, অবস্থান - সবকিছু যেভাবে CSS ফাইলে বর্ণনা করা হয়। , সেটিতে কল উদাহরণস্বরূপ, accordionmenu_my1.css।

jQuery এর মেনু উন্নতি সংযুক্ত হচ্ছে

হয়ত স্মরণ করবে যে, আমাদের লক্ষ্য - একটি উল্লম্ব মেনু jQuery এর তৈরি করুন। আপনি এই প্রযুক্তির সাথে পরিচিত না হন, তাহলে চিন্তা করবেন না। আমরা Google সংগ্রহস্থলের ব্যবহার এবং jQuery স্ক্রিপ্ট সংযোগ। এটি আরো আকর্ষণীয় মেনু করতে হবে। jQuery এর হাইপারটেক্সট মার্কআপ HTML এবং জাভাস্ক্রিপ্ট মিথষ্ক্রিয়া উপর ভিত্তি করে একটি জাভাস্ক্রিপ্ট লাইব্রেরী। jQuery আপনি বিষয়বস্তু এবং উপাদান বৈশিষ্ট্যাবলী অ্যাক্সেসের অনুমতি দেয়।

সুতরাং, এইচটিএমএল ফাইল দেহের প্রয়োজনীয় স্ক্রিপ্ট সংযোগ এবং 2 ভেরিয়েবল সঞ্চয় করার জন্য নিয়ম সেট, ঘোড়দৌড় উপাদানের জন্য ব্যতীত। কোড অবদান, এক একটি মাউস ক্লিকের নেই যার উপর খোলার সময়ে অন্যান্য ট্যাব বন্ধ করার। এখানে কিভাবে এটা দেখতেও আছে:

সকল পরিবর্তন সংরক্ষণ করুন, দেখুন কি এটি ব্রাউজার মেনুতে মত দেখায়। যে একটি সাধারণ ফলাফল: ফলস্বরূপ, আমরা একটি আকর্ষণীয় মেনুটির আপনি সবসময় পরিবর্তন করতে পারেন, তাদের অগ্রাধিকার উপর নির্ভর করে এসেছেন। এবং jQuery, সিএসএস ক্ষেত্রে নতুন জ্ঞান অর্জন, আপনি সাইটের অনন্য উপাদান তৈরি করবে তাদের দক্ষতা বাড়ানোর।