আপনার ওয়েবসাইটের প্রয়োজন অনুযায়ী ব্যবহারের জন্য আমরা CSS এবং HTML উভয় মাধ্যমেই তৈরি বৃত্তাকার মেনুর আরও একটি চমৎকার তালিকা নিয়ে এসেছি। এই বৃত্তাকার মেনুগুলোর মূল উদ্দেশ্য হলো হ্যামবার্গার মেনুকে তার বৃত্তাকার আকৃতিকে কেন্দ্র করে একটি বিশেষ স্টাইল এবং অ্যানিমেশন প্রদান করা; যেমনটা আপনি আশা করেন।
এগুলোর মধ্যে বেশ বৈচিত্র্য রয়েছে, ঠিক যেমন একটি নিখুঁত মেনু যা একটি নির্দিষ্ট থিমের উপর প্রয়োজনীয় ফোকাস প্রদান করতে পারে । অ্যানিমেশন এবং একটি মিনিমালিস্ট ভিজ্যুয়াল স্টাইল ভিজিটরকে এই সংকেত দিতে পারে যে, ওয়েব ডিজাইনে আমাদের ওয়েবসাইটকে মানসম্মত করার ব্যাপারে আমাদের ভালো দৃষ্টি রয়েছে। চলুন ১১টি বৃত্তাকার মেনু দিয়ে শুরু করা যাক, তবে তার আগে, আমরা আপনাকে CSS মেনুগুলোর আরেকটি তালিকার সাথে লিঙ্ক করে দেব ।
বিজ্ঞপ্তি নেভিগেশন মেনু
এই বৃত্তাকার নেভিগেশন মেনুটি CSS এবং HTML-এ উপলব্ধ, তাই আপনি যদি কোড নিয়ে কাজ করতে অভ্যস্ত হন, তবে এর বাস্তবায়ন বেশ সহজ। এতে থাকা চমৎকার অ্যানিমেশন এবং মিনিমালিস্ট শৈলী এটিকে তালিকার সেরাদের মধ্যে স্থান করে দিয়েছে।
ভাসমান বিজ্ঞপ্তি মেনু
এই ভাসমান বৃত্তাকার মেনুটি জাভাস্ক্রিপ্ট , এইচটিএমএল এবং সিএসএস দ্বারা সমৃদ্ধ। এটি এমন একটি মেনু যেখানে একাধিক অ্যানিমেশন রয়েছে, যা এটিকে এই তালিকার সেরাগুলোর মধ্যে স্থান করে দিয়েছে। নিঃসন্দেহে উচ্চ মানের।
বিজ্ঞপ্তি বার
এই বৃত্তাকার বারটি গুগলের ম্যাটেরিয়াল ডিজাইন নামক ডিজাইন ল্যাঙ্গুয়েজ থেকে অনুপ্রাণিত । আপনি যদি এই স্টাইলের কিছু খুঁজে থাকেন, তবে এখনই এটি আপনার ওয়েবসাইটে যুক্ত করে নিন।
বিজ্ঞপ্তি উপাদান মেনু
ম্যাটেরিয়াল ডিজাইনের জন্য তৈরি আরেকটি বৃত্তাকার মেনু, যা এর উল্লম্ব আইকন বিন্যাসের কারণে বাকিগুলো থেকে আলাদা । দৃষ্টিনন্দন এবং পরিশীলিত; অসাধারণ না হলেও, বেশ ভালোভাবে তৈরি।
বিজ্ঞপ্তি মেনু
এই মেনুতে একটি অ্যানিমেশন রয়েছে যা হ্যামবার্গার বাটনটিকে প্রসারিত করে ওয়েবসাইটের বিভিন্ন বিভাগ দেখায়, যেখানে এটি সমন্বিত করা হয়েছে।
সিএসএসে রেডিয়াল মেনু
এই রেডিয়াল মেনুটি CSS এবং HTML ব্যবহার করে তৈরি করা হয়েছে। হ্যামবার্গার আইকনে ক্লিক করলে যে একাধিক ছবি ভেসে ওঠে, তার ফলে এটি একটি দৃষ্টিনন্দন বৃত্তাকার মেনু । শুধুমাত্র এর বাহ্যিক রূপই এটিকে স্বতন্ত্র করে তুলেছে।
রেডিয়াল মেনু
তালিকার সবচেয়ে সৃজনশীল বৃত্তাকার মেনুগুলোর মধ্যে এটি অন্যতম, যা এর সুন্দরভাবে তৈরি অ্যানিমেশনের জন্য বিশেষভাবে পরিচিত । আপনার ওয়েবসাইটের বিভিন্ন মেনু বিভাগগুলো দেখতে আপনাকে ক্লিকও করতে হবে না।
মেনু সিএসএস গুয়ে
এই মেনুতে ‘গুয়ি’ (Gooey) নামক এক ধরনের অ্যানিমেশন ব্যবহার করা হয়েছে , যা হ্যামবার্গার বাটন থেকে বিভিন্ন সেকশনকে প্রবাহিত করে। এটি CSS দিয়ে তৈরি একটি অনন্য বৃত্তাকার মেনু, তাই এটি আপনার ওয়েবসাইটে যুক্ত করার জন্য প্রস্তুত। এর প্রাণবন্ত ও নজরকাড়া অ্যানিমেশনই এটিকে সত্যিই স্বতন্ত্র করে তুলেছে।
অ্যানিমেটেড রেডিয়াল মেনু
এই বৃত্তাকার মেনুটি বেশ সরল, কিন্তু এটিকে একটি মানসম্মত মেনু হিসেবে গড়ে তোলার জন্য এতে সঠিক পরিমাণে অ্যানিমেশন রয়েছে। এতে CSS এবং HTML-এর পাশাপাশি জাভাস্ক্রিপ্টও ব্যবহার করা হয়েছে । হ্যামবার্গার আইকনটিতে একটি সাধারণ ক্লিকেই সমস্ত বিভাগ খুলে যাবে, যাতে আপনি সেগুলিতে যেতে পারেন।
বিজ্ঞপ্তি নেভিগেশন পপআউট
হ্যামবার্গার আইকনটিতে দ্রুত ক্লিক করলে বিভিন্ন বিভাগগুলো পুরোপুরি খুলে যায় এবং বৃত্তটি বড় হয়ে যায়, ফলে আপনি প্রতিটিতে ক্লিক করতে পারেন। এছাড়াও, এগুলোর যেকোনোটির উপর মাউস বাটন চেপে ধরে রাখলে একটি হোভার এফেক্ট দেখা যায়, যা এটিকে আগের, কিছুটা সাধারণ সংস্করণটির চেয়ে আরও আকর্ষণীয় করে তুলেছে।
স্পিন আউট বিজ্ঞপ্তি মেনু
এটি এই তালিকার সবচেয়ে মৌলিক এবং সৃজনশীল বৃত্তাকার মেনুগুলোর মধ্যে একটি। এটি অত্যন্ত কাস্টমাইজযোগ্য এবং আপনাকে পুরানো দিনের রোটারি ডায়াল ফোনের কথা মনে করিয়ে দেবে, যেখানে প্রতিটি নম্বর ডায়াল করার জন্য আঙুল ঘোরাতে হতো। বৃত্তাকার মেনুর জন্য একটি মজাদার অ্যানিমেশন, যা এর ডিজাইনে বাকিদের থেকে আলাদা। মূলত অ্যানিমেশনটিই এই প্রভাব তৈরি করে, তাই আপনি যদি কোনো নির্দিষ্ট থিমের জন্য, যেমন একটি কল সেন্টারের জন্য, একটি মজাদার এবং ব্যতিক্রমী মেনু খুঁজে থাকেন, তবে এটি একদম উপযুক্ত।